WordPressに自作HTMLツールを入れるたび「あれ？何やるんだっけ？」って迷う人に向けて、完全コピペOKの導入タスクリストを作りました。
私も毎回ググってはコピペしては…わからん！マジで面倒だったんですよね🤯
そこで自分用にまとめてた「導入タスクリスト」を記事化しました。これで「わからん！どこだっけ？」と検索に費やす時間は、今日で卒業しちゃいましょう💪
よくある悩み・疑問
「WordPressにHTMLツールを入れるの、めっちゃ面倒じゃない？」
- ファイルどこに置くんだっけ？
- .htaccessの書き方忘れた
- OGP設定どうする？
- サイトマップ更新忘れがち
- 404エラー出て焦る
私も同じでした。毎回ググってはコピペしては…もう嫌になったんですよね。
原因・仕組みの解説
WordPressにHTMLツールを入れるとき、実は5つのステップが必要なんです：
- ファイル配置 –
/tools/フォルダにHTMLファイルを置く - URL書き換え – .htaccessで.htmlなしURLを作る
- SEO対策 – OGP・canonical・JSON-LDを統一
- サイトマップ更新 – 検索エンジンに新しいURLを教える
- 動作確認 – 実際に動くかテスト
でも、これらを毎回覚えてるの、マジで無理じゃないですか？
解決方法
そこで作ったのが、完全コピペOKのチェックリストです。
STEP 0: ファイル整理
やること
- ツール名を英小文字＋ハイフンで決定
- 例: webp-cropper
- ツールは必ず
/tools/フォルダにまとめて配置
ポイント
適当な場所に入れると管理が煩雑になるので、このフォルダで統一しましょう。
STEP 1: .htaccess 編集
やること
.htaccessファイルの「# BEGIN Tools Rewrite Rules」部分に下記を追加
RewriteRule ^webp-cropper/?$ /tools/webp-cropper.html [L]ファイルの場所
- WordPressをインストールした一番上のフォルダ
- 例：
public_htmlやwwwなど - 見つからない場合は「隠しファイルを表示」設定をONに
簡単に言うと
.htaccessファイルに「このURLにアクセスしたら、このHTMLファイルを見せてね」ってルールを追加する作業です。
STEP 2: OGP & JSON-LD
やること
HTMLファイルの<head>内で以下の3箇所を修正
- og:url
<meta property="og:url" content="https://example.com/webp-cropper">- canonical
<link rel="canonical" href="https://example.com/webp-cropper">- JSON-LD
"url": "https://example.com/webp-cropper"手順
- HTMLファイルをテキストエディタで開く
- 「og:url」「canonical」「JSON-LD」で検索
- 該当箇所のURLを書き換え
注意
「example.com」の部分は必ず自分のサイトのドメインに置き換えてください。
簡単に言うと
SNSでシェアしたときに正しいURLが表示されるように、HTMLファイルの中身を少し書き換える作業です。
STEP 3: サイトマップ
やること
- static-sitemap.xml に新しいURLを追加（初めての場合は作成）
<loc>https://example.com/webp-cropper</loc>- Search Console で送信 or 再送信
ファイルの場所
- static-sitemap.xml はWordPressのルートフォルダにあります
- 例：public_html や www など
- 見つからない場合は「sitemap」でファイル検索
static-sitemap.xmlがない場合
ファイルが存在しない場合は、新しく作成しましょう。
- ファイル作成
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2024-01-01</lastmod>
</url>
<url>
<loc>https://example.com/webp-cropper</loc>
<lastmod>2024-01-01</lastmod>
</url>
</urlset>- ファイル名
static-sitemap.xmlとして保存- WordPressのルートフォルダに配置
- 注意点
lastmodは実際の更新日付に変更- 既存のページも含めて全URLを記載
簡単に言うと
Googleに「新しいページができましたよ」って教える作業です。検索結果に表示されるようになります。
STEP 4: 動作テスト
やること
- https://example.com/webp-cropper で表示・機能確認
- モバイル表示 / DL / レスポンス確認
チェックポイント
- ページが真っ白だったり、エラーが出たら設定ミスの可能性あり
- URLのスペルや .htaccess の書き方を再確認
- スマホやタブレットでも正しく表示されるか確認
- ダウンロード機能やレスポンス速度に問題がないか確認
STEP 5: GitHub
やること
ターミナルやコマンドプロンプトで下記コマンドを実行
git add tools/webp-cropper.html static-sitemap.xml
git commit -m "add webp-cropper tool"
git push簡単に言うと
変更したファイルをバックアップする作業です。間違えても元に戻せます。
OPTION
やること
- 301リダイレクトを.htaccessに追加
RewriteRule ^(webp-cropper)\.html$ /$1 [R=301,L]- GA4 / AdSense コードをHTML内に埋め込み
- OGP画像 / faviconを用意して設置
- Search Consoleやアナリティクスの設定見直し
簡単に言うと
より完璧にするための追加作業です。必須じゃないけど、やるとプロっぽくなります。
Tip: 複数ツールを量産するときは、.htaccess と static-sitemap.xml をテンプレ化しておくと神速で回せます👑
他の選択肢と比較、注意点
よくある失敗パターン
| トラブル | よくある原因 | サクッと解決 |
|---|---|---|
| .htmlなし URL が 404 | RewriteRule を WP ブロック内に書いた | WP ブロック外 へ退避 |
| OGP で古い URL が出る | og:url 修正漏れ | meta / JSON‐LD / canonical 全部統一 |
| Search Console “送信された URL が見つかりません” | サイトマップ未更新 | <lastmod> も併せて更新→再送信 |
他の方法との比較
- プラグインを使う: 便利だけど、プラグイン依存になる
- 手動で毎回: 時間かかるし、忘れがち
- このチェックリスト: 完全コピペOK、迷わない
よくある質問集
Q: 対象となるHTMLツールって？
A: *.html で完結するクライアントサイドツールです。画像変換・背景除去・投資シミュレーターなど。
簡単に言うと
ブラウザだけで動く、サーバーが不要なツールのことです。
Q: なぜ/tools/フォルダに置くの？
A: 管理しやすいし、WordPressのテーマと分離できるからです。
簡単に言うと
整理整頓のためです。散らかると後で困ります。
Q: .htaccessの書き方忘れたら？
A: このチェックリストをコピペするだけです。毎回ググる必要なし！
簡単に言うと
この記事をブックマークしておけば、いつでも見返せます。
Q: SEO対策って本当に必要？
A: 検索流入を狙うなら必須です。OGP・canonical・JSON-LDの三点セットで完璧。
簡単に言うと
検索結果で上位に表示されたいなら必要です。やらないと誰にも見つけてもらえません。
まとめ・次の動積
これで「量産 → 公開 → 解析」のループが爆速になります。
未来の自分を救う「型」を持とう
- ファイル名の法則化 → 迷わん
- .htaccess, sitemap, OGP の三点セット → SEO も迷わん
- GitHub 管理 → 事故っても戻せる。マジで安心✨
あとは行動あるのみです。
- このチェックリストをコピペ
- 次のツールを /tools/ にぶち込む
- 検索流入と AdSense 収益、数字でニヤつく😎
「わからん！どこだっけ？」と検索に費やす時間は、今日で卒業しちゃいましょう💪
