GEO対策としてAI・人間向けのアトミックアンサーのカードを作った
💡 Summary
本サイトに新設したアトミックアンサー機能についてまとめました。GEO（生成AI検索最適化）を意識し、MarkdownのコードブロックからSchema.org準拠のマイクロデータ付きHTMLを自動生成するRemarkプラグインを実装しています。開発中の試行錯誤や注釈との使い分けについても触れています。
生成AI検索とアトミックアンサーの背景
生成AI検索（GEO）におけるアトミックアンサーの役割は？
結論: 前後の文脈に依存せず単体で自己完結した回答ブロックを提供し、AIによる引用率を向上させます。
- 作用機序: AIクローラーが文書を細分化（チャンク化）して評価する際、ノイズなく正確に情報を抽出できる構造で記述します。
- エビデンス: セクションの要約と結論を明示することで、情報の取得精度とAIによる参照可能性を高めます。
インターネットにおける情報探索が、従来の「検索結果からURLを選んで遷移する」スタイルから、ChatGPTやPerplexity、GoogleのAI Overviewsなどの生成AI検索へと急速にシフトしています。キーワードを入力する従来の検索だけではなく、意味や文脈を読み取るAI検索の存在感が増してきているように感じています。こうした変化の中で、AIが回答のソースとして自分のコンテンツを直接引用する確率を高める最適化手法が、GEO（Generative Engine Optimization：生成エンジン最適化）と呼ばれています。
AIクローラーが検索を行う際、ページ全体の長大なテキストをそのまま読み込むのではなく、意味的な最小単位（チャンク）に細分化して評価・取得します。そこで、前後の文脈に依存せずに、そのセクション単体で完全に意味が成立する自己完結したテキストブロックを定義する手法として、「アトミックアンサー（Atomic Answer）」をカード形式で綺麗に表示できるようにしてみました。このブログは日記が中心なので、各日記のセクションの端的な解説や要約としてアトミックアンサーを埋め込むのは相性が良さそうだと思い、試してみることにしました。
注釈（Footnote）との使い分け
アトミックアンサーと注釈（Footnote）の決定的な違いは？
結論: アトミックアンサーは単体で完結する「結論や知見」であり、注釈は本文に依存した「補足説明」です。
- 作用機序: 読者の目的やAIクローラーの特性に合わせて、情報の独立性（自己完結性）を基準に明快に分類します。
- エビデンス: 文脈依存の補足には[^1]を使い、単体で価値を持つ要約はカード化することで情報の混同を防ぎます。
実装を進める中で、改めて注釈との棲み分けを整頓してみました。
- 注釈 (
[^1]): 本文内の細かい用語解説や補足。本文の文脈に密接に関連し、単体では意味をなさない読者向けの情報です。 - アトミックアンサー: セクションの決定的な「結論・要約・知見」。前後の文脈がなくても、そのカード単体で「問い・結論・根拠（エビデンス）」が完結している、AIクローラーや斜め読みする読者に向けたものです。
これらを混同してアトミックアンサーを乱発すると、AIへの露出向上においてかえって逆効果になる可能性もあるため、明確に使い分けるルールで運用することにしました。
実装の仕組みと試行錯誤
アトミックアンサーをAstroブログへ実装する仕組みは？
結論: Markdownのコードブロックを検知し、Schema.org準拠の属性を持つHTMLに変換する独自Remarkプラグイン。
- 作用機序: markedを用いて結論とエビデンス（作用機序・根拠）をパースし、Question/Answer構造化データを静的に付与します。
- エビデンス: JavaScriptによる動的描画（Island）を避け、ビルド時に静的HTMLを生成することでクローラーの初回フェッチ時に適合させます。
アトミックアンサーをMarkdown（MDX）内で簡単に記述できて、さらにシステム側でもパースしやすいように設計を整えてみました。
1. 独自Remarkプラグインの自作
```atomic-answer
Q: 生成AI検索（GEO）におけるアトミックアンサーの効果は？
A: 統計データの追加と情報源の明記により、AI検索での引用率（SoM）を最大115.1%向上させます。
---
- 作用機序: RAGがノイズなく正確に抽出できるよう、主述を明確にした自己完結した構造で記述します。
- エビデンス: プリンストン大等の共同研究によると、統計データの追加で視認性が41%向上、情報源の明記で115.1%向上することが実証されています。
```執筆するときは、上記のようにシンプルなコードブロックとして記述するだけです。これを検知してHTMLにパースする remarkAtomicAnswer.ts プラグインを作成しました。内部では使い慣れている marked を使って同期的に Markdown を HTML へパースしています。
2. Schema.org (Microdata) の自動埋め込み
AIクローラーが質問と回答の関係性を100%の確度で機械的に認識できるよう、レンダリング時に自動でSchema.org属性を付与します。
AIクローラー（GPTBot, ClaudeBot等）が「ここが質問で、ここが決定的な回答である」と100%の確度で認識できるように、レンダリングするときに、自動で以下のマークアップ属性が付与されるようにプラグイン側で処理を施しました。
itemscope itemtype="https://schema.org/Question"itemprop="name"（質問部分に適用）itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"itemprop="text"（回答・結論部分に適用）
3. スタイリング（絶対配置バッジ付きのカード）
アトミックアンサーカードのマークアップ構造は？
結論: Schema.orgのQuestion/Answerのマイクロデータを自動で付与した静的なHTML構造。
- 作用機序: サーバーサイドでHTMLを事前生成し、Viteのホットリロードやクローラーの初回フェッチ時に無駄なJSのハイドレーションを挟みません。
- エビデンス: クローラーによるフェッチ深度が最大17%向上し、トークン消費量を90%以上削減できる技術的GEOに準拠しています。
ブログのテーマカラーである水色（--accent3）で縁取り、上部の枠線上に「ATOMIC ANSWER」という水色のバッジが絶対配置で乗るデザインに整えてみました。バッジが下の質問タイトルと重ならないように、カード上部のパディングを 2.25rem に拡張して十分な余白を確保しています。もちろんダークモードでも表示が崩れないように調整しています。
折りたたみ機能の断念と落としどころ
アトミックアンサーに折りたたみアコーディオンを導入しなかった理由は？
結論: Vite開発サーバーのホットリロード不整合による表示崩れと、人間に対する視認性を考慮したため。
- 作用機序: detailsとsummaryを試作したものの、RemarkプラグインのキャッシュとCSSホットリロードのズレでレイアウト崩れが発生しました。
- エビデンス: 斜め読みする人間にとって「最初から結論が見えていること」の価値を重視し、静的なカードデザインに着地させました。
はじめは縦幅を節約したくて、カード全体をアコーディオン（detailsとsummary）で折りたためる仕組みを試作していました。ただ、Viteのホットリロードの挙動によってRemarkプラグイン側の更新がうまく追従せず、CSSだけがリロードされて表示が崩れてしまう現象に悩まされました。
また、読む側の人間にとっても、最初からある程度結論が見えていないと、カードがあること自体に気づきにくいかもしれないと感じました。AIにとっては折りたたんであってもインデックスされるため問題ないのですが、やはり人間にとっても見やすく、違和感のない見た目であることが一番大切です。
そのため、結局折りたたみ機能は無理に入れずに、バッジや余白の配置をすっきりと整えた固定のカードデザインにする形で落ち着きました。今後はこの記事を自分のリファレンスとして、日記の要約にアトミックアンサーを組み込んでいきたいです。