人にも、AIにも、ちゃんと伝わるサイトを。SSGと構造化HTMLで実践するSEO/AEO

この記事で分かること

主要 AI クローラが「JavaScript を実行しない」という事実と、その対策
AI 回答に「引用されやすい本文の書き方」
セマンティック HTML・JSON-LD・鮮度メタデータの役割
確定数値を約束しない理由（誠実な営業ガードレール）

「AI に聞いたら出てこなかった」という問題

ウェブサイトを見つけてもらう経路が変わりつつあります。Google で検索してから最初の数件を開く、という流れに加えて、ChatGPT や Perplexity に「〇〇を教えて」と質問して、その回答を参照する人が増えています。

この変化で起きるのが、「検索順位は高いのに AI の回答に出てこない」という現象です。あるいはその逆——順位は低くても AI がよく引用するサイト、というものも観測されています。

AI が情報を引用するかどうかと、検索順位の間には相関はあるが完全には一致しないことが分かってきました（GEO 研究、KDD 2024 掲載）。AI に対しても通じる作り方を考えるのが、AEO（AI エンジン最適化、あるいは GEO: Generative Engine Optimization）と呼ばれるアプローチです。

最優先で知っておくべきこと：AI クローラは JavaScript を実行しない

AEO に関して、いちばん実装への影響が大きい事実がこれです。

主要な AI クローラ（GPTBot・ClaudeBot・PerplexityBot など）の多くは、JavaScript を実行しません。

Vercel が公開した大規模な AI クローラの解析では、こうした AI クローラはサーバーサイドでレンダリング済みの HTML を読んでいることが確認されています。React や Vue でクライアント側に描画されるコンテンツは、これらのクローラには「空」に見える可能性があります。（例外として Google の Googlebot および Gemini はヘッドレス Chrome を使い JavaScript を実行できます。）

実装の地雷 3 つ

JavaScript を使ったフロントエンド構成で、AI クローラに中身が届かなくなる典型パターンです。

本文を client:only 等の JS アイランドで描画する — SSR を切るため、JS 非実行クローラには空
JSON-LD をクライアント側の JS で動的に挿入する — DOM 操作後のためクローラに届かない
REST/GraphQL の遅延フェッチで主要コンテンツを描く — 非同期取得はクローラが待たない

Astro + ヘッドレスWP が構造的に有利な理由

Astro はデフォルトで静的 HTML を出力します。コンテンツはビルド時に取得・展開済みなので、JavaScript の実行を必要とせず HTML に含まれます。

このサイト（teraone.site）では WordPress からコンテンツを GraphQL で取得し、Astro がビルド時に静的 HTML として書き出す構成をとっています。クローラが到達した時点ですでに中身がある状態です。

「抽出されやすい根拠」を本文に置く

AI が回答を生成するとき、ソースとなるページから情報を「抜き出して」使います。抜き出しやすいコンテンツを本文に置くほど、回答に使われる可能性が高まります。

コンテンツ要素ごとに AI 引用への影響を調べた研究（単一研究の傾向値として参照）では、以下のような傾向が確認されました。

コンテンツ要素	AI 引用への影響（傾向）
コードブロック	大きい
数値・統計	大きい
定義（〇〇とは）	大きい
比較（A vs B）	大きい
手順・How-to	中程度

重要な注意: これらは特定の実験条件での測定値です。すべてのサイト・クエリに同じ効果が出るとは限りません。方向性として参考にしてください。

具体的な書き方

AEO を意識した本文の書き方は、実は読者にとっても親切な書き方と重なります。

定義を先に書く（「〇〇とは〜のことです」）
手順は番号付きリストで書く
数値は根拠つきで書く（「〜との調査では」「ベンチマーク上で」等の出典を添える）
比較は表で整理する
結論を最初に書いて、後から説明する

「AI のために書く」というより「調べた人が一読で判断できるように書く」と考えると、自然に実践できます。

セマンティック HTML・JSON-LD・鮮度メタ

土台が整ったら、機械可読な構造を加えます。

セマンティック HTML

div の羅列ではなく、article・section・nav・h1〜h6・table・code 等の適切なタグを使います。AI が HTML をプレーンテキストに変換するとき、タグ構造が意味の手がかりになります（HTML 構造を LLM 向けに扱う研究で確認されています）。

<!-- 悪い例 -->
<div class="post">
  <div class="title">ヘッドレスWP の作り方</div>
  <div class="body">...</div>
</div>

<!-- 良い例 -->
<article>
  <h1>ヘッドレスWP の作り方</h1>
  <p>...</p>
</article>

JSON-LD 構造化データ

Google の構造化データと同様に、JSON-LD は AI が「このページが何について書いてあるか」を理解するための手がかりになります。Person・WebSite・Article・BreadcrumbList 等のスキーマを使います。

重要: JSON-LD はサーバーサイドで <head> に静的出力してください。JS で後から <head> に挿入する実装は、JS 非実行クローラに届きません。

<!-- Layout.astro（概念コード） -->
<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "けい",
  "url": "https://teraone.site",
  "jobTitle": "フロントエンドエンジニア"
})} />

鮮度メタデータ

記事の更新日を <meta> タグや JSON-LD の dateModified に含めておくと、AI は「いつ書かれた情報か」を判断できます。

GEO の研究では、メタデータ・鮮度の情報と AI 引用率の間に相関が観測されています（相関値として参照）。因果関係の確定には追加の検証が必要ですが、コストが低い施策です。

確定数値を約束しない

ここで正直に書いておきます。

「AEO 施策を入れると AI 引用率が〇% 上がります」と明示することは、現時点ではできません。理由が 2 つあります。

理由 1: 生成 AI は非決定的

同じ質問でも、毎回同じページが引用されるわけではありません。引用シェアの測定誤差が数ポイント程度あることが複数の研究で確認されており、それより小さい改善は「効いた」と判断しにくいのが現状です。

理由 2: 効果はドメイン依存

GEO 論文で示された「ベンチマーク上で最大 40% の可視性向上」という数値は、特定の実験設定での結果です。どのサイトでも同じ効果が出る保証はありません（KDD 2024 掲載・複数の一次ソースで確認）。

だから「AI 引用率を上げます」ではなく、「AI が読める構造・抽出されやすい根拠を実装します」という施策ベースで語るのが誠実です。効果は継続して測定・改善していくもの、という前提で向き合っています。

まだ分からないこと

正直に書いておく第二弾です。

llms.txt の効果: AI クローラ向けにサイトのルールを書いておく llms.txt ファイルの提案がありますが、主要 AI が実際に参照しているかどうかの確かな検証がまだ不十分です。このサイトでは現時点でコア施策に入れていません
FAQ コンテンツの効果: 「FAQ 形式のページは AI に引用されやすい」という話があります。今回の調査では、プラス・マイナス両方の見解があり確定できていません
AI クローラの JS 実行仕様は変わりうる: 現時点（2026 年 6 月）では主要 AI クローラが JS を実行しないことが確認されていますが、今後変わる可能性はあります。定期的に再確認が必要です

このサイトで実装したこと

施策	実装内容
素の HTML 出力	Astro SSG。WP コンテンツはビルド時取得
セマンティック HTML	`article`・`section`・適切な見出し階層
JSON-LD	`Person`・`WebSite`・記事ページに `Article`
React 島の SSR	実績・ブログカードは `client:only` 禁止。`client:visible` で SSR + 部分ハイドレーション
Lighthouse スコア	パフォーマンス 98〜100・SEO 100（別記事に詳細）

まとめ

AI クローラの多くは JavaScript を実行しない → SSG で静的 HTML を出すのが確実な土台
本文にコード・数値・定義・比較・手順を置くほど引用されやすくなる傾向がある
セマンティック HTML + JSON-LD（サーバー側で静的出力）+ 鮮度メタが機械可読性を高める
確定数値は約束しない。「AI が読める作り方をする」という施策ベースで語る
効果は継続測定。一度入れて終わりではなく、アクセス解析と組み合わせて回し続けるもの

「人にも、AI にも、ちゃんと伝わるサイト」の構築について、ご相談はお問い合わせから。→ お問い合わせ