言語

HTML SEO：検索エンジンに伝わるマークアップの設計

HTMLの構造と要素がSEOに与える影響を解説。Googleの解析とレンダリング、重要なタグ、不正なhead要素によるメタデータ欠落、妥当性とセマンティックHTMLの考え方を整理します。

初回公開：2026年7月2日 · 最終更新：2026年8月23日 · 上級者向け
AI執筆者：AI v2

HTML SEOとは、検索エンジンがページをクロール、解析、レンダリング、理解できるようにマークアップを設計することです。Googleは不完全なHTMLにも寛容で、生のHTMLを解析した後、ヘッドレスChromiumでレンダリングしたDOMをインデックスします。title、見出し、href、img alt、og:titleなどは検索表示やURL発見に直接使われます。特に注意すべきなのは、head内の不正要素より後をGoogleが無視し、title、canonical、hreflangが失われる障害です。HTMLの妥当性自体やセマンティックHTML自体は直接のランキング要因ではありません。検証スコアではなく、解析上の実害を防ぐことを目的にしてください。

要点 — HTML SEOとは、検索エンジンがページをクロール、レンダリング、解析、理解できるようにマークアップを構造化することです。Googleは*“the web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.”* (翻訳) 「ウェブ全体としてHTMLは妥当ではないため、Google検索がHTML仕様に隠れた意味に依存できることはほとんどない」と述べています。GoogleはHTML lexerで正規化し、生のHTMLからリンクとコンテンツを解析した後、ヘッドレスChromium（Web Rendering Service）でレンダリングし、生成DOMをインデックスします。<title>、見出し、og:titleは検索結果のタイトルリンクに直接使われます。見落とされやすい重大な障害は、<head>内の不正要素より後をGoogleが無視し、<title>、canonical、hreflangが失われることです。妥当なHTML自体はランキング要因ではありません。セマンティックHTMLはMuellerの言う*“helps us to better understand pages”* (翻訳) 「ページをよりよく理解する助けになる」ものですが、品質シグナルではありません。検証ツールの満点ではなく、検証で見つかる実害を防ぎましょう。

この主張の根拠 Google reliably crawls links when they are HTML a elements with resolvable href attributes. 対象範囲： Googlebot link discovery requirements. 信頼度： 高 · 検証日： Google Search Central: Crawlable links この主張の根拠 Google processes only supported elements in the document head and may ignore elements appearing after an invalid head element. 対象範囲： Google's parsing of metadata in the HTML head. 信頼度： 高 · 検証日： Google Search Central: Valid page metadata

HTML SEOの実像

HTML SEOは、検索エンジンによるクロール、解析、レンダリング、理解に影響するHTML要素と構造上の選択全般を扱います。コンテンツやリンクの議論より一段下にある基盤であり、Googleがタイトル、リンク、canonicalをそもそも認識できるかを左右します。

HTML SEOはセマンティックHTMLと重なりますが、同じものではありません。セマンティックHTMLは、意味上の区別がない<div>を何にでも使うのではなく、<article>、<nav>、<main>、<section>などを構造上の意味に応じて選ぶ、より狭い実践です。要素ごとの詳細はこのハブ配下の解説に譲り、ここではマークアップと検索処理の全体像を扱います。

GoogleがHTMLを解析・レンダリングする仕組み

一般的な「SEO向けHTMLタグ」チェックリストでは省かれがちですが、タグの推奨事項がなぜ機能するのかを理解するうえで重要な部分です。

GoogleはHTMLを2段階で読みます。GoogleのJavaScript SEOの基本 によれば、まず*“crawling a URL and parsing the HTML response works well for classical websites or server-side rendered pages where the HTML in the HTTP response contains all content,”* (翻訳) 「HTTPレスポンスのHTMLに全コンテンツが含まれる従来型サイトやサーバーサイドレンダリングページでは、URLのクロールとHTMLレスポンスの解析がうまく機能する」とされ、“Googlebot then parses the response for other URLs in the href attribute of HTML links and adds the URLs to the crawl queue.” (翻訳) 「GooglebotはHTMLリンクのhref属性から別URLを解析し、クロールキューに追加する」と説明されています。次に、“Googlebot queues all pages with a 200 HTTP status code for rendering… Once Google’s resources allow, a headless Chromium renders the page and executes the JavaScript,” (翻訳) 「GooglebotはHTTPステータス200の全ページをレンダリング待ちにし、リソースが許すとヘッドレスChromiumがページをレンダリングしてJavaScriptを実行する」、その後*“Googlebot parses the rendered HTML for links again”* (翻訳) 「レンダリング済みHTMLからリンクを再解析する」、さらに*“Google also uses the rendered HTML to index the page.”* (翻訳) 「レンダリング済みHTMLをページのインデックスにも使う」とされています。

つまり、リンク発見と初期コンテンツのために生のHTMLを先に解析し、その後ヘッドレスChromium、すなわちWeb Rendering ServiceがJavaScriptを実行して生成したDOMを解析します。最終的なインデックスはレンダリング済みHTMLから作られます。実務上は、クライアント側JavaScriptの実行後にしか現れないコンテンツより、初期サーバーレスポンスに含まれるコンテンツのほうが速く確実に認識されます。

HTML lexer：不完全なマークアップに耐えられる理由

その前段で、GoogleはHTMLを正規化します。Gary IllyesはSearch Off the Record で、“we push all the HTML through an HTML lexer… we normalize the HTML,” (翻訳) 「すべてのHTMLをHTML lexerに通して正規化する」と説明しました。見出しタグも*“normalized through rendering,”* (翻訳) 「レンダリングを通じて正規化」され、Googleは*“understand the styling that was applied on the h tags, so we can determine the relative importance.”* (翻訳) 「hタグに適用されたスタイルを理解し、相対的な重要度を判断」しようとします。これらはGoogleの一次書き起こしではなく、ポッドキャストを書き起こしたフォーラム投稿に基づくため、報告された発言として扱ってください。

これは私が検索の仕組み で説明する、HTML lexer → 正規化 → DOMツリー＋CSSOM → レンダーツリー → インデックスというモデルと同じです。Googleが完璧なHTMLを必要としないのは、ソースを文字列として厳密に読むのではなく、まず正規化されたツリーへ解析し、ブラウザーのように壊れた部分を補正するからです。ここから、このテーマで最も安心できる引用につながります。

“The web in general is not valid HTML” (翻訳) 「ウェブ全体としてHTMLは妥当ではない」

GoogleのSEOスターターガイド は、文字どおり「注力すべきではないこと」の節で、次のように明言しています。

“The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (翻訳) 「ウェブ全体としてHTMLは妥当ではないため、Google検索がHTML仕様に隠れた意味に依存できることはほとんどありません。」

同じガイドは、見出しを厳密な意味順に並べることは*“fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order,”* (翻訳) 「スクリーンリーダーには非常に有用だが、Google検索の観点では順不同でも問題ない」とし、“no magical, ideal amount of headings a given page should have. However, if you think it’s too much, then it probably is.” (翻訳) 「見出し数に魔法のような理想値はない。ただし多すぎると感じるなら、おそらく多すぎる」とも述べています。

これは、W3C検証ツールを完全に緑にすることへ執着しなくてよいという意味です。妥当性そのものはランキング要因ではありません。壊れたマークアップを問題にすべき理由は、一部の不正な構造が解析を壊し、コンテンツを隠すという、より限定的で具体的なものです。

Googleが直接読むHTML要素

一部の要素は漠然とした理解のためだけでなく、検索結果に表示する内容の直接の入力としてGoogleが明示しています。タイトルリンクのドキュメント によれば、Googleは*“content in <title> elements, main visual title shown on the page, heading elements, such as <h1> elements, content in og:title meta tags,”* (翻訳) 「<title>要素の内容、ページ上の主な視覚タイトル、<h1>などの見出し要素、og:titleメタタグの内容」や、目立つスタイルのテキストからタイトルリンクを決めます。

正しく実装したい要素と、各要素の詳細な解説先は次のとおりです。このハブでは重複して説明せず、適切な記事へ案内します。

  • <title> — タイトルリンクの主要な入力です。書き方とテストはtitle tag を参照してください。
  • <head>のメタデータ — canonical、meta robots、hreflangです。Googleによれば<head>は*“the primary element for specifying metadata about a page.”* (翻訳) 「ページのメタデータを指定する主要要素」です。詳細はcanonical tag とmeta robots を参照してください。
  • 見出し（<h1>〜<h6>） — 構造を示し、レンダリング時に正規化されます。Googleは適用されたCSSも考慮します。詳細はheader tags を参照し、順序を過度に最適化しないでください。
  • リンク（<a href>） — URL発見の仕組みです。hrefのない<div>のクリック処理では、GooglebotがURLをキューへ入れない可能性があります。
  • <img alt> — 画像理解とアクセシビリティに使われます。詳細はalt text を参照してください。
  • og:titleと目立つスタイルのテキスト — タイトルリンクの追加入力です。

すべてを静かに壊す一つの誤り：不正な<head>

これはGoogleの公式資料にあるHTML SEOの不具合の中でも、最も具体的で見落とされやすいものです。Google検索向けの有効なページメタデータ には次のようにあります。

“If you use an invalid element in the <head> element, Google ignores any elements that appear after the invalid element.” (翻訳) 「<head>要素内で無効な要素を使うと、Googleはその無効な要素より後に現れる要素をすべて無視します。」

<head>に置ける子要素は、title、meta、link、script、style、base、noscript、templateという短い許可リストです。余分な<img>、<iframe>、閉じ忘れたタグ、あるいはそれらを挿入する<script>があると、ブラウザーはその位置で<head>を終え、後続要素を<body>へ移します。問題要素より後の<title>、rel=canonical、hreflangはGoogleに認識されない可能性があります。Googleの表現では、“using valid HTML for page metadata ensures that Google can use the metadata as documented.” (翻訳) 「ページメタデータに有効なHTMLを使うことで、Googleがドキュメントどおりにメタデータを利用できるようになる」ということです。

「妥当なHTML」を気にすべき理由は、検証スコアではなく、このような実害です。ソースを表示して重要タグが<head>内にあることを確認し、検証ツールも使い、GSCのURL検査でGoogleが取得したレンダリング済みHTMLを調べてください。

問題は検証スコアではなく、パーサーがheadを終了した後に重要なメタデータが置かれることです。 出典： Google Search Central

head内の不正な画像要素より前に置かれたtitleとmeta descriptionは通常どおり読めます。不正要素は解析境界を作り、その後のcanonical、robots、hreflangメタデータは無視されるかbodyへ移される可能性があります。完璧な検証スコアを追うのではなく、ソースとレンダリング済みHTMLを確認して実際の影響を検証してください。

© Patrick Stox LLC · CC BY 4.0 ·

HTMLとセマンティックHTML：理解には役立つがランキングシグナルではない

このハブが解決したい論点は、<div>ばかりではなく<article>、<nav>、<header>、<section>といった意味のある要素を使うと順位が上がるのか、というものです。

最も明確なのはJohn Muellerの回答です。セマンティックタグの階層は品質シグナルであるはずだとするSEO担当者に、彼は次のように答えました。

“I don’t see it as a quality signal, but it definitely helps us to better understand pages, so that we can show them better for the appropriate queries in search.” (翻訳) 「品質シグナルだとは考えていませんが、ページをよりよく理解し、検索で適切なクエリによりよく表示する助けになることは確かです。」

この一文に要点があります。セマンティックHTMLは直接のランキング・品質シグナルではありませんが、理解を助けます。理解が深まれば、Googleがページを適切なクエリに結び付けるうえで間接的に役立ち得ます。Martin Splittも、正しく使ったセマンティック要素はページ理解に有利だと述べています。Splittの「SEO上の利点」という表現はウェビナー記事の要約であり、確認済みの逐語引用ではないため引用符を付けていません。 一方、見出し構造については、“it does not make a difference if you have an H1 and then H2, H2, H2… fundamentally, it doesn’t make that much of a difference.” (翻訳) 「H1の後にH2、H2、H2と続いても違いはなく、根本的にはそれほど大きな差にならない」と明言しています。

現代でよくある問題はdiv soupです。React、Vue、Tailwindのコンポーネントライブラリは、何にでも<div>を出力しがちです。ランキングペナルティではありませんが、Googleの理解とアクセシビリティの双方を助ける<nav>や<main>などの構造的な目印が失われます。適切な要素を選ぶコストはほぼありません。要素別の詳説は、このサブクラスターのsemantic HTML に譲ります。ここでの結論は、理解には役立つが、魔法のランキング倍率ではないということです。

妥当なHTMLはSEOに重要か

短く言えば、直接のランキング要因としては重要ではありません。GoogleはW3C妥当性をランキング要因と明示しておらず、“the web in general is not valid HTML.” (翻訳) 「ウェブ全体としてHTMLは妥当ではない」と述べています。考え方を変えましょう。妥当性が目的なのではなく、妥当性検証で見つかる障害を避けることが目的です。 検証エラーを直すべきなのは、訪問者やクローラーが受け取るコンテンツ、メタデータ、リンク、アクセシビリティ、レンダリングを実際に変える場合です。canonicalを追い出す不正な<head>、本文を隠す閉じ忘れタグ、hreflangを<body>へ移す要素は現実の間接的SEO問題であり、まさに検証ツールが見つけるものです。100%の緑のチェックではなく結果を追ってください。

BingによるHTMLの読み方の違い

BingはGoogleより構造HTMLを文字どおりに捉えます。見出しタグについて長く使われてきた説明は、“the <h1>, <h2>, and deeper tags… are regarded by the bot as more like XML than HTML in that they describe the data they contain” (翻訳) 「h1、h2、さらに下位のタグは、含むデータを説明するという点でHTMLよりXMLに近いものとしてボットに扱われる」というものです。視覚スタイルではなく、内容の記述子です。Bingのウェブマスターガイドライン も、見出しを構造シグナルとして*“<H1>–<H6> Header tags — Define the structure of your page and helps Bing understand the content of each paragraph.”* (翻訳) 「H1〜H6見出しタグはページ構造を定義し、Bingが各段落の内容を理解する助けになる」と明記しています。両方ともサイト内のheader-tags調査で確認済みの引用を再利用しています。BingのページはJavaScriptで描画され自動再確認しにくいため、最終扱いの前にスポットチェックしてください。

両方の検索エンジンを対象にするサイトにとって違いは小さいものの実在します。GoogleはレンダーツリーやCSSの文脈をより考慮し、Bingは生の構造タグをデータの記述子としてより重視します。明確で意味のある構造は、どちらにも有効です。

HTML SEOでよくある誤り

  • 不正な<head> — 無効な要素より後のタグがすべて失われます。
  • クライアント側JSだけでレンダリングするコンテンツ — サーバー側の代替がなければ、第2段階で遅れて、またはまったくインデックスされません。
  • 意味上の目印がないdiv soup — ペナルティはありませんが、構造シグナルとアクセシビリティが失われます。
  • <a href>ではない「リンク」 — <div>のクリック処理はGooglebotがURLとしてキューへ入れられないことがあります。
  • 複数または矛盾する<head>ディレクティブ — canonicalが2つある、canonicalとmeta robotsが矛盾する、といった状態です。
  • 構造ではなく見た目の大きさで選んだ見出し — Googleはレンダリング済みスタイルも考慮するため、不一致が構造を曖昧にします。

このハブの位置付け

これはHTML SEOサブクラスターのハブです。特定要素を徹底解説するのではなく、全体をカバーして適切な記事へ案内します。配下のsemantic HTML は<article>、<section>、<nav>、<header>、<main>、<aside>を要素別に扱います。HTML lang属性 は<html lang="en">が宣言する内容、hreflangとの違い、Googleが言語判定に使わずBingは小さなシグナルとして扱う理由を詳説します。タイトルはtitle tag 、見出しはheader tags 、画像はalt text 、<head>ディレクティブはcanonical tag とmeta robots 、レンダリングはJavaScript SEO を参照してください。まずここで考え方をつかみ、詳細へ進みましょう。

専門家メモを追加

専門家の引用を固定

新しい人物ですか？まず、 /admin/experts/ → 専門家の引用を固定 から未登録プロフィールを作成してください。