同じデザインのWebサイトなのに、検索順位に差がつくことがあります。デザインの再現度は同じ、コンテンツの中身も同じ。それなのに、片方は検索上位に表示され、もう片方はなかなか上がらない。
その原因のひとつが、HTMLタグの使い方です。
Google のクローラー（検索ロボット）は、ページの見た目ではなく HTMLの構造を読んでコンテンツを理解しています。つまり、タグの選び方ひとつで「このページは何について書かれているか」の伝わり方が変わるんです。
今回は、よくある「もったいないコーディング」と、それをどう直せば良いかをコード付きで紹介します。
よくある「もったいない」コーディング
実際の案件でもよく見かけるのが、とりあえず div と p で組んでしまうパターンです。見た目は問題なく仕上がるので、一見すると気づきにくいのが厄介なところです。
たとえば、こんなコードがあったとします。
<div class="header">
<div class="nav">
<div><a href="/">ホーム</a></div>
<div><a href="/about">会社概要</a></div>
<div><a href="/contact">お問い合わせ</a></div>
</div>
</div>
<div class="main">
<div class="title">サービス紹介</div>
<p>私たちのサービスについて紹介します。</p>
<div class="subtitle">特徴</div>
<p>高品質なデザインを提供します。</p>
<p>レスポンシブ対応しています。</p>
<p>SEO対策も万全です。</p>
<img src="service.jpg">
</div>ブラウザで表示すると、CSSで見た目を整えれば普通のWebサイトに見えます。でも、このコードにはいくつか問題があります。
- ナビゲーションが
divで囲まれていて、クローラーが「ここがメニューだ」と判断できない - 見出しに
h2やh3を使わずdivにクラスを付けているだけなので、ページの階層構造が伝わらない - 特徴の3つの項目が
pタグで並んでいて、「リスト」だと認識されない imgタグにalt属性がなく、画像の内容がクローラーにもスクリーンリーダーにも伝わらない
こうしたコーディングだと、Google は「このページの構造」を正しく理解できず、SEO の評価に影響が出ます。
セマンティックHTMLに書き換えてみる
先ほどのコードを、意味のあるタグに置き換えてみましょう。セマンティック（意味的な）HTMLとは、コンテンツの役割に合ったタグを選ぶ書き方のことです。
<header>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>サービス紹介</h2>
<p>私たちのサービスについて紹介します。</p>
<h3>特徴</h3>
<ul>
<li>高品質なデザインを提供します</li>
<li>レスポンシブ対応しています</li>
<li>SEO対策も万全です</li>
</ul>
<img src="service.jpg" alt="サービスの特徴を示すイメージ図" width="800" height="450">
</section>
</main>見た目は CSSで同じように仕上げられますが、HTMLの「中身」がまったく違います。書き換えたポイントを見てみましょう。
headerとnavで囲むことで、「ここがサイトのナビゲーションだ」とクローラーに伝わるh2→h3の順に使うことで、ページの見出し階層が明確になる- 並列する項目を
ulとliでリスト化して、「複数の項目がまとまっている」ことが伝わる imgにalt・width・heightを設定して、画像の内容とサイズをあらかじめ伝えるsectionで意味のあるまとまりを囲んで、コンテンツの区切りを明示する
なぜタグを使い分けると良いのか
セマンティックHTMLにするメリットは、大きく3つあります。
クローラーがページを正しく理解できる
Google のクローラーは、nav を見て「ナビゲーションだ」、h2 を見て「主要な見出しだ」と判断します。div にクラス名を付けても、クローラーはクラス名の意味を理解しません。タグそのものが情報を持っているからこそ、正しいタグを選ぶ必要があるんです。
スクリーンリーダーで正しく読み上げられる
視覚に障害のある方が使うスクリーンリーダー（画面読み上げソフト）は、HTMLタグをもとにページの構造を判断しています。nav タグがあれば「ナビゲーション」として案内し、見出しタグがあればページ内の移動に使えます。正しいタグは、アクセシビリティ（誰でも使いやすいWebサイトにすること）の基盤です。
コードの見通しが良くなる
チームで開発しているとき、div が入れ子になったコードは読み解くのに時間がかかります。header・main・footer・section と書かれていれば、ファイルを開いた瞬間にページの構成がつかめます。保守や改修のときに、この差は大きく響いてきます。
実務でよく使うタグの使い分け
ここからは、実際の案件でよく使うタグを場面ごとに紹介します。
nav — ナビゲーション
ヘッダーやフッターのメニュー、サイドバーのカテゴリ一覧など、サイト内を移動するためのリンクのまとまりに使います。パンくずリストも nav で囲むのが適切です。
section — 意味のあるまとまり
ページ内の各セクション（「サービス紹介」「料金プラン」「よくある質問」など）を囲みます。section の中には見出し（h2 や h3）をセットで入れるのが基本です。
article — 独立したコンテンツ
ブログ記事、ニュース記事、商品カードなど、それだけで完結するコンテンツに使います。記事一覧ページでは、各記事を article で囲むことで「ここが1つの記事だ」と伝わります。
picture — 画像の出し分け
PCとスマホで異なる画像を表示したいときに使います。たとえば、横長のバナーをPCで、正方形にトリミングしたものをスマホで表示するケースです。
<picture>
<source media="(max-width: 767px)" srcset="banner-sp.jpg">
<img src="banner-pc.jpg" alt="キャンペーンバナー" width="1200" height="400">
</picture>ul と li — リスト
料金プランの比較、特徴の列挙、手順の説明など、複数の項目を並べる場面ではリストタグを使います。CSSで見た目を変えれば、カード型のレイアウトもリストタグで実装できます。箇条書きに見えなくてもOKです。大事なのは「HTMLとして、まとまりを持った項目群であること」です。
h2 と h3 — 見出しの階層
ページ全体の大きなテーマに h2 を使い、その中の小項目に h3 を使います。h2 の下にいきなり h4 が来るような飛ばし方はNGです。本の「章→節→項」と同じように、順番を守ってください。
見落としがちなアクセシビリティ対応
タグの使い分けに加えて、実務で忘れがちなポイントがあります。
img の alt 属性を空にしない
装飾的な画像であれば alt="" で構いませんが、コンテンツとして意味のある画像には説明文を入れます。「画像」「写真」とだけ書くのではなく、何が写っているかを具体的に書いてください。
<!-- あまり良くない -->
<img src="team.jpg" alt="写真">
<!-- 良い -->
<img src="team.jpg" alt="オフィスで打ち合わせをするチームメンバー4名" width="800" height="533">フォームには label を必ずセットにする
お問い合わせフォームの入力欄には、label タグを関連付けます。これによって、スクリーンリーダーが「この入力欄は名前の欄です」と読み上げてくれます。
<label for="name">お名前</label>
<input type="text" id="name" name="name">リンクテキストを具体的にする
「こちら」「ここをクリック」というリンクは、前後の文脈を読まないと何のリンクか分かりません。スクリーンリーダーはリンクだけを一覧で読み上げる機能があるので、リンクテキスト単体で意味が通るように書きます。
- 良くない例：料金プランは
<a href="/price">こちら</a> - 良い例：
<a href="/price">料金プランの詳細を見る</a>
アコーディオンやモーダルには aria 属性を設定する
JavaScriptで開閉するUIパーツは、aria-expanded（開いているか）や aria-hidden（非表示か）を使って、今の状態をスクリーンリーダーに伝えます。見た目の動きだけでなく、コードでも「開いた・閉じた」を明示するのがポイントです。
まとめ
HTMLのタグ選びは、ブラウザの表示には影響しないことがほとんどです。div でも section でも、CSSを当てれば同じ見た目になります。
でも、その「目に見えない部分」こそが、検索順位やアクセシビリティに直結しています。サイトを訪れるすべての人に正しく情報を届けるために、タグの意味を考えながらコーディングすることが大切です。
まずは、今コーディングしているページの div を1つ選んで、「これは本当に div で良いのか？」と考えてみてください。nav かもしれないし、section かもしれない。その1つのタグを変えるところから、コードの品質は変わり始めます。