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クローラーが読んでも区別がつかないんです。

これが「divだらけのサイトがAIに引用されにくい」理由のひとつです。

この記事では、セマンティックHTMLという考え方と、それがAI引用にどう関係するのかを、実例を交えながら説明していきます。

1.セマンティックHTMLって何？

「セマンティック」は英語で「意味のある」という意味です。

つまりセマンティックHTMLとは、「意味のあるタグを使ってHTMLを書く」ということです。

たとえばこんなイメージです。

divタグだけで書いたHTML——

<div class="header">ヘッダー</div>
<div class="main">本文</div>
<div class="footer">フッター</div>

セマンティックHTMLで書いた場合——

<header>ヘッダー</header>
<main>本文</main>
<footer>フッター</footer>

見た目はほぼ同じです。でも意味がまったく違う。

divは「ただの箱」です。何が入っているかわからない。でも<header>は「ここがヘッダーです」、<main>は「ここが本文です」と、タグ自体が意味を持っています。

人間が読めばどちらも理解できます。でもAIクローラーは「タグの意味」を手がかりにサイトを読んでいる——だからここに差が生まれます。

2.AIクローラーはどうやってサイトを読んでいるのか

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

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

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

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

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

でもdivだらけのサイトだと、どこが本文でどこが広告なのか、タグだけでは判断できません。

昔、自分が作ったサイトもそうでした。全部divで組んでいて、クラス名で意味を持たせていた。見た目は問題なかったけど、AIの目線で見ると「意味のない箱の集まり」だったわけです。

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

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

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

<header> ——ページの顔

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

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

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

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

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

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

記事の中でテーマが変わるところに使います。見出し（h2やh3）とセットで使うのが基本です。

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

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

<footer> ——ページの末尾

コピーライトや連絡先など、ページの下部に入る情報です。

この6つを正しく使うだけで、AIがサイトを読む精度はかなり変わります。

4.意外と知られていない、でも効くタグ3つ

ここからが本題です。

article、main、headerは知っている人も多い。でも次の3つは、意識している人がぐっと減ります。

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

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

<p>2026年2月28日公開</p>

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

こう書くと変わります。

<time datetime="2026-02-28">2026年2月28日公開</time>

datetime属性に機械が読める形式で日付を入れることで、AIが「これは2026年2月28日の情報だ」と正確に認識できます。

特にPerplexityやGeminiのようにリアルタイム検索を重視するAIにとって、情報の鮮度は引用判断に関わる要素です。日付が正確に伝わるかどうかは、思った以上に重要かもしれません。

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

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

<figure>
  <img src="graph.webp" alt="AIクローラーのアクセス頻度グラフ">
  <figcaption>
    2026年2月の観測データ。週5回以上投稿したサイトでクローラー頻度が1.8倍に増加。
  </figcaption>
</figure>

altは画像の説明、figcaptionは画像の文脈です。

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

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

タグではなく「使い方」の話ですが、これが一番見落とされています。

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

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

<!-- h2を飛ばしていきなりh3を使っている例 -->
<h1>記事タイトル</h1>
<h3>最初のセクション</h3>  <!-- h2が抜けている -->
<h3>次のセクション</h3>

見た目のフォントサイズを優先してh2を飛ばすと、AIがチャンクの境界を正確に読めなくなる可能性があります。

h1は1つ、h2→h3の順番を守る。これだけで構造の読みやすさがかなり変わります。

5.セマンティックHTMLが整っていないと、DCTAのどこで脱落するのか

ここまで読んでくれた方は、DCTAフローをご存知かもしれません。

人がAIを使うとき、実は4つの段階があります。D（Discover）、C（Compare）、T（Trust）、A（Act）——この流れの中で、セマンティックHTMLが整っていないサイトはどこで脱落するのか。

仮説として整理してみます。

Discoverフェーズ——そもそも発見されない

AIクローラーがサイトを巡回するとき、構造が読めないページは優先度が下がる可能性があります。

mainタグがない、article/sectionがdivで代用されている——こういう状態だと、クローラーが「このページは何についての情報か」を判断しにくくなります。発見される前に、土俵から外れているかもしれません。

Compareフェーズ——段落の境界が曖昧で比較されない

AIは段落単位で「この文章は質問の答えになっているか」を判断しています。

sectionやarticleで区切られていないと、どこからどこまでがひとつのトピックなのかが曖昧になります。きれいに構造化されたサイトと比べられたとき、チャンクとして認識されにくいコンテンツは引用候補から外れやすい可能性があります。

Trustフェーズ——信頼の手がかりが少ない

timeタグで日付が正確に伝わっているか、figcaptionでデータの文脈が説明されているか——こういった細部が、AIが「このサイトは信頼できる情報源か」を判断するときの手がかりになっている可能性があります。

逆に言うと、セマンティックHTMLが整っているサイトは、それだけで信頼の手がかりを多く持っているということです。

Actフェーズ——推薦される土俵にそもそも上がれない

Actフェーズで推薦されるための条件のひとつに「構造がきれいでクロールを許可している」があります。

どれだけ良いコンテンツを書いても、AIが正しく読めない構造になっていれば、推薦の候補にすら入れない。セマンティックHTMLは「推薦されるための最低条件」とも言えます。

4つのフェーズ、どこにも関わっています。だからこそ、セマンティックHTMLはAI最適化の「土台」なんです。

5.5WordPressユーザーへ——実は気づかず崩れていることがある

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

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

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

カスタマイズを重ねていくうちに、気づかないところで構造が崩れることがあります。たとえば——

• ページビルダーで組んだブロックがdivだらけになっている
• デザイン優先でh2を飛ばしてh3から使っている
• 日付の表示をカスタマイズしたときにtimeタグが消えた

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

一度ソースを確認してみることをおすすめします。

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

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

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

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

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

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

自分も昔作ったサイトはmainタグすら入っていませんでした。気づいたところから直す、それだけです。

---

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