先に結論からお伝えします。AIエンジンがWebページを読むとき、最初に評価するのは文章のうまさではありません。HTMLをツリー構造として解析し、ノイズと判断した部分を取り除き、残った内容をプレーンテキストやMarkdownへ変換します。ページが何十層ものdivで組まれ、見出しも太字で大きく表示しただけなら、この段階で本文が細切れになったり、サイドバーと誤認されたりします。その結果、どれだけ内容が優れていても参照候補に入りません。クリーンHTMLはエンジニアのこだわりではなく、AIに引用されるための前提条件です。
重要なのは、多くのAIエンジンがブラウザのようにページ全体を完全にはレンダリングしない点です。Readabilityに近い抽出処理を通じてメインコンテンツを特定し、ナビゲーションやフッターを除外します。そして、h1からh3を骨格、段落やリストをその中身として扱います。CSSで丁寧に作り込んだ視覚的な階層は見えません。認識されるのは、HTMLタグ自体が示す構造です。画面上ではまったく同じに見える2つのページでも、一方は繰り返し引用され、もう一方はコピーを何度直しても回答に採用されないことがあるのは、このためです。
divの入れ子が深すぎると、抽出処理が本文を見失う
モダンなフロントエンドフレームワークでは、いわゆる「div soup」が生まれがちです。各要素をラッパー用のdivで囲んでいくうちに、本来ひとまとまりであるはずの説明文が、意味を持たない8〜10層のdivの下へ埋もれてしまいます。抽出処理は、テキスト密度やタグの種類に関するヒューリスティックなルールを使ってメインコンテンツの位置を判断します。入れ子が深くなり、ボタンやラベルなどの短いテキスト断片が混在すると、その判定精度は下がります。別の領域を本文として選んだり、連続した段落を無関係な3つの断片に分けて処理したりする可能性があります。
対策はシンプルです。メインコンテンツをセマンティックタグで囲みます。ページ全体の主要部分には<main>、単独で読める記事には<article>、章ごとのまとまりには<section>、画像とその説明には<figure>を使います。これらのタグは、抽出処理に対して「ここが重要な部分です」と明示する役割を果たします。フレームワークが生成するラッパーをすべてなくすのは難しくても、メインコンテンツの最外層は、wrapperというclassを持つ12番目のdivではなく、少なくとも<main>か<article>にしてください。1層のセマンティックタグで済むものを、3層のdivで囲む必要はありません。
見出し階層は、AIに渡す目次になる
抽出処理はh1からh6までを記事全体の目次として捉え、コンテンツをチャンクに分割する際の基準にします。区切りが明確なら、AIは特定の質問に対応する段落を正確に引用できます。反対に階層が乱れていると、記事全体がひと塊になり、引用時に文脈が失われます。守るべき原則は、次の3つです。
- h1は1ページに1つだけ置き、通常は記事タイトルに使用します。各章はh2以下で展開します。
- 階層を飛ばさないでください。h2の次はh3とし、いきなりh4へ進まないようにします。階層を飛ばすと、抽出処理が段落同士の親子関係を誤って判断する原因になります。
- 見出しは構造であり、装飾ではありません。文字を大きくしたいだけならCSSを使います。表示を大きくする目的だけでh2を使ったり、SEOのために同じ階層の見出しを大量に並べたりしないでください。
よくある失敗は、ページ全体にh1を1つ置いただけで、残りの見出しをdivと太字で表現した「見せかけの見出し」にしてしまうことです。クローラーから見れば、その記事には章がなく、長い段落が続いているだけです。そのため、段落全体をまとめて取得するか、まとめて破棄するしかありません。見せかけの見出しを本物のh2やh3へ置き換えることは、AIに目次を渡すのと同じです。どこから読み始めればよいかを正しく伝えられます。
セマンティックタグと属性：CSSに頼らず意味を伝える
HTML構造が解決するのは「内容をきれいに抽出する」という課題です。一方、属性は「抽出後も意味を理解できるようにする」ために役立ちます。画像にaltを付ければ、プレーンテキストの環境でも内容が伝わります。日付を<time datetime>でマークすれば、意味のない文字列として処理されにくくなります。表に<table>と<th>を使えば、Markdownへ変換した後も項目同士の関係を維持できます。用語と定義を<dl>、<dt>、<dd>の組み合わせで囲めば、モデルは整理された質問と回答のような形で抽出できます。ARIA属性（aria-label、aria-labelledby）は本来アクセシビリティのためのものですが、目に見えるテキストを持たない要素へ機械可読な意味を与える役割も果たします。
data属性を正しく使う：万能な仕組みだと思わない
率直に言えば、多くのAIクローラーは独自のdata-*属性を読みません。各サイトが個別に付けた名前を解釈するようには設計されていないからです。広く利用できる「data属性」として実質的に機能するのは、標準仕様に基づくものです。たとえば、microdataのitemprop、該当箇所を要約に使用しないようエンジンへ伝えるdata-nosnippet、そして最も信頼性の高い機械可読レイヤーであるJSON-LDが挙げられます。独自のdata-geo-*を大量に作り、AIが理解してくれると期待するより、著者、公開日、価格、FAQといった引用可能な重要情報をJSON-LDへ記述するほうが有効です。レイアウトに依存せず、抽出結果へ正確な事実を渡せます。
もちろん、data-*にも用途はあります。ただし、使う場所が違います。自社のアクセス解析や社内ツールで引用可能な箇所をマークし、どのコンテンツが実際にAIへ取得されたかを追跡する用途には活用できます。data-*は自社が確認するための座標であり、AIへの指示ではありません。この2つを分けて考えれば、誰にも読まれない属性へ工数を費やさずに済みます。
実践用クリーンアップチェックリスト
- メインコンテンツを<main>または<article>で囲み、単一の明確な領域として示す。
- レイアウトのためだけに存在するdivの入れ子を減らし、可能な箇所はセマンティックタグへ置き換える。
- h1は1ページに1つとし、h2やh3の階層を飛ばさない。見せかけの見出しはすべて正しい見出しタグへ置き換える。
- 画像にはalt、日付には<time>、表には<th>、用語の定義には<dl>を使う。
- 重要な事実はJSON-LDへ記述し、独自のdata-*属性だけに頼らない。
- 原稿の完成後、WebページをMarkdownへ変換して1度確認する。その出力が、AIから見たページの姿です。
ブラウザ上で見栄えがよいだけでは、AIに引用されません。きれいに抽出でき、意味を理解できる形になって初めて引用候補になります。— Tenten GEO
クリーンHTMLは、GEO施策全体のなかでも費用対効果が高い一方、特に見落とされやすい領域です。コンテンツを書き直す必要はありません。既存の内容を機械可読な形へ整理するだけなので、低コストで着手でき、成果にもつながりやすい施策です。主要ページがAIの抽出処理からどのように見えているのか、何が欠けているのかを確認したい場合は、GEO監査で実際の抽出結果を検証します。まずは30分間のGEO診断をご予約いただき、自社ページを使ってその場でギャップを確認することもできます。
