税理士をしている友人から、サイトの改善点について相談を受けたことがあります。画面共有してもらいながら中身を見ていくと、ほぼ全部がdivタグで組まれていました。
専門用語のまま伝えても響かないと思いました。そこで出したのが、「他に適切な項目があるのに、全部雑費で仕訳しているようなものです」というたとえです。
友人は経理の仕事をしているので、この言い方だと一発で伝わったようです。
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>ここで並んでいるheaderやsectionの役割が全部分からなくても、深く理解せずに先へ進んで問題ありません。ひとつずつこのあと説明します。
見た目はCSSで同じように仕上げられますが、HTMLの「中身」がまったく違います。書き換えたポイントはこちらです。
headerとnavで囲むと、「ここがサイトのナビゲーションだ」とクローラーに伝わるh2→h3の順に使うと、ページの見出し階層が明確になる- 並列する項目を
ulとliでリスト化して、「複数の項目がまとまっている」ことを伝える imgにalt・width・heightを設定して、画像の内容とサイズをあらかじめ伝えるsectionで意味のあるまとまりを囲んで、コンテンツの区切りを明示する
なぜタグを使い分けると良いのか
以前、僕もXで書いたことがあります。区切りにはsection、箇条書きにはul、定義リストにはdl、表組みにはtheadやtbodyも使う。要素ごとに適したタグを選ぶだけで、SEO的な強さは変わってきます。
クローラーがページを正しく理解できる
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で見た目を変えれば、カード型のレイアウトもリストタグで実装できます。箇条書きに見えなくても問題ありません。大事なのは「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で良いのか」と考えてみてください。ぜひ試してみてください!
タグで伝わる範囲の先は、構造化マークアップとは？知るべき基本を解説で扱っています。