AIはdivが苦手？セマンティックHTMLがAI引用の土台になる理由

突然ですが、質問です。

サイトのHTMLを開いたとき、こんな構造になっていませんか？

<div class="wrapper">
  <div class="header">...</div>
  <div class="content">...</div>
  <div class="sidebar">...</div>
  <div class="footer">...</div>
</div>

見た目はきれいに整っている。でもAIには、ここが何なのかわかりません。

ヘッダーなのか、本文なのか、広告なのか——divというタグには「意味」がないので、AIクローラーが読んでも区別がつかないんです。

AI観測ラボのサーバーログを7,000件以上分析してきた中で、ひとつ気になることがありました。GPTBotやClaudeBotがページを取得するとき、divだらけのページほど再訪問頻度が低い傾向があります。引用される前に、読まれていないかもしれない。

この記事では、セマンティックHTMLという考え方と、AIクローラーが実際にどう読んでいるかを、ログの観点から整理していきます。

この記事でわかること｜📖：約6分

• divとセマンティックHTMLの違い、AIにとっての意味の差
• AIクローラーがページを読むときに手がかりにしている6つのタグ
• timeタグ・figcaptionなど、知られていないけど効く3つの実装
• WordPressユーザーが気づかず崩してしまいがちなポイント

1. AIクローラーはどうやってページを読んでいるのか

AIクローラーがサイトを訪問するとき、最初にやることがあります。

「どこが本文か」を探すことです。

ナビゲーション、広告、フッター、サイドバー——ページにはいろんな情報が混在しています。AIはその中から「引用すべき本文」を切り出さないといけません。

このとき手がかりにするのが、HTMLのタグです。

<main>があれば「ここが本文」とわかります。<nav>があれば「ここはナビゲーションだから引用しなくていい」とわかります。<article>があれば「ここがひとつの記事のまとまり」とわかります。

divだらけのサイトだと、どこが本文でどこが広告なのか、タグだけでは判断できません。AIは「意味のない箱の集まり」として処理するしかなくなります。

AIに正しく読まれるための第一歩は、タグに意味を持たせることです。

2. AIクローラーが構造を読めないと何が起きるか

divだらけのページをAIクローラーが訪問すると、具体的に何が起きるのか。サーバーログを見ていると、いくつかの傾向が見えてきます。

本文と広告の区別がつかない

AIクローラーはページ全体を取得したあと、「引用すべき部分」を切り出します。このとき<main>や<article>がなければ、ナビゲーションのテキストも、フッターの著作権表記も、本文と同じ扱いで処理されます。

結果として、引用される文章に関係のないテキストが混入したり、本文の抽出精度が下がったりする可能性があります。

再訪問頻度が下がる傾向がある

AI観測ラボのサーバーログでGPTBotとClaudeBotの挙動を分析すると、構造が整理されているページほどクローラーが定期的に戻ってくる傾向があります。逆にdivだらけで構造が読みにくいページは、初回訪問のあとに再訪問が少ないケースが目立ちます。

クローラーが「このページから得られる情報の質が低い」と判断している可能性があります。

チャンクの境界がずれる

AIはページを読むとき、文章を「チャンク（かたまり）」に分割して処理します。見出しとsectionタグが正しく使われていれば、チャンクの境界はきれいに分かれます。

divだらけだと、どこで話題が変わるのかが曖昧になり、関係ない内容がひとつのかたまりとして処理されることがあります。

構造が読めないページは、引用される前の段階でつまずいています。コンテンツの質より先に、読まれる土台が必要です。

3. まず知っておきたい6つのタグ

難しく考えなくて大丈夫です。よく使うものだけ覚えれば十分です。

<header> ——ページの顔

サイト名やロゴ、グローバルナビゲーションが入る部分です。「ここがヘッダーです」とAIに伝えるタグです。

<main> ——本文はここです

ページの中で一番重要な部分です。AIクローラーが「引用すべき内容」を探すとき、最初に注目する場所でもあります。1ページに1つだけ使うのがルールです。

<article> ——ひとつのまとまった話

ブログ記事や投稿など、それだけで意味が完結するコンテンツに使います。AIはこのタグを「引用単位のまとまり」として認識する可能性があります。

<section> ——話題のかたまり

記事の中でテーマが変わるところに使います。見出し（h2やh3）とセットで使うのが基本です。sectionで区切ることで、AIがチャンクの境界を正確に読めるようになります。

<nav> ——ナビゲーションです

メニューやリンク集に使います。AIはnavの中身を「引用しなくていい部分」と判断できるようになります。本文と混在させないことが重要です。

<footer> ——ページの末尾

コピーライトや連絡先など、ページの下部に入る情報です。footerで囲むことで、AIが「ここは本文ではない」と判断しやすくなります。

6つのタグを正しく使うだけで、AIがサイトを読む精度はかなり変わります。divで代用していた部分を、意味のあるタグに置き換えていくところから始めてみてください。

4. 知られていないけど効く3つの実装

header・main・articleは知っている人も多いです。でも次の3つは、意識している人がぐっと減ります。地味に見えて、AIへの伝わり方が変わります。

<time> ——「いつの情報か」をAIに伝える

たとえばこんな書き方をしていませんか？

<p>2026年4月9日公開</p>

人間が読めば日付とわかります。でもAIには「ただの文字列」です。

こう書くと変わります。

<time datetime="2026-04-09">2026年4月9日公開</time>

datetime属性に機械が読める形式で日付を入れることで、AIが「これは2026年4月9日の情報だ」と正確に認識できます。PerplexityやGeminiのようにリアルタイム検索を重視するAIにとって、情報の鮮度は引用判断に関わる要素です。日付が正確に伝わるかどうかは、思った以上に重要です。

<figure> と <figcaption> ——画像の「文脈」を伝える

画像のAI対策といえばalt属性、というのはよく知られています。でももう一歩踏み込むと、<figure>と<figcaption>の組み合わせが効いてきます。

<figure>
  <img src="graph.webp" alt="AIクローラーのアクセス頻度グラフ">
  <figcaption>
    2026年4月の観測データ。GPTBotは週3回以上クロールしたページへの再訪問率が1.6倍。
  </figcaption>
</figure>

altは「何が写っているか」を伝えます。figcaptionは「この画像が何を意味するのか」を伝えます。AIはfigcaptionを本文の一部として読む可能性があり、データや観測結果を画像で示すときは特に有効です。

見出しの階層 ——h1→h2→h3の順番を守る

タグではなく「使い方」の話ですが、見落とされがちです。

AIはページを読むとき、見出しの階層を手がかりにコンテンツをチャンクに分割します。h2が話題の大きな区切り、h3がその中の小見出しという構造を前提に読んでいます。

でもWordPressでデザイン優先で組んでいると、こういうことが起きます。

<h1>記事タイトル</h1>
<h3>最初のセクション</h3>  <!-- h2が抜けている -->
<h3>次のセクション</h3>

見た目のフォントサイズを優先してh2を飛ばすと、AIがチャンクの境界を正確に読めなくなる可能性があります。h1は1つ、h2→h3の順番を守る。これだけで構造の読みやすさがかなり変わります。

5. セマンティックHTMLとJSON-LDの関係

セマンティックHTMLを整えたら、次に出てくる話がJSON-LDです。セットで語られることが多いですが、役割がまったく違います。

ひと言で整理するとこうなります。

• セマンティックHTML——「タグの意味」でAIに構造を伝える
• JSON-LD——「構造化データ」でAIに文脈を伝える

セマンティックHTMLは「ここが本文、ここがナビゲーション」という構造を伝えます。JSON-LDは「この記事の著者は誰で、いつ公開されて、何についての記事か」という文脈を伝えます。

どちらか一方では不十分です。構造が読めても文脈がなければ、AIは「何についての情報か」を正確に判断できない可能性があります。文脈があっても構造が崩れていれば、本文を正しく切り出せない可能性があります。

セマンティックHTMLが土台、JSON-LDが上乗せ——この順番で整えていくのが基本です。

JSON-LDの具体的な書き方や実装手順については、こちらの記事で詳しく解説しています。

→ JSON-LDとは？AIに読まれる構造化データの種類と実装方法【コピペOK】

6. WordPressユーザーが気づかず崩してしまいがちなポイント

WordPressでサイトを作っている方に、少し補足します。

Snow MonkeyやSWELLなど、主要なテーマは最初から<main>や<article>を正しく出力してくれています。何もしなくても、ある程度セマンティックな構造になっています。

でも落とし穴があります。

カスタマイズを重ねていくうちに、気づかないところで構造が崩れることがあります。よくあるパターンが3つあります。

ページビルダーでdivだらけになる

ElementorやWP Bakeryなどのページビルダーは、デザインの自由度が高い反面、出力されるHTMLがdivだらけになりがちです。見た目はきれいでも、AIが読むと「意味のない箱の集まり」になっている可能性があります。

ページビルダーを使う場合は、ソースを確認してmainやarticleが正しく出力されているかをチェックしてみてください。

デザイン優先でh2を飛ばす

「h2のフォントサイズが大きすぎる」という理由でh3から使い始めると、見出しの階層が崩れます。AIはh2→h3という順番を前提にチャンクを分割するので、h2が抜けると境界の読み取りが不正確になります。

フォントサイズはCSSで調整するのが正解です。タグの種類を変えて対処するのは避けてください。

日付カスタマイズでtimeタグが消える

投稿日の表示をカスタマイズしたとき、timeタグが消えてただのテキストになっているケースがあります。テーマのカスタマイズやプラグインの設定によって起きることが多いです。

ソースを確認して<time datetime="">が残っているかを確認してみてください。

「テーマがちゃんとしてるから大丈夫」と思っていても、カスタマイズの積み重ねで崩れていることがあります。一度ソースを確認してみることをおすすめします。

7. 確認ツール・確認方法

「自分のサイトは大丈夫か」を確認する方法は、難しいツールを使わなくても大丈夫です。ブラウザだけでできます。

ブラウザのソース表示で確認する

一番手軽な方法です。確認したいページを開いて、右クリック→「ページのソースを表示」を選んでください。

表示されたHTMLの中で、以下をキーワード検索してみてください（Ctrl+FまたはCmd+F）。

• <main——1ページに1つあるか
• <article——記事のまとまりが囲まれているか
• <time datetime——日付にdatetime属性があるか
• <h2——h1の次にh2が来ているか（h3から始まっていないか）

Chrome デベロッパーツールで確認する

より詳しく確認したい場合は、デベロッパーツールを使います。ページ上で右クリック→「検証」を選ぶと開きます。

「Elements」タブでHTMLの構造をツリー形式で確認できます。mainやarticleがどこに入っているか、divで代用されていないかを視覚的に確認できます。

Search Consoleのインスペクションで確認する

Google Search Consoleの「URL検査」ツールを使うと、Googlebotが実際に読み取ったHTMLを確認できます。「テスト済みのページを表示」からレンダリング後のHTMLを見ることができるので、JavaScriptによる動的生成の影響も含めて確認できます。

AIクローラーはGooglebotと完全に同じではありませんが、レンダリングの問題を確認する手がかりとして有効です。

ai-kansoku.comの診断ツールで確認する

セマンティックHTMLを含むAI可視性の8項目を自動で診断できます。ソースを手動で確認する手間なく、サイト全体の状態をまとめて把握できます。

→ AI観測ラボの無料診断ツールで確認する

8. 今日から確認できること

難しい話をたくさんしましたが、やることはシンプルです。

まず自分のサイトのHTMLを見てみてください。ブラウザで右クリック→「ページのソースを表示」で確認できます。

チェックしてほしいのはこの5つです。

• <main>タグが1ページに1つあるか
• <article>で記事のまとまりが囲まれているか
• 見出しがh1→h2→h3の順番になっているか（飛び級していないか）
• 日付に<time datetime="">が使われているか
• 画像に<figcaption>で文脈の説明があるか

全部できていなくても大丈夫です。一つずつ直していくだけで、AIが読める構造に近づいていきます。

コンテンツの質を上げる前に、AIに読まれる土台が整っているかを確認してみてください。どれだけ良い記事を書いても、構造が崩れていればAIは正しく読めません。土台が先です。

---

サイト全体のAI対応状況をまとめて確認したい方は、AI観測ラボの無料診断ツールでチェックできます。セマンティックHTMLを含む8項目を自動で診断します。