記事執筆者：認定SEOコンサルタント 三田健司
「制作会社から納品されたサイトのHTMLを見たら、divという文字だらけでした。これは大丈夫なんでしょうか」。中小企業のWeb担当者の方から、こうしたご相談をいただくことがあります。
divタグはHTMLで最もよく使われるタグの1つです。ホームページを作るうえで欠かせない存在である一方、使い方を誤ると検索エンジンにもAIにも「何が書いてあるページなのか」が伝わりにくくなります。
そしてこの1年で、divをめぐる状況は少し変わりました。AI検索やAIエージェントがWebページを読む場面が増え、Googleも公式ドキュメントでHTMLの構造について踏み込んだ説明を出しています。従来の「SEOのためにセマンティックHTMLを」という話とは、少し角度の違う話です。
この記事では、divタグの基本から始めて、増えすぎたdivが何を招くのか、Google公式が実際に何と言っているのか、そしてWordPressサイトで何から手をつければよいかまでを整理します。エンジニアでない方にも読めるように書いていますので、制作会社との会話の材料としてもお使いください。
divタグとは？｜意味を持たない「箱」という役割
まずは基本からです。専門用語はできるだけ避けて説明します。
divは「division（区分）」の略
divは英語のdivision、つまり「区分」「区画」を意味する単語の略です。読み方は「ディブ」または「ディヴ」が一般的で、現場では「ディブタグ」と呼ばれます。
役割は名前のとおりで、ページの中身をいくつかの区画に分けるためのタグです。引っ越しのときに使う段ボール箱を思い浮かべてください。箱そのものには何の意味もありませんが、中身をまとめて運ぶには欠かせません。divはその段ボール箱にあたります。
「意味を持たない」ことがdivの最大の特徴
HTMLのタグには、それぞれ意味が割り当てられているものが多くあります。h1なら「これは見出しです」、pなら「これは段落です」、tableなら「これは表です」という具合です。
ところがdivには、そうした意味が一切ありません。divが伝えるのは「ここからここまでが1つのまとまりです」という情報だけで、それが何のまとまりなのかは伝えません。
これは欠点のようにも聞こえますが、実は使いやすさの源でもあります。意味がないからこそ、どんな用途にも使えるのです。
なぜ意味のないタグが必要なのか
「意味がないなら使わなければよいのでは」と思われるかもしれません。しかし実際のWebページでは、純粋にデザイン上の都合でまとめたい場面が必ず出てきます。
たとえば「この3つの要素を横並びにして、中央に寄せて、背景に色を敷きたい」といった指定です。これは内容の意味とは関係のない、見た目だけの要求です。こういうときに意味を持つタグを流用すると、かえって誤った情報を伝えることになります。
divはこの「意味と関係のないまとめ役」を引き受けるために用意されています。適切に使われたdivは、まったく問題ありません。
HTMLとCSSの役割分担で考える
理解を助ける整理として、HTMLは「中身が何であるか」を書くもの、CSSは「それをどう見せるか」を書くもの、と分けて考えてください。
この分け方でいくと、divはHTML側にありながら「中身が何であるか」を何も語らない、やや特殊な立ち位置にあります。CSSのために置かれた足場のようなものです。
足場が必要なのは当然ですが、足場ばかりで中身が見えない建物は困ります。この記事の後半で扱う問題は、要するにこの「足場が多すぎる」状態の話です。
divタグはHTMLの歴史とともにある
divタグは1990年代のHTMLから存在する、かなり古いタグです。当時のWebページはtableタグで枠組みを組むのが主流で、divが本格的に使われ始めたのはCSSでレイアウトを組む手法が広まってからです。
その後、2010年代にheaderやnavといった意味を持つタグが追加され、「なんでもdiv」から「用途に応じて使い分ける」方向へと流れが変わりました。それでもdivが消えなかったのは、意味を持たない箱という役割が今も必要だからです。
古いサイトを引き継ぐと、tableでレイアウトを組んだ時代の名残や、divだけで組まれた時代の名残が混在していることがあります。制作された年代が分かると、コードを読むときの見通しが少しよくなります。
自社サイトのdivを実際に見てみる
ここまでの説明を実感していただくために、ご自身のサイトで確かめる方法をお伝えします。特別なツールは必要ありません。
ブラウザで自社サイトを開き、ページの何もない部分を右クリックして「ページのソースを表示」を選んでください。文字がびっしり並んだ画面が開きます。ここでキーボードのCtrlキーとFキーを同時に押し、検索欄に「div」と入力すると、そのページに何個のdivがあるかが表示されます。
数を見て驚かれるかもしれませんが、この時点で良し悪しを判断する必要はありません。多いか少ないかより、この後の章で扱う「何がdivで作られているか」のほうが本質だからです。
ついでに「<h2」や「<main」も検索してみてください。これらが1つも見つからない場合は、後半で扱う失敗に該当している可能性があります。
divタグの基本的な書き方｜classとidの使い分け
ここからは実際の書き方です。ご自身で書く機会がない方も、制作会社から納品されたコードを読む際の助けになります。
基本の書き方は開始タグと終了タグで挟むだけ
divタグは、開始タグと終了タグで中身を挟むだけの単純な構造です。終了タグにはスラッシュが付きます。
<div>
<h2>会社概要</h2>
<p>株式会社アクセス・リンクは…</p>
</div>この例では、見出しと段落という2つの要素が1つのdivで囲われています。これで「この2つはひとまとまりです」という情報がブラウザに伝わります。
終了タグの書き忘れは初心者がつまずく定番の失敗です。閉じ忘れると、そこから下のレイアウトがまとめて崩れます。
classは「何度でも使える名札」
divに見た目を指定するには、名札をつけてCSS側から呼び出します。その名札の代表がclass属性です。
<div class="service-box">
<p>SEOコンサルティング</p>
</div>
<div class="service-box">
<p>ホームページ制作</p>
</div>classの特徴は、同じ名前を何度でも使えることです。上の例のように、同じ見た目にしたい箱が3つあっても5つあっても、同じclass名をつければCSSの指定は1回で済みます。
実務ではこのclassが圧倒的によく使われます。制作会社のコードを見ると、ほとんどのdivに何らかのclassがついているはずです。
idは「ページに1つだけの名札」
もう1つの名札がid属性です。こちらは1つのページの中で同じ名前を1回しか使えません。
用途としては、ページ内リンクの飛び先を指定する場合や、JavaScriptで特定の1か所だけを操作したい場合などです。同じidを1ページに複数置くとページ内リンクが正しく動かなくなるので、ここは注意が必要です。
迷ったらclassを使う、と覚えておけば実務では困りません。
命名でよくある失敗
class名は自由につけられますが、自由すぎて後から困るケースがあります。代表が「見た目」を名前にしてしまうパターンです。
たとえばredという名前をつけた箱を、後から青に変えたくなったとします。CSSだけ直せば見た目は青くなりますが、HTMLにはredと書いてあるままです。数年後に触る人が必ず混乱します。
役割で名前をつけるのが基本です。redではなくalertやcampaign-boxのように、何のための箱かが分かる名前にしておくと、担当者が変わっても読み解けます。
style属性とdata属性という選択肢
classとidのほかに、実務で目にする属性が2つあります。1つはstyle属性で、CSSファイルを介さずタグに直接見た目を書き込む方法です。
手軽な反面、同じ指定を何か所にも書くことになり、後からまとめて変更できなくなります。1回きりの装飾なら構いませんが、繰り返し使うものはclassにまとめるのが定石です。
もう1つがdata-で始まる属性です。これはJavaScriptから使うための情報をタグに持たせる仕組みで、開閉式のメニューやタブ切り替えなどで使われます。制作会社のコードで見かけても、見た目とは関係のない裏方の仕掛けだと理解しておけば十分です。
divとspanの違い｜ブロック要素とインライン要素
divと並んでよく登場するのがspanです。どちらも「意味を持たない箱」ですが、振る舞いが違います。
divは縦に積まれ、spanは横に並ぶ
divはブロック要素と呼ばれ、標準では横幅いっぱいに広がります。そのため、divを2つ並べて書くと上下に積み重なります。
一方のspanはインライン要素と呼ばれ、中身の分だけの幅しか持ちません。文章の途中に置いても改行されず、そのまま流れの中に収まります。
段落や区画のまとまりにはdiv、文章の一部にはspan。この使い分けが基本です。
spanの実用例｜文字の一部だけ色を変える
spanが活きるのは、文章の中の一部分だけを装飾したいときです。当サイトの記事で使っている黄色いマーカーも、実はspanで実現しています。
<p>料金は<span class="price">月額45,000円</span>からです。</p>この書き方なら、金額の部分だけを大きくしたり色を変えたりできます。もしここでdivを使うと、金額の前後で改行されて文章が分断されてしまいます。
混同するとレイアウトが崩れる理由
divとspanを取り違えたときに起きる代表的な症状が、「文章の途中で意図しない改行が入る」と「横並びにしたいのに縦に積まれる」の2つです。
自社で記事を更新していて「なぜか文章が途中で切れる」という現象に遭遇したら、まずここを疑ってみてください。ブロックエディタで作業している限りは起きにくいのですが、HTMLを直接編集した箇所では起こり得ます。
pタグの中にdivは入れられるのか
実務でつまずきやすい細かいルールを1つ挙げておきます。段落を表すpタグの中に、divを入れることはできません。
HTMLの仕様上そう決まっており、無理に書くとブラウザが勝手に段落を閉じて解釈します。その結果、意図していない位置で段落が切れ、余白やレイアウトが崩れます。
段落の途中で何かを囲みたい場合は、spanを使ってください。当サイトの黄色いマーカーがspanで作られているのも、この制約があるからです。
逆に、divの中にpタグを入れるのはまったく問題ありません。箱の中に段落が入るのは自然な構造です。
CSSで振る舞いを変えることもできる
なお、ブロックかインラインかという性質は、CSSのdisplayという指定で切り替えられます。spanをブロックのように振る舞わせることも、その逆も可能です。
ただし、切り替えを多用すると読み手が混乱します。標準の振る舞いに合ったタグを選ぶほうが、後々の保守は楽になります。
「div soup」とは？divが増えすぎたページに起きること
ここからが本題です。divは便利ですが、便利すぎるがゆえに増えすぎる傾向があります。
div soup（divスープ）という言葉の意味
Web制作の現場では、ページのHTMLがdivだらけになった状態を「div soup」と呼びます。日本語なら「divの海」とでも訳すべき、あまりありがたくない呼び名です。
見た目は正常に表示されているので、ブラウザで見ている限り気づきません。問題は、ソースコードを開いたときに何がどこにあるのか誰にも分からなくなっている点です。
とくに近年のページビルダーやデザインツールで作ったサイトは、1つのボタンを表示するためだけにdivが5層も6層も重なっていることがあります。
問題1｜ページが重くなる
divが増えれば、HTMLのファイルサイズはその分だけ大きくなります。1つ2つなら誤差ですが、数百個の単位になると読み込み速度に影響します。
ブラウザ側の処理も増えます。ページの構造を組み立てる作業が重くなり、とくに通信環境の悪いスマートフォンで表示が遅れます。Googleはページの表示体験を評価対象としているので、無視できる話ではありません。
問題2｜スクリーンリーダーが読み上げにくい
目の不自由な方が使う読み上げソフト（スクリーンリーダー）は、HTMLのタグの意味を手がかりにページを案内します。「ここからが本文です」「ここがナビゲーションです」といった案内です。
ところがすべてがdivだと、その手がかりがありません。利用者は上から順に全部聞くしかなくなり、目的の情報にたどり着くまでに時間がかかります。
これは法令対応の観点でも重要度が増しています。自治体や教育機関の案件では、アクセシビリティへの配慮を求められる場面が確実に増えました。
問題3｜検索エンジンが構造を把握しにくい
検索エンジンは、ページのどこが主要な内容でどこが付随的な部分かを見分けようとします。見出しタグや本文を示すタグは、その判断材料になります。
ただし正確を期すと、Googleはdivが多いこと自体で順位を下げるとは言っていません。順位に直結する話として語るのは誇張です。あくまで「伝わりやすさ」の問題として捉えてください。
この点について、Googleが公式ドキュメントで何と言っているかを次の章で見ていきます。ここがこの1年で最も動いた部分です。
自社サイトがdiv soupかどうかの簡単な見分け方
専門知識がなくても判断できる目安を3つお伝えします。いずれもブラウザだけで確認できます。
1つ目は、ページのソースを表示して「<main」を検索することです。1つも見つからなければ、本文の範囲が明示されていない状態です。2つ目は同じ手順で「<nav」を検索します。メニューがあるのに見つからなければ、ナビゲーションとして認識されていません。
3つ目は、記事ページで「<h2」を検索することです。見出しが並んでいるはずのページでh2が0件なら、後半で扱う失敗1に該当します。
3つとも見つかれば、最低限の構造は整っていると考えて差し支えありません。見つからないものがあれば、そこが改善の起点になります。
問題4｜社内の運用コストが上がる
技術的な話ばかりが注目されますが、中小企業にとって実は最も痛いのがこれかもしれません。構造が読めないサイトは、修正のたびに時間と費用がかかります。
「この部分の文言を変えてほしい」という単純な依頼でも、どこを触ればよいかを探す作業から始まります。制作を担当した会社が変わった場合はなおさらで、前任者の意図を読み解く手間が丸ごと上乗せされます。
筆者が他社制作のサイトを引き継ぐ際も、まずこの「地図作り」から入ることがあります。構造が整っているサイトとそうでないサイトでは、同じ修正でも所要時間が数倍違うのが実感です。
サイトは作って終わりではなく、何年も更新し続ける資産です。その前提で見ると、構造の整理は見栄えの問題ではなく維持費の問題だと分かります。
AI検索時代にdivをどう使うか｜Google公式の指針
Googleは「生成AI検索向けの最適化ガイド」という公式ドキュメントを公開しており、2026年7月10日付で更新されています。ここにHTMLの構造についての記述があります。
Googleは「完璧なコードにこだわるな」と言っている
意外に思われるかもしれませんが、このドキュメントの見出しは「セマンティックHTMLについては、人間にとっての読みやすさを重視し、完璧なコードを心配しないこと」という趣旨のものです。
本文では、完璧にセマンティックなHTMLである必要はない、Web全体が有効なHTMLというわけではないしGoogleは理解できる、と明言されています。つまり「divが多いから検索に出ない」という心配は、Google検索に関しては不要だということです。
この点は、HTMLを完璧にすればSEOで有利になると謳うサービスへの判断材料にもなります。Google自身が優先度は高くないと示しているわけです。
それでもセマンティックHTMLを勧める理由
ただし同じ文章はこう続きます。可能な場合はセマンティックHTMLを使うようにするのが一般的には良い考えである、と。理由として挙げられているのが「スクリーンリーダーのような別の種類の利用者が、ページを解析して移動しやすくなるため」です。
ここが重要なところです。Googleは順位を理由にセマンティックHTMLを勧めているのではなく、人以外の読み手にとっての読みやすさを理由にしています。
そしてその「人以外の読み手」に、この1年で新しい顔ぶれが加わりました。
AIエージェントはDOM構造とアクセシビリティツリーを読む
同じGoogle公式ドキュメントには「エージェント体験を探る」という章が設けられています。AIエージェントとは、予約を取る、商品の仕様を比較するといった作業を人に代わって自律的に行うシステムのことです。
そして、こうしたエージェントがWebサイトから必要なデータを集める方法として、3つが具体的に挙げられています。スクリーンショットなどの視覚的な表示の分析、DOM構造の検査、そしてアクセシビリティツリーの解釈です。
アクセシビリティツリーとは、ページの各部分が「見出し」「ボタン」「ナビゲーション」といった役割としてどう整理されているかを表した内部的な地図のようなものです。もともとはスクリーンリーダーのための仕組みでした。
すべてがdivのページでは、この地図がほとんど白紙になります。スクリーンリーダー向けの配慮が、そのままAIエージェント向けの配慮と重なるようになったというのが、この1年で起きた変化です。
中小企業が今やるべきことの優先順位
とはいえ、Googleは同じドキュメントの中で、エージェント体験について「事業に関係があり、時間に余裕があれば確認してください」という位置づけにしています。最優先事項として扱ってはいません。
筆者としても、限られた予算をHTMLの全面的な書き直しに投じるのは得策ではないと考えます。優先すべきは中身の質であり、構造の整理はその次です。
ただし、サイトを新しく作る場面やリニューアルの場面なら話は別です。これから作るなら最初から整えておくほうが、後から直すよりはるかに安く済みます。制作会社との打ち合わせで確認しておきたいポイントです。
AI検索経由の状況はSearch Consoleで確認できる
構造を整えるかどうかを判断するうえで、そもそも自社がAI検索でどう扱われているかを知っておくと判断材料になります。
Googleの公式ガイドは、生成AI機能での表示状況を測る手段としてSearch Consoleの生成AIパフォーマンスレポートを案内しています。自社の無料ツールで確認できるので、まずここを見るのが筋の良い進め方です。
同じ箇所で、順位の成功を約束する第三者ツールや「内部指標」を使うと謳うツールには注意するよう促されてもいます。Googleの内部のランキングやAIシステムにアクセスできる外部ツールは存在しない、という明確な記述です。
HTML構造の改善を売り文句にしたサービスの提案を受けたときは、この公式の見解を物差しにしてください。効果がないとまでは言えませんが、優先順位の判断は変わってくるはずです。
divの代わりに使えるセマンティックタグ一覧
では、divの代わりに何を使えばよいのか。よく使うものだけを絞って紹介します。
ページの骨組みに使うタグ
ページ全体を大きく区切るためのタグが5つあります。この5つを押さえるだけで、構造の伝わり方は大きく変わります。
| タグ | 表す意味 | 使う場所の例 |
|---|---|---|
| header | そのページや区画の冒頭部分 | ロゴとサイト名が並ぶ最上部 |
| nav | 主要なナビゲーション | グローバルメニュー、パンくず |
| main | そのページの主要な内容 | 記事本文やサービス紹介の本体 |
| aside | 本筋から外れた補足 | サイドバー、関連リンク欄 |
| footer | そのページや区画の末尾部分 | 著作権表記、会社情報 |
とくにmainは効果が大きいタグです。どこが本文なのかを明示できるので、読み上げソフトも自動処理も「飛ばし読み」がしやすくなります。
なお、mainは1つのページに1つだけ置くのが原則です。複数置くと、どちらが主要な内容なのか判断できなくなります。
記事の中身に使うタグ
本文の内部でも、divの代わりに使えるタグがあります。代表がarticleとsectionです。
articleは、それだけ切り出しても意味が通る独立した内容に使います。ブログ記事1本、ニュース1件、商品1つの紹介といった単位です。sectionは、文書の中のひとまとまりの章に使います。見出しとセットで使うのが基本です。
判断に迷ったときの目安は「見出しをつけられるか」です。見出しがつけられる自然なまとまりならsection、単なる装飾のための囲みならdivで構いません。
divのままでよい場面
ここは誤解されやすいところですが、すべてのdivを置き換える必要はまったくありません。
横並びにするためだけの囲み、背景色を敷くためだけの囲み、余白を作るためだけの囲み。こうした純粋にデザイン上の都合で存在する箱は、divのままが正解です。意味のあるタグを見た目のために流用するほうが、むしろ間違いです。
判断基準はシンプルで、「この箱の中身は何か」と聞かれて答えられるならセマンティックタグ、答えられないならdivです。
見出しタグの階層も一緒に見直す
セマンティックタグの話をするなら、見出しタグの階層もあわせて確認しておきたいところです。h1からh6まであり、数字が小さいほど上位の見出しを表します。
基本のルールは、階層を飛ばさないことです。h2の次にいきなりh4が来ると、途中の階層が抜けた不自然な構造になります。文字の大きさを理由にタグを選ぶと、これが起きます。
大きさを変えたいだけなら、タグは正しいものを選んだうえでCSSで調整するのが正解です。当サイトの記事も、h2とh3の階層を守りながら見た目はCSSで整えています。
置き換えの進め方
既存サイトを直す場合は、一度に全部やらないことをおすすめします。まずページの骨組みにあたる5つのタグだけを整えるところから始めてください。
ヘッダー、ナビゲーション、本文、サイドバー、フッター。この5か所をdivから置き換えるだけでも、ページの地図としての機能は目に見えて改善します。作業量も限定的です。
なお、WordPressの多くのテーマではこの5つはすでにセマンティックタグで書かれています。自社サイトがどうなっているかは、ブラウザの「ページのソースを表示」で確認できます。
覚えておくと役に立つ小さなタグ
骨組み用のタグほど出番は多くありませんが、知っておくと使いどころのあるタグを3つ紹介します。
figureは、画像や図表とその説明文をひとまとめにするためのタグです。写真の下にキャプションを添える構成なら、divで囲うよりfigureのほうが関係が明確に伝わります。WordPressのブロックエディタは、画像ブロックを自動的にfigureで出力しています。
timeは日付や時刻を表すタグです。人が読む表記と機械が読む表記を同時に持たせられるので、イベント告知や記事の公開日などで役立ちます。
addressは連絡先を表すタグです。会社の住所や電話番号を載せる場面で使えます。ただし、ここで表せるのは「この文書の連絡先」であって、記事本文で紹介した第三者の住所には使いません。
いずれも必須ではありません。使えば必ず良くなるという性質のものでもないので、無理に増やすより、適切な場面が来たときに思い出せる程度で十分です。
WordPressサイトでの実務｜よくある3つの失敗と直し方
ここからは、筆者が実際のサイト診断でよく見かける3つの失敗を挙げます。いずれも修正の効果がはっきりしているものです。
失敗1｜見出しをdivで作ってしまう
最も多く、そして最も影響の大きい失敗がこれです。見た目上は見出しに見えるのに、HTMLではdivに大きな文字サイズを指定しただけ、という状態です。
この場合、検索エンジンにも読み上げソフトにも「これは見出しである」という情報が伝わりません。記事の骨格そのものが消えてしまいます。
起きやすいのは、ブロックエディタで「段落」ブロックに太字と大きな文字サイズを指定して見出し代わりにしているケースです。見出しに見せたい箇所は必ず「見出し」ブロックを使ってください。これは自社で更新している企業ほど起きやすい失敗です。
もう1つ、見出しに関連してよくあるのが「見出しタグを装飾として使う」逆パターンです。本文の一部を目立たせたいからという理由でh3を使ってしまうケースがこれにあたります。
見出しはその下に続く内容の要約であるべきもので、強調のための道具ではありません。強調したいだけなら、当サイトのようにマーカーを使うか、太字にするのが適切です。
失敗2｜ページビルダーでdivが何十層にもなる
ドラッグ操作でデザインできるページビルダーは便利ですが、裏側では大量のdivが生成されます。セクション、行、列、ウィジェット、その内側の要素と、階層が積み重なる構造だからです。
これ自体はツールの仕組み上やむを得ない部分があり、神経質になる必要はありません。問題になるのは、試行錯誤の途中で作った中身のない空のセクションが残っている場合です。
編集画面の階層表示を開いて、中身が入っていないセクションや列がないかを確認してみてください。不要なものを削るだけでページは軽くなります。
失敗3｜メインビジュアルをdivの背景画像にする
デザイン上の都合で、トップページの大きな写真をCSSの背景画像として設定しているサイトがあります。divに背景として画像を敷く形です。
ところがGoogle公式の画像SEOドキュメントには、GoogleはCSSの画像をインデックスに登録しないと明記されています。つまり、その写真は検索結果に出る候補にすら入りません。
写真が集客の武器になる業種では、これは見過ごせない損失です。検索結果に出したい画像は、divの背景ではなくimgタグで設置する必要があります。
テーマの更新で構造が変わることもある
もう1点、WordPress特有の注意事項があります。テーマを更新したり別のテーマに乗り換えたりすると、ページの骨組みにあたるHTMLがまるごと入れ替わります。
せっかく整えた構造が、テーマ側の都合で元に戻ることがあるということです。逆に、古いテーマから新しいテーマに変えたら自動的に改善した、という良い方向の変化も起こります。
テーマを変更したあとは、本記事で紹介した3つの検索（main、nav、h2）をもう一度実行して確認することをおすすめします。数分で終わる作業です。
どこから手をつけるか
3つ挙げましたが、優先順位は明快です。まず失敗1の見出しを直してください。作業は簡単で、効果は最も大きい部分です。
次に失敗3の背景画像を確認します。該当するのはトップページなど数ページに限られるはずなので、これも短時間で終わります。失敗2は日々の運用の中で少しずつ整理していけば十分です。
直した効果をどう確かめるか
修正したあと、その効果をどう測るかも決めておきましょう。順位の変動だけを見ていると、何が効いたのか永遠に分からなくなります。
見出しの修正であれば、Search Consoleでそのページの表示回数とクリック数を修正前後で比較します。ただし検索順位への反映には数週間かかるのが通例なので、翌日に変化がなくても慌てないでください。
背景画像をimgタグに変えた場合は、Google検索で「site:自社ドメイン」と検索し、画像タブに切り替えて確認します。その画像が一覧に現れれば、認識されたということです。こちらも反映まで時間がかかります。
作業した日と内容をメモに残しておくことをおすすめします。数週間後に振り返ったとき、記録がなければ検証のしようがありません。
よくある質問（FAQ）
divが多いと検索順位が下がりますか
divの数そのものが順位を下げるという説明は、Googleから出ていません。むしろ公式ドキュメントでは、完璧なセマンティックHTMLは必須ではないと明言されています。
ただし、divが極端に多いことでページが重くなっていれば、表示体験の面で不利になる可能性はあります。順位ではなく速度の問題として捉えるのが実態に近い理解です。
divの入れ子は何階層まで許されますか
HTMLの仕様上、階層数の上限は定められていません。何階層でも記述できます。
実務的な目安としては、必要がないのに深くしないこと、というだけです。ページビルダーを使っていれば自然と深くなるので、階層数そのものを気にするより、中身のない空の階層を作らないことを意識してください。
既存サイトのdivを全部書き換えるべきですか
その必要はありません。費用対効果が見合わないケースがほとんどです。
本記事で挙げたとおり、ページの骨組みにあたる5つのタグと、見出しの扱いだけを確認すれば実務上は十分です。全面的な書き直しは、リニューアルのタイミングで検討してください。
AI検索に出るためにdivを減らす必要はありますか
Googleの生成AI検索に関しては、必要とはされていません。同社の公式ガイドは、llms.txtのような専用ファイルもコンテンツの細切れ化もAI向けの書き換えも不要だと明記しています。
一方で、AIエージェントがDOM構造やアクセシビリティツリーを読むという記述もあります。将来を見据えるなら整えておく価値はありますが、緊急の対応事項ではありません。
制作会社にどう伝えればよいですか
新規制作やリニューアルの打ち合わせなら、「ヘッダー、ナビゲーション、本文、サイドバー、フッターはセマンティックタグで組んでください」「見出しは必ず見出しタグで作ってください」の2点を伝えれば十分です。
まともな制作会社であれば、いずれも標準で対応している内容です。むしろ、この話が通じるかどうかが制作会社を見極める材料にもなります。
ブロックエディタで作った記事は大丈夫ですか
WordPressの標準のブロックエディタは、見出しブロックをhタグ、画像ブロックをfigureタグというように、適切なタグで出力します。標準機能を素直に使っている限り、大きな問題は起きにくい設計です。
注意が必要なのは、段落ブロックの文字を大きくして見出し代わりにしている場合と、HTMLブロックで独自のコードを書き足している場合です。この2つに心当たりがなければ、まず心配はいりません。
divにclassをつけるとSEOに有利になりますか
なりません。class名は見た目を指定するための名札であり、検索エンジンが内容を判断する材料ではないとされています。
class名にキーワードを詰め込むといった手法を勧められた場合は、根拠を確認したほうがよいでしょう。効果がないだけでなく、コードが読みにくくなる分だけ損です。
まとめ｜divは悪者ではない、使う場所の問題
divタグは「意味を持たない箱」です。ページの中身をまとめ、CSSで見た目を整えるための足場として、なくてはならない存在です。divが多いこと自体は悪ではありません。
問題になるのは、意味のあるものまでdivで作ってしまう場合です。見出しをdivで作る、本文の区切りをdivだけで表す。こうなると、ページの骨格そのものが読み手に伝わらなくなります。
Googleは公式ドキュメントで、完璧なセマンティックHTMLは必須ではないとしつつ、可能な範囲で使うことを勧めています。その理由として挙げられているのは順位ではなく、スクリーンリーダーなど人以外の読み手にとっての読みやすさです。
そしてこの1年で、その「人以外の読み手」にAIエージェントが加わりました。Googleの同じガイドには、エージェントがDOM構造やアクセシビリティツリーを読み取るという記述があります。アクセシビリティへの配慮が、そのまま新しい読み手への配慮と重なる時代になったということです。
今日すぐできる第一歩として、自社サイトの記事を1本開き、見出しに見える部分が本当に見出しタグで作られているかを確認してみてください。ブラウザで該当箇所を右クリックして「検証」を選べば、divなのかhタグなのかがその場で分かります。
もう1つ、あわせて確認しておきたいのが画像の扱いです。トップページの大きな写真がCSSの背景画像になっていないかを見ておくと、検索結果での見え方に直結します。
そして最後に、優先順位の話を繰り返しておきます。HTMLの構造は、中身の質を上回る要素ではありません。Google自身が完璧を求めていない以上、限られた時間はまず記事の内容に使うべきです。構造の整理は、その土台を支える地味な工事だと位置づけてください。
HTML構造やサイト改善のご相談はアクセス・リンクへ
株式会社アクセス・リンクは、栃木県下野市を拠点に、SEOコンサルティングとホームページ制作を行っています。代表の三田健司は全日本SEO協会の認定SEOコンサルタントとして、Web制作10年以上、延べ1,000件以上のサイトに携わってきました。
「今のサイトのHTMLが適切なのか判断できない」「リニューアルにあたって制作会社に何を求めればよいか分からない」といったご相談もお受けしています。現状のサイトを拝見したうえで、直すべき箇所と優先順位を整理してお伝えします。
ご相談はお問い合わせフォームから承っております。まずは現状の課題をお聞かせください。
記事執筆・株式会社アクセス・リンク 代表取締役
Webサイト制作歴10年以上の経験を元にSEOコンサルティングを行い、延べ1,000件以上のサポート実績を誇ります。個人事業主や中小企業向けのホームページ制作やSEOコンサルティングを得意としています。
（社）全日本SEO協会 認定SEOコンサルタント
コメント