AIエージェントがページを読むとき、見ているのは画面のデザインではなくDOMツリーです。何層もの<div>を重ねて作った美しいレイアウトも、解析ツールから見れば意味を持たないコンテナの集まりにすぎません。同じ文章でもセマンティックタグに置き換えれば、抽出精度は大きく変わります。セマンティックHTMLはアクセシビリティのための付加要素ではありません。AIエンジンにコンテンツを正確に引用してもらうための、最も低コストな手段です。
AIエージェントがセマンティックタグを重視する理由
GoogleのAI Overview、Perplexity、ChatGPTがURLをクロールするとき、その裏側ではHTMLをプレーンテキストへ変換する処理が動きます。この過程で見た目のスタイルは失われますが、構造は残ります。<h1>はページの主題を示し、<article>は本文を囲み、<nav>や<footer>は定型部分として除外されます。適切なタグを選べば、モデルは要点を直接つかめます。一方、すべてがdivで組まれていると、引用すべき段落を文字数や配置から推測するしかなく、最後は運任せになってしまいます。
差が出るのは、抽出時の確信度です。<main><article>で囲まれ、<h2>が連続した階層を持つコンテンツは、境界の明確な一つの単位としてパーサーが取り出せます。同じ文章でも、<div class="content-wrapper-2">に置き換えると、こうした手掛かりがすべて失われます。クライアント向けのGEO監査で最もよく見つかる可視性の問題も、コンテンツの質ではありません。良質な情報が意味のないdivの入れ子に埋もれ、AIエンジンが引用可能な形で切り出せないことです。
タグが表すのは「見た目」ではなく「意味」
セマンティクスの考え方はシンプルです。タグが宣言するのはコンテンツの「見た目」ではなく「役割」です。<button>は操作を実行する要素、<a>は別の場所へ移動できる要素、<ul>は並列関係にある項目の集まりを表します。こうした意味は、ブラウザ、スクリーンリーダー、AI解析ツールのすべてに伝わります。タグを選ぶときは「どう見せたいか」ではなく、「このコンテンツの本質は何か」を基準にしてください。
- <main>：ページ全体で1つだけ使用します。「このページが本当に伝えたい内容はここ」と範囲を示し、パーサーがヘッダー、サイドバー、フッターを除外できるようにします。
- <article>：単独で切り出しても意味が通じる、独立したコンテンツ単位です。記事、FAQ、商品カードなどが該当します。
- <h1>〜<h6>：ページの目次に相当します。階層は連続させ、文字サイズを変える目的でレベルを飛ばさないようにします。
- <nav>：ナビゲーションリンクを示します。この領域が本文ではなくメニューであることをエンジンに伝えます。
- 見出しを伴う<section>：共通のテーマを持つ段落をまとめる要素で、通常は見出しと組み合わせます。
- <table>、<thead>、<th>：実際の表データにはテーブル用のタグを使い、レイアウト目的のdivで代用しないでください。AIが表として抽出できるのは、こうした構造があるからです。
- <time datetime>と<address>：日付や連絡先情報を、機械が直接読み取れるフィールドにします。
簡単なセルフチェック方法があります。タグ名をそのまま読んだとき、コンテンツの本質を言い表しているでしょうか。クリックで操作を実行する要素を<div>で書いているなら、それは単なる「コンテナ」にしか聞こえず、適切ではありません。ここで使うべきなのは<button>です。見た目はCSSに任せ、タグは意味を明確にする役割に徹します。この2つを分離して初めて、機械はページを正確に読み取れます。
よくある落とし穴：div soupと崩れた見出し階層
実務で繰り返し見つかる問題は、いくつかのパターンに集約されます。ページ全体がdivとspanだけで構成され、セマンティックタグが一つもない状態は、いわゆる「div soup」です。1ページに<h1>が複数あったり、文字サイズを合わせるために<h2>の代わりに<h4>を使ったりすると、見出し階層が崩れ、モデルが作るアウトラインも誤ったものになります。<br>による改行だけで無理に並べた「リスト」や、<div onclick>で装ったボタンも同様です。画面上では違いがなくても、DOM上では意味が欠落しています。
ページをセマンティックな構造へ改修する手順
Webサイト全体を一度に作り直す必要はありません。まずは検索上の可視性を高めたい重要ページを1つ選び、以下の順番で改修してみてください。進め方の感覚をすぐにつかめるはずです。
- 最初に大枠を整える：ページ全体に<main>が1つだけ存在することを確認し、ヘッダー、ナビゲーション、フッターをそれぞれ<header>、<nav>、<footer>で囲みます。
- 見出しレベルを修正する：<h1>は1ページに1つとし、<h3>は必ず<h2>の配下で使い、階層を飛ばさないようにします。ブラウザのプラグインやコマンドでアウトラインを一覧表示し、構造を確認します。
- 本文を<article>で囲む：FAQ、手順、定義など、単独で参照されるコンテンツ単位の境界を明確にします。
- 見せかけのコンポーネントを置き換える：<div onclick>は<button>へ、ページ遷移に使う見せかけのボタンは<a href>へ変更します。
- データの構造を整える：表には<table>、リストには<ul>または<ol>、日付には<time>を使います。
- labelとaltを追加する：フォームコントロールには<label for>、画像にはaltを設定し、機械とスクリーンリーダーが同じ意味を読み取れるようにします。
機械が本当に理解できているかを検証する方法
改修後は感覚だけで判断してはいけません。最も手軽な方法は、ブラウザの「リーダーモード」を有効にすることです。SafariやFirefoxのリーダー表示で、本文だけをきれいに抽出できるでしょうか。抽出できるなら、AI解析ツールも読み取れる可能性が高いと考えられます。2つ目は、コマンドラインで初期HTMLを取得し、本文がJavaScriptによって後から生成されていないか確認する方法です。3つ目は、開発者ツールでアクセシビリティツリーを開く方法です。このツリー構造は、機械から見たページの姿に非常に近いものです。3つすべてを確認して初めて、機械可読性のあるページだと判断できます。
サイト全体のCSSを無効にしても、ページは読めるでしょうか。情報の順序が整理され、見出しが明確で、リストがリストとして残るなら、AIエージェントにも理解できます。順序のない文章の塊になってしまうなら、機械にも理解できません。
セマンティック化の次に構造化データを重ねる
セマンティックHTMLは土台であり、到達点ではありません。HTMLを正しく整えたら、その上にSchema.orgのJSON-LDを重ね、Article、FAQPage、Productなどのタイプを使って、日付、著者、価格といった事実を機械へ明確に伝えます。ただし、順番を逆にしてはいけません。div soupにschemaを貼り付けるだけでは、表面を取り繕うにすぎないからです。クローラーはマークアップされた内容と実際のDOMを照合し、不一致があれば評価を下げます。まずHTMLのセマンティクスを正し、その上でschemaが機能する状態を作りましょう。AI解析ツールから自社ページがどう見えているのか、どこに改善余地があるのかを知りたい方は、30分のGEO診断をご予約ください。実際の抽出結果を確認しながらご案内します。
