ホームページ制作シリーズ（全5回）
実際にやったSEO対策の話
こんばんは、ちまです。
前回の【公開前の仕上げ編】で予告したとおり、今回は焼き鳥屋さん「池下一鳥目」のホームページで実際にやったSEO対策の話を書きます。今回で、ホームページ制作シリーズは完結です。
一言でSEO対策と言ってもいろいろあって、前記事で書いた表示速度もそうなんですが、この記事では特に印象に残っている3つを取り上げます。①タグ構造の見直し、②構造化データの追加、③お問い合わせ関連のページを検索から外す設定、の3本です。
タグ構造は「後から直す」のが一番大変だった
プログラミングを学びWeb制作を始めた頃、HTMLのタグ（見出しのh1・h2、段落のpなど）のルールは何となく覚えていましたが、あまり意識せずにコードを書いていました（笑）
制作を進める中で「タグの構造やalt属性（画像の代替テキスト）はSEO対策として大事なんだ」とか、「このタグはこういう時に使うべきなんだ」と徐々に分かってきました。しかし、その時点ではすでにコードはある程度積み上がっていて、細かく見直して修正するのは正直だいぶ骨の折れる作業になっていました（笑）
そこで救世主として現れたのが、Claude Codeです。仕上げ編でも書きましたが、「全体の総評をお願いします」と頼めば、タグの使い方についても指摘してくれます。それをClaude Codeにお願いしてまとめて直してもらったのは本当に助かりました（笑）
代表的な直しの1つが、ロゴのh1タグでした。h1はページの中で「一番大きな見出し」を表すタグで、原則1ページに1つだけ使うのが望ましいとされています。私は最初、全ページでロゴをh1にしていたのですが、SEO的にはトップページだけh1、下層ページはdiv（意味を持たない箱）に変えるのが良い、と教わりました。
ちなみにロゴは画像なので、h1の中身をロゴ画像だけにしてしまうと、検索エンジンから見ると「h1の中身が空」という状態になってしまいます。そこでvisually-hidden（目には見えないけれど検索エンジンや読み上げソフトには読めるテキスト）で「池下一鳥目｜名古屋・池下の完全予約制 焼き鳥専門店」というお店の説明を仕込みました。これもAIと相談して入れた工夫です。
リッチリザルトを狙って構造化データを入れた
もう1つ、総評で提案してもらって入れたのが、構造化データ（JSON-LDと呼ばれる形式）です。
構造化データというのは、お店の名前・種類・住所・営業時間・電話番号などの情報を、決められた形式でページの中に埋め込む仕組みです。人間には見えませんが、検索エンジンにとっては「このページはこういうお店の情報が載っているページですよ」と伝える目印になります。
これを入れておくと、うまくいけばリッチリザルトと呼ばれる、検索結果画面での特別な表示（地図が出たり、営業時間が出たり、レビューの星が出たり）を狙うことができます。飲食店のホームページなら、まさに入れておきたいやつです。
入れた後は、Googleが提供している「リッチリザルト テスト」というツールで、ちゃんと認識されるかを確認しました。ページのURLを入れて実行すると、「このページからこういう構造化データを検出できました」と教えてくれます。「リッチリザルトが検出されました」という表示が出た時は、ちょっとした達成感がありました（笑）
必ずリッチリザルトが表示されるとは限らないのですが（最終的な出し方はGoogleが決めます）、飲食店のサイトなら入れておいて損はない対策だと思います。
お問い合わせ関連のページは検索に出したくない
3つ目は、お問い合わせ関連のページのnoindex設定です。
このサイトのお問い合わせは「入力→確認→送信→完了」の4ページ構成なのですが、これらのページが検索結果に出てきても、正直あまり嬉しいことはありません。誰かが「池下一鳥目」で検索したら、まずトップページや店舗案内が出てほしいのであって、「送信完了しました」ページが上位に来るのは避けたい話です。
noindexというのは、検索エンジンに向けて「このページはインデックス（検索結果への登録）しないでください」とお願いするための設定です。これをお問い合わせフォームの入力・確認・送信・完了の4ページに入れました。
これもClaude Codeの総評で「お問い合わせ関連のページはnoindexにした方がいい」と指摘されて設定したものです。地味な作業ですが、検索結果の見栄えを整えるという意味で、意外と大事な仕込みでした。
全体を振り返って思うこと
シリーズ全体を振り返って一番強く思うのは、最初にサイトの設計や構造をある程度イメージしておくのが大事、ということです。ページのレイアウトも、HTMLのタグ構造も、後から直すのが一番大変な作業でした（笑）
とはいえ、後からでも直せたのは、AIエージェントに全体を見てもらって指摘してもらえたおかげでもあります。最初からきちんと設計する大切さと、AIエージェントを使えば手戻りにも耐えられることを、身をもって学んだ貴重な経験でした。
長かったホームページ制作シリーズも、これで一区切りです。ここまでお付き合いいただき、ありがとうございました。
それでは、また次回〜
コメント