セマンティック HTML：使うべきタグと、アクセシビリティ、Google、AI にとって重要な理由

ブラウザは <div> と <nav> を同じように表示します。違いは意味にあります。セマンティック HTML は、ページを読むすべてのプログラムに、各ブロックがどんな役割を持つかを伝えます。MDN はこれを、要素を既定の見た目ではなく意味に沿って使うことと定義しています。検索エンジン、支援技術、AI モデルにデータを供給するクローラーのすべてが、この意味の恩恵を受けます。

主なセマンティック HTML タグは

HTML の標準には数十の要素が定義されています。ほぼすべてのコンテンツページの骨格となるのは次の要素です。

テキストレベルのタグにも意味があります。<strong> は重要性、<em> は強調、<blockquote> と <cite> は引用、<ul> と <ol> はリスト、<a> はリンク、<button> は操作を表します。

セマンティック HTML がアクセシビリティに重要な理由

スクリーンリーダーはタグをもとにページの地図を作ります。<header>、<nav>、<main>、<aside>、<footer> のランドマークがあれば、利用者はメニューや本文へ直接移動でき、見出しの一覧は目次として機能します。W3C のページ構造に関するアクセシビリティチュートリアルが、これらの領域と論理的な見出し順を推奨しているのはそのためです。

クリックできる <div> は、ネイティブの <button> が最初から備えている機能を手作業で作り直さない限り、キーボードからは見えず、スクリーンリーダーでは読み上げられません。ネイティブ要素には役割、キーボードフォーカス、期待どおりの動作が備わっています。多くの国では公共サイトや商用サイトのアクセシビリティが法的な義務でもあり、整ったマークアップはコンプライアンスの問題でもあります。

セマンティック HTML は SEO に役立つか

Google はセマンティックタグを直接のランキング要因として示したことはなく、<div> だけで作られたページでも上位表示は可能です。効果は間接的ですが、確かにあります。

• メインコンテンツの判別：<main> と <article> は、重要な本文を、全ページで繰り返されるメニュー、サイドバー、フッターから切り分ける助けになります。
• テーマの構造：順序の整った見出し階層は、ページが何を扱い、各部分がどうつながるかを示し、ロングテールのクエリでの関連性を支えます。
• 要素の正確な理解：本物の表、リスト、日付は、装飾したブロックで見た目だけ再現したものより読み取りやすくなります。
• 構造化データとの一貫性：セマンティックなマークアップと JSON-LD は、同じページを 2 つの角度から説明します。用語集の構造化コンテンツで、両者の組み合わせ方を解説しています。

セマンティック HTML は、整った URL や高速なページと同じくテクニカル SEO の一部です。コンテンツを正しく読んでもらうための土台です。

AI アシスタントはページ構造をどう使うか

ChatGPT、Gemini、Perplexity、Google の AI Overviews は、ページ全体ではなく一節を選んで引用します。ページを取得するクローラーは通常、ナビゲーションや繰り返し要素を取り除き、テキストをブロックに分割します。明確な <h2> で始まり、最初の段落で問いに答え、1 つの <section> に収まっているセクションは、整ったブロックになります。同じ内容でも、入れ子になった <div> に散らばり、太字で見出しを装っていると、メニュー項目が混ざった断片になります。用語集のコンテンツのチャンク化で、この分割に耐えるセクションの書き方を解説しています。

よく構造化された記事ページとは

ブログ記事の骨格を、タグごとに説明します。

1. <header> にはロゴと、メインメニューを含む <nav> が入ります。このブロックは全ページで繰り返されるため、クローラーは無視することを学びます。

2. その直後に <main> が始まります。中には <article> が 1 つだけあり、インデックスされ引用されたいコンテンツがここに入ります。

3. <article> の中では、<header> が <h1>（ページの主題）、著者名、そして機械が読める形式で公開日を示す <time datetime="2026-10-18"> 要素をまとめます。

4. 記事の各パートは <section> で、答える問いの形にした <h2> から始まり、<p> の段落、<ul> のリスト、または <th> の見出しを持つ <table> が続きます。

5. グラフは <figure> に入れ、説明的な代替テキストを持つ <img> と、グラフの内容を述べる <figcaption> を添えます。

6. 関連リンクは記事の本流から外し、<aside> に入れます。

7. <footer> が法的情報と問い合わせへのリンクでページを締めくくります。

この骨格なら、スクリーンリーダーの利用者はキー 1 つで本文に到達でき、Google は明確な構成を持つメイン記事を 1 つ認識し、AI のクローラーはどの <section> も独立した回答として取り出せます。

セマンティック HTML でよくある間違い

• どこもかしこも div：ページビルダーは、ランドマークのない <div> の層を出力しがちです。少なくとも、本文を囲む <main> があるか確認しましょう。
• 見出しの飛ばしや誤用：<h2> から <h4> へ飛ぶ、文字を大きくするためだけに見出しを使う、太字の段落を見出し代わりにする。レベルは構造で決め、見た目は CSS で整えます。
• 競合する複数の <h1>：HTML では許されていますが、ページの主題を表す <h1> を 1 つにするのが、利用者と検索エンジンにとって最も明確なシグナルです。
• クリックできる <div> や <span>：ナビゲーションには <a>、操作には <button> を使います。
• レイアウト用の表と偽の表：表はデータのためのものです。装飾したブロックで示したデータは、行と列の関係を失います。
• 画像内の文字：画像の中の見出しや価格は、クローラーにもスクリーンリーダーにも読めません。
• テキストだけの日付：datetime 属性付きの <time> を加え、日付を明確にします。

ページのセマンティック構造をチェックする方法

3 つの簡単なチェックで、問題の大半をカバーできます。まず、ページの見出しアウトラインを表示し、それだけを読んでみます。内容の流れが伝わるはずです。次に、ソースコードで <main>、<nav>、<article> を探します。最後に、キーボードだけでページを操作し、すべてのリンクとボタンに到達できるか確認します。Sorank のオンページ SEO 監査は任意の URL の見出しやマークアップの問題を一覧にし、Sorank の無料 Chrome 拡張機能は閲覧中のページの見出し構造を表示します。

タグはそれぞれの意味どおりに使いましょう。<main> を 1 つ、<h1> を 1 つ、順序の整ったセクション、本物の表があれば、人にも Google にも AI にも同じ明確なページの地図が伝わります。構造が整ったら、あとはコンテンツを定期的に書いて公開するだけです。Sorank は Google と AI 向けに最適化した記事を autopilotで執筆・公開します。