SEO対策に必須のHTMLタグ一覧【2026年最新】コード例付きチェックリスト

SEO対策で重要なHTMLタグ — 優先度別一覧表

SEOに関わるHTMLタグは数多くありますが、すべてを同じ優先度で扱う必要はありません。ここでは、検索順位・クリック率・クロール制御への影響度をもとに、3段階の優先度に分類します。

SEO対策に重要なHTMLタグ一覧（優先度別）

優先度	タグ	主な役割	影響範囲
A（最優先）	<title>	検索結果のタイトル表示・順位評価	検索順位・CTR
A（最優先）	<meta name=”description”>	検索結果のスニペット表示	CTR
A（最優先）	<h1>〜<h6>	コンテンツ構造の伝達	検索順位・ユーザビリティ
A（最優先）	<a href>	内部・外部リンクの評価伝達	検索順位・クロール
B（重要）	<img alt>	画像内容の説明	画像検索・アクセシビリティ
B（重要）	<link rel=”canonical”>	正規URLの指定	重複コンテンツ対策
B（重要）	<meta name=”robots”>	インデックス・クロール制御	インデックス管理
B（重要）	<meta name=”viewport”>	モバイル表示の最適化	モバイルSEO・UX
C（推奨）	OGPタグ群	SNSシェア時の表示最適化	間接的SEO効果
C（推奨）	<link rel=”alternate” hreflang>	多言語ページの言語指定	国際SEO

この表をベースに、以下では各タグの役割・書き方・よくある間違いを順番に解説します。タグ単位の話に入る前にSEOコーディング全般の考え方を押さえたい方は、実装テクニックを実測データ付きで整理したSEOに強いコーディングの解説記事から読むと全体像がつかめます。

titleタグ — 検索順位とCTRに直結する最重要タグ

なぜtitleタグが最重要なのか

titleタグは、Googleが検索順位を決定する際に最も重視するHTML要素のひとつです。検索結果ページ（SERP）ではページタイトルとしてリンクテキストに表示されるため、ユーザーが「このページをクリックするかどうか」を判断する第一の材料にもなります。つまりtitleタグは、検索順位（ランキング）とクリック率（CTR）の両方に直結する、SEO対策の出発点です。

GoogleのSEOスターターガイドでも、ページごとに固有のtitleタグを設定することが推奨されています。各ページの内容を検索エンジンとユーザーの両方に正確に伝えるためです。

titleタグの書き方 — 30〜35文字・キーワード前方配置

titleタグの最適な文字数は、Google検索結果の表示仕様を基準にすると、PCで約30〜35文字が目安です。これを超えると「…」で途中が省略され、伝えたいキーワードやメッセージが切れるリスクがあります。

書き方の基本は2つです。第一に、ターゲットキーワードをタイトルの先頭付近に置くこと。第二に、後半に「コード例付き」「テンプレート付き」のような具体的なベネフィットを添えることです。キーワードを羅列するだけのタイトルは、検索エンジンにもユーザーにも刺さりません。

titleタグのBefore/After

NG例（Before）:

<title>株式会社〇〇 | サービス紹介 | SEO対策からWeb制作まで幅広くサポートする総合デジタルマーケティング企業</title>

この例の問題点は3つあります。第一に、65文字以上あり検索結果で大幅に切れます。第二に、社名が先頭にあるためキーワードが後方に押しやられています。第三に、何のページなのかが分かりにくく、CTRの低下を招きます。

改善例（After）:

<title>SEO対策に必須のHTMLタグ一覧｜コード例付きチェックリスト</title>

改善例では、ターゲットキーワード「SEO対策」「HTMLタグ」を先頭付近に配置し、全体を31文字に収めています。「コード例付き」「チェックリスト」という具体的なベネフィットも含まれており、ユーザーが「自分の求めている情報がありそうだ」と判断しやすい構成です。

コピペ用テンプレート

<!-- titleタグの推奨テンプレート -->
<title>[ターゲットKW] + [補足KWまたはベネフィット]｜[サイト名]</title>

<!-- 記入例 -->
<title>SEO対策に必須のHTMLタグ一覧｜コード例付きチェックリスト</title>

meta descriptionタグ — CTRを左右するスニペット

meta descriptionの役割と検索順位への影響

meta descriptionは、検索結果のタイトル直下に表示される説明文（スニペット）のソースとなるタグです。Googleは公式に「meta descriptionはランキング要因ではない」と明言しています。それでも軽視できないのは、魅力的なスニペットがCTRを改善し、結果として検索からの流入を増やすからです。

Googleはページ内のコンテンツから自動的にスニペットを生成する場合がありますが、meta descriptionを明示的に設定しておけば、意図した内容が表示される確率が高まります。特に商品ページやランディングページでは、コンバージョンにつながる訴求文をmeta descriptionに含めることで、質の高いトラフィックを呼び込めます。

最適な文字数と書き方

Google検索結果に表示されるスニペットの文字数目安は、PCで約120〜160文字です。スマートフォンではさらに短く表示される傾向があるため、最も伝えたい情報は最初の80文字以内に含めるのが安全です。

効果的なmeta descriptionの条件は3つあります。ページの内容を正確に要約していること。ユーザーが得られるメリットが具体的に書かれていること。そして「解説します」「チェックリスト付き」のような、行動を後押しするフレーズを含んでいることです。

meta descriptionのBefore/After

NG例（Before）:

<meta name="description" content="弊社のウェブサイトへようこそ。さまざまなサービスを提供しております。">

この例には、ページ固有の内容が一切含まれていません。どのページにも使い回せてしまう汎用的な文面であり、検索ユーザーがクリックする動機になりません。ターゲットキーワードが含まれていないため、検索クエリとのマッチングでも不利です。

改善例（After）:

<meta name="description" content="SEO対策に重要なHTMLタグを優先度別に一覧で解説。title、meta description、h1〜h6、alt属性、canonical、OGPなど、初心者が押さえるべきタグの書き方をBefore/Afterのコード例とチェックリスト付きで紹介します。">

改善例では、ターゲットキーワード「SEO対策」「HTMLタグ」が含まれ、ページの内容が具体的に伝わります。「Before/Afterのコード例」「チェックリスト付き」という付加価値も明示されており、クリック意欲を高める構成です。

コピペ用テンプレート

<!-- meta descriptionの推奨テンプレート -->
<meta name="description" content="[ターゲットKW]を[切り口]で解説。[具体的な内容の列挙]を[形式・付加価値]付きで紹介します。">

<!-- 記入例 -->
<meta name="description" content="SEO対策に重要なHTMLタグを優先度別に一覧で解説。title、meta description、見出しタグ、alt属性などの書き方をコード例付きで紹介します。">

見出しタグ（h1〜h6）とセマンティックHTML — 構造を検索エンジンとAIに伝える

見出しタグが持つ2つの役割

見出しタグ（h1〜h6）は、ページのコンテンツ構造を検索エンジンとユーザーの双方に伝える役割を持ちます。検索エンジンにとっては、見出しタグの階層構造がページの論理構成を理解する手がかりになります。ユーザーにとっては、見出しを拾い読みすることで記事全体の流れを素早く把握できるナビゲーションとして機能します。AI検索が回答を組み立てる際も、見出しで区切られた明快な構造は文脈の把握を助けます。

特にh1タグはページの主題を宣言する最も重要な見出しです。Googleは「h1をページに複数配置しても技術的な問題はない」としていますが、SEOの観点からはh1は1ページに1つだけ設置し、ページの主題（titleタグの内容）と整合させるのがベストプラクティスです。

見出しの階層構造を正しく使う

見出しタグで最も大切なのは、論理的な階層構造を崩さないことです。h2の下にh3、h3の下にh4というように、レベルを飛ばさずに順序立てて使います。書籍の目次と同じ考え方で、大見出し（h2）の中に中見出し（h3）があり、さらにその中に小見出し（h4）がある——この入れ子構造を守ることで、検索エンジンはコンテンツの意味的なまとまりを正しく解釈できます。

よくある間違いは、「見た目のフォントサイズを変えたい」という理由でh3の次にh5を使ったり、装飾目的でh1を複数回使ったりするケースです。見た目の調整はCSSで行い、見出しタグはコンテンツの論理構造を表すためだけに使います。

見出しタグのBefore/After

NG例（Before）:

<h1>SEO対策ガイド</h1>
<h1>titleタグについて</h1>    <!-- h1が2つある -->
<h4>titleの文字数</h4>       <!-- h2, h3を飛ばしている -->
<h2>meta descriptionについて</h2>
<div class="heading">補足情報</div>  <!-- 見出しタグを使っていない -->

この例では、h1が重複し、h4がh1の直下に来ていて階層が破綻しています。見出しとして機能すべき箇所にdivタグが使われており、検索エンジンに構造が正しく伝わりません。

改善例（After）:

<h1>SEO対策に必須のHTMLタグ一覧</h1>

<h2>titleタグについて</h2>
  <h3>titleの最適な文字数</h3>
  <h3>titleの書き方のポイント</h3>

<h2>meta descriptionについて</h2>
  <h3>補足：meta descriptionの注意点</h3>

改善例では、h1をページ全体の主題として1つだけ設置し、h2→h3の階層を守って記述しています。すべての見出し的な要素に適切な見出しタグを使うことで、検索エンジンもユーザーもコンテンツ構造を正確に把握できます。

divではなくセマンティック要素でページを組む

見出しタグと合わせて押さえたいのが、ページ全体の骨格を意味のあるHTML要素（セマンティック要素）で組むことです。すべてをdivで組んだページは、人間には見た目で構造が分かっても、機械には「どこが本文でどこがナビゲーションか」が伝わりません。

NG例（Before）:

<!-- NG: divだけで組まれた構造（文書の役割が伝わらない） -->
<div class="header">サイト名とメニュー</div>
<div class="main">
  <div class="title">記事タイトル</div>
  <div class="subtitle">セクション見出し</div>
  <div class="text">本文…</div>
</div>
<div class="footer">フッター情報</div>

改善例（After）:

<!-- 良い例：役割ごとにセマンティック要素を使う -->
<header>サイト名とメニュー</header>
<main>
  <article>
    <h1>記事タイトル</h1>
    <section>
      <h2>セクション見出し</h2>
      <p>本文…</p>
    </section>
  </article>
</main>
<footer>フッター情報</footer>

マークアップの品質は、W3CのNu HTML Checkerのような検証ツールで機械的に確認できます。参考として、当サイトの実測（2026年7月計測）では、Nu HTML Checkerで検出されたエラー10件はすべてWordPressテーマ由来で、記事コンテンツ由来のエラーは0件でした。検証の手順と結果はSEOに強いコーディングの実測レポートで公開しています。h1からfooterまで含めたページ全体の雛形が必要な方は、コピペで使えるSEO対策済みHTMLテンプレートも参考にしてください。

imgタグのalt属性と画像最適化 — 画像SEOとCore Web Vitalsの基本

alt属性がSEOに影響する理由

imgタグのalt属性（代替テキスト）は、画像の内容をテキストで説明するための属性です。検索エンジンの画像認識は進化していますが、alt属性のテキスト情報は依然としてページの文脈を理解するための重要なシグナルとして扱われています。alt属性を適切に設定することで、Google画像検索からの流入増加が期待できます。

alt属性はアクセシビリティの観点でも必須です。スクリーンリーダーを使用するユーザーにとって、alt属性はその画像に何が写っているかを知る唯一の手段です。画像が表示されない環境（低速回線、画像ブロック設定など）でも代替テキストが表示されるため、ユーザー体験の向上に直結します。

alt属性の書き方の原則

効果的なalt属性の原則は「画像の内容を簡潔かつ具体的に記述すること」です。キーワードを無理に詰め込む必要はありません。画像と無関係なキーワードを羅列する「キーワードスタッフィング」は、Googleのガイドライン違反とみなされる可能性があります。

目安としては、画像の内容を20〜80文字程度の自然な日本語で説明します。装飾目的の画像（罫線、背景パターンなど）にはalt=””（空のalt属性）を設定し、スクリーンリーダーに読み上げさせないようにします。これは「alt属性を省略する」こととは異なります。alt属性自体は必ず記述し、値を空にするのが正しい方法です。

alt属性のBefore/After

NG例（Before）:

<!-- NG: alt属性がない -->
<img src="seo-chart.png">

<!-- NG: キーワードの詰め込み -->
<img src="seo-chart.png" alt="SEO SEO対策 SEOコンサル SEO会社 SEOツール">

<!-- NG: ファイル名をそのまま記述 -->
<img src="IMG_20260301_001.jpg" alt="IMG_20260301_001.jpg">

最初の例はalt属性そのものがなく、検索エンジンもスクリーンリーダーも画像の内容を把握できません。2つ目はキーワードスタッフィングで、スパムとみなされるリスクがあります。3つ目はファイル名をそのまま入れただけで、ユーザーにも検索エンジンにも意味のある情報がありません。

改善例（After）:

<!-- 良い例：コンテンツ画像 -->
<img src="seo-chart.png" alt="2026年SEO対策で重要なHTMLタグの優先度をまとめた棒グラフ" width="800" height="450" loading="lazy">

<!-- 良い例：装飾画像（空のaltを設定） -->
<img src="divider-line.png" alt="" role="presentation">

<!-- 良い例：人物写真 -->
<img src="team-meeting.jpg" alt="SEOチームがホワイトボードを使って内部リンク設計を議論している様子" width="1200" height="630" loading="lazy">

width・height・loading属性でCore Web Vitalsに配慮する

改善例に含めたwidth・height属性は、画像の表示領域をあらかじめ確保してレイアウトシフト（CLS）を防ぐための記述です。loading=”lazy”を指定すれば、画面外の画像の読み込みを遅らせて表示速度を改善できます。これらはCore Web Vitalsの評価に直結します。

2026年時点のCore Web Vitalsは、LCP（最大コンテンツの描画、良好の目安2.5秒以内）、INP（操作への応答性、良好の目安200ミリ秒以内）、CLS（レイアウトの安定性）の3指標です。INPは2024年3月に旧指標のFIDを正式に置き換えており、現在FIDは評価に使われていません。当サイトでも旧構成時にクリティカルCSSのインライン化などの改善でLCPを3.2秒から1.8秒へ短縮した実績があり、HTMLとリソース読み込みの整理だけでも指標は大きく動きます。改善手順の詳細は前述のSEOに強いコーディングの記事にまとめています。

aタグ（リンク） — SEO評価を伝達するアンカーテキスト

aタグがSEOにおいて重要な理由

aタグ（アンカータグ）は、ページ間のリンクを作成するHTMLタグです。SEOにおいてリンクは「ページの信頼性・関連性を投票する仕組み」として機能します。外部サイトからの被リンクが外部からの投票であるのに対し、サイト内の内部リンクは「このページとあのページは関連がある」というシグナルを検索エンジンに伝える内部の投票です。

特に効くのがアンカーテキスト（リンクテキスト）です。アンカーテキストは、リンク先ページの内容を検索エンジンに伝える手がかりになります。「こちら」「ここをクリック」といった曖昧な文言ではなく、リンク先の内容を的確に表すキーワードを含んだ自然な文言を使います。

内部リンクの設計とrel属性の使い分け

内部リンクは、ユーザーの情報探索の流れに沿って、関連性の高いページ同士を結びつけるように設計します。無関係なページへのリンクを大量に設置しても効果はなく、むしろ各リンクの価値が薄まります。ハブとなる記事から詳細記事へ、詳細記事から関連記事へと導線を作る具体的な手順は、SEO内部リンク戦略の設計と実装で解説しています。

外部リンクについては、信頼性の高い情報源を適切に引用することでページの専門性を示せます。ただし、ユーザー投稿コンテンツ（コメント欄など）に含まれるリンクや広告リンクには、rel=”nofollow”やrel=”sponsored”を設定し、SEO評価の不適切な伝達を防ぎます。

aタグのBefore/After

NG例（Before）:

<!-- NG: アンカーテキストが曖昧 -->
<p>SEOに強いコーディングについては<a href="https://scale-basics.com/seo-coding/">こちら</a>をご覧ください。</p>

<!-- NG: URLがそのまま -->
<p>詳しくは <a href="https://example.com/guide">https://example.com/guide</a> を参照。</p>

<!-- NG: 同じアンカーテキストで異なるページにリンク -->
<a href="https://example.com/page-a/">詳しくはこちら</a>
<a href="https://example.com/page-b/">詳しくはこちら</a>

改善例（After）:

<!-- 良い例：リンク先の内容を表すアンカーテキスト -->
<p>HTMLタグの最適化と合わせて、<a href="https://scale-basics.com/seo-coding/">SEOに強いコーディングの全体像</a>も押さえておくと効果的です。</p>

<!-- 良い例：外部リンクに適切な属性を付与 -->
<p>詳細は<a href="https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja" target="_blank" rel="noopener noreferrer">Google SEOスターターガイド</a>を参照してください。</p>

<!-- 良い例：sponsoredの適切な使用 -->
<a href="https://example.com/sponsored" rel="sponsored noopener noreferrer" target="_blank">提携サービスの紹介ページ</a>

改善例では、アンカーテキストからリンク先の内容が推測できます。外部リンクにはtarget=”_blank”とrel=”noopener noreferrer”を設定し、セキュリティにも配慮しています。

canonicalタグ — 重複コンテンツの正規化

canonicalタグが必要になる場面

link rel=”canonical”タグは、同一または類似のコンテンツが複数のURLで表示される場合に、「正規のURLはこれである」と検索エンジンに宣言するためのタグです。重複コンテンツは「クロールバジェットの浪費」「被リンク評価の分散」「意図しないURLのインデックス」といった問題を引き起こすため、canonicalタグによる正規化が欠かせません。

具体的に必要になるのは次のようなケースです。パラメータ付きURL（例: ?utm_source=twitter）と素のURLが共存する場合。httpとhttps、wwwありとwwwなしの両方がアクセス可能な場合。ECサイトで同一商品がカテゴリ別の異なるURLで表示される場合などです。ケース別の判断基準やCMSごとの設定方法は、canonicalタグの設定方法と重複コンテンツ対策の詳細ガイドで掘り下げています。

canonicalタグの正しい使い方

canonicalタグはHTMLのhead要素内に記述します。URLは絶対パスで記述するのが推奨です。相対パスでも動作しますが、環境による解釈の違いを避けるため絶対パスが安全です。また、canonicalタグは「ヒント」であり「命令」ではありません。指定とページ内容の実態が大きく異なる場合、Googleはcanonicalタグを無視して独自の判断を下すことがあります。

canonicalタグのBefore/After

NG例（Before）:

<!-- NG: 相対パスで指定 -->
<link rel="canonical" href="/seo-html/">

<!-- NG: canonicalが自分自身を指していない（別サイトに向いている間違い） -->
<link rel="canonical" href="https://other-site.com/seo-html/">

<!-- NG: 1ページに複数のcanonicalタグ -->
<link rel="canonical" href="https://example.com/page-a/">
<link rel="canonical" href="https://example.com/page-b/">

改善例（After）:

<!-- 良い例：絶対パスで正しいURLを指定 -->
<link rel="canonical" href="https://example.com/seo-html/">

<!-- 良い例：パラメータ付きページから正規URLへ -->
<!-- https://example.com/seo-html/?utm_source=twitter 上で以下を記述 -->
<link rel="canonical" href="https://example.com/seo-html/">

<!-- 良い例：head要素内の適切な位置に1つだけ配置 -->
<head>
  <meta charset="UTF-8">
  <title>SEO対策に必須のHTMLタグ一覧</title>
  <link rel="canonical" href="https://example.com/seo-html/">
  <meta name="description" content="...">
</head>

当サイトのURL移行で実際に行ったこと

URL正規化の効果は、当サイト自身の移行で確認済みです。scale-basics.comは2026年7月にNext.js（SSG）からWordPressへサイト基盤を移行し、記事URLを/blog/記事名/から/記事名/へ変更しました。このとき、旧URLから新URLへの301リダイレクトを全記事分設定し、canonicalは新URLに統一しています。移行にともなうインデックスの問題は発生していません。URL構造を変更する場面では、canonicalタグと301リダイレクトを併用して「正規のURLはどれか」を一貫して伝えることが実務上の要点です。

robotsメタタグ — クロール・インデックスの制御

robotsメタタグの役割と使いどころ

meta name=”robots”タグは、検索エンジンのクローラーに対して「このページをインデックスしてよいか」「ページ内のリンクをたどってよいか」を指示するためのタグです。robots.txtがサイト全体やディレクトリ単位でクロールを制御するのに対し、robotsメタタグはページ単位で制御できる点が異なります。

必要になる代表的な場面は、検索結果に表示したくないページがある場合です。サイト内検索の結果ページ、会員限定コンテンツのプレビュー、テスト用ページ、サンクスページなどが該当します。これらがインデックスされると検索結果にノイズが生まれ、サイト全体の品質評価にマイナスの影響を及ぼす可能性があります。使用できるディレクティブの全量はGoogle Search Centralのrobotsメタタグ解説で確認できます。

主要なディレクティブ一覧

robotsメタタグの主要ディレクティブ

ディレクティブ	意味	主な使いどころ
index / noindex	インデックスの許可／禁止	検索結果に出したくないページにnoindex
follow / nofollow	ページ内リンクをたどることの許可／禁止	noindex, followで評価の流れだけ維持
max-snippet	スニペットの最大文字数を指定	検索結果に表示されるテキスト量の制御
max-image-preview	画像プレビューの最大サイズを指定	大きな画像プレビューを許可するならlarge
max-video-preview	動画プレビューの最大秒数を指定	動画を含むページの表示制御

「noindex, follow」のように組み合わせれば、「ページ自体はインデックスしないが、ページ内のリンクはたどってほしい」という指示になります。

robotsメタタグのBefore/After

NG例（Before）:

<!-- NG: すべてのページに一律noindexを設定（サイト全体がインデックスされなくなる） -->
<meta name="robots" content="noindex, nofollow">

<!-- NG: テスト時のnoindexを本番で外し忘れ -->
<!-- 公開中の主要ページに残っている -->
<meta name="robots" content="noindex">

最も多い事故は、開発・ステージング環境で設定したnoindexを本番公開時に外し忘れるパターンです。noindexが残ったページは検索結果から消えるため、デプロイ前のチェックリストにrobotsメタタグの確認を必ず含めてください。

改善例（After）:

<!-- 通常の公開ページ：robotsメタタグの省略（デフォルトでindex, follow） -->
<!-- あえて記述する場合 -->
<meta name="robots" content="index, follow">

<!-- インデックスさせたくないページ：noindexだがリンクはたどらせる -->
<meta name="robots" content="noindex, follow">

<!-- スニペット表示を制御する場合 -->
<meta name="robots" content="max-snippet:150, max-image-preview:large">

OGPタグ — SNSシェア最適化と間接的SEO効果

OGPタグとは何か、なぜSEOに関係するのか

OGP（Open Graph Protocol）タグは、Webページの情報をSNSに適切に伝えるためのメタタグ群です。Facebook、X（旧Twitter）、LINEなどでURLがシェアされた際に、タイトル・説明文・画像がリッチなカード形式で表示されるのは、OGPタグが正しく設定されているからです。

OGPタグ自体はGoogleの検索ランキング要因ではありません。しかし、SNSでのシェアが拡散し、外部サイトからの被リンクやブランド指名検索の増加につながれば、間接的にSEO効果を発揮します。記事の「シェアされやすさ」を高めるOGPタグの整備は、コンテンツマーケティングにおいて投資対効果の高い施策です。仕様の詳細はOpen Graph Protocol公式サイトで確認できます。

必須のOGPタグと推奨タグ

最低限設定すべきは、og:title（ページタイトル）、og:description（説明文）、og:image（サムネイル画像）、og:url（正規URL）、og:type（ページ種別）の5つです。加えて、X向けにはtwitter:card、twitter:siteなどのカード専用タグも設定しておくと、Xでシェアされた際の表示品質が向上します。

og:imageのサイズは1200×630px（アスペクト比1.91:1）が最も汎用性の高い推奨サイズで、Facebook・X・LINEのいずれでも適切に表示されます。各SNSのデバッガーでの表示確認手順や画像設計のコツは、OGPの設定方法・画像サイズ・確認ツールの解説記事にまとめています。

OGPタグのBefore/After

NG例（Before）:

<!-- NG: OGPタグが一切ない -->
<head>
  <meta charset="UTF-8">
  <title>SEO対策のHTMLタグ一覧</title>
</head>

OGPタグがない場合、SNSプラットフォームはページのHTMLから情報を推測しますが、意図しないテキストや画像が表示されることがあります。シェアされた投稿の見栄えが悪いと、クリック率の低下や拡散の機会損失につながります。

改善例（After）:

<head>
  <meta charset="UTF-8">
  <title>SEO対策に必須のHTMLタグ一覧｜コード例付きチェックリスト</title>
  <meta name="description" content="SEO対策に重要なHTMLタグを優先度別に一覧で解説...">

  <!-- OGP基本タグ -->
  <meta property="og:title" content="SEO対策に必須のHTMLタグ一覧｜コード例付きチェックリスト">
  <meta property="og:description" content="SEO対策に重要なHTMLタグを優先度別に解説。コード例とチェックリスト付き。">
  <meta property="og:image" content="https://example.com/images/ogp-seo-html.png">
  <meta property="og:url" content="https://example.com/seo-html/">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">

  <!-- Xカード用タグ -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@your_account">
  <meta name="twitter:title" content="SEO対策に必須のHTMLタグ一覧">
  <meta name="twitter:description" content="重要HTMLタグをコード例付きで解説">
  <meta name="twitter:image" content="https://example.com/images/ogp-seo-html.png">
</head>

viewportメタタグ — モバイルSEOの必須設定

viewportが必須である背景

Googleは2019年からモバイルファーストインデックス（MFI）を段階的に導入し、2023年以降は全サイトが対象になりました。現在、Googleは全サイトのインデックスとランキング評価をモバイル版のページを基準に行っています。モバイルでの表示が正しく行われないページは、この時点で大きなハンデを負います。

viewportメタタグは、ブラウザに対して「表示領域の幅をデバイスの画面幅に合わせ、初期ズーム率を1倍にする」と指示するタグです。このタグがなければ、モバイルブラウザはPC向けの横幅（通常980pxなど）でレンダリングし、ページ全体が縮小された状態で表示されます。文字は小さく読みにくく、ボタンはタップしづらい——モバイルユーザビリティの評価を大きく下げる状態です。

viewportメタタグのBefore/After

NG例（Before）:

<!-- NG: viewportが設定されていない -->
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>

<!-- NG: user-scalable=noでズームを禁止 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

viewportがない場合はモバイル表示が破綻します。また、user-scalable=noやmaximum-scale=1.0を設定するとユーザーがページを拡大できなくなり、アクセシビリティの問題になるだけでなく、Lighthouseのアクセシビリティスコアも低下します。

改善例（After）:

<!-- 推奨設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

この1行で基本的なモバイル対応は完了です。すべてのページのhead要素に含まれていることを確認してください。viewportの設定に加えて、レスポンシブデザインの実装や画像の最適化を組み合わせることで、モバイルSEOの基盤が整います。

hreflangタグ — 多言語サイトの言語指定

hreflangタグが必要になるケース

hreflangタグは、同一コンテンツの言語・地域別バリエーションが存在する場合に、それぞれのURLの対応関係を検索エンジンに伝えるタグです。日本語版と英語版の同じ記事がある場合、hreflangタグを設定することで、日本のユーザーには日本語版を、英語圏のユーザーには英語版を検索結果に表示するようGoogleに指示できます。

日本語のみのサイトには原則として不要です。一方、海外展開を予定しているサービスサイトや多言語メディアでは、hreflangの適切な実装が検索流入の最大化に直結します。設定が不十分だと、英語圏のユーザーに日本語ページが表示されるといったミスマッチが起き、ユーザー体験を損ないます。

実装方法は3つあります。HTMLのhead要素内にlinkタグで記述する方法、HTTPヘッダーで返す方法、XMLサイトマップに記述する方法です。最も一般的なのはHTMLのlinkタグです。

hreflangタグのBefore/After

NG例（Before）:

<!-- NG: x-defaultがない -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/seo-guide/">
<link rel="alternate" hreflang="en" href="https://example.com/en/seo-guide/">

<!-- NG: 双方向の設定がない（日本語ページだけに設定し、英語ページには設定していない） -->

よくある間違いは、x-default（対応言語が見つからない場合のデフォルトページ）の指定忘れと、対になるすべてのページへの相互設定（双方向設定）の欠落です。双方向の設定がないと、Googleはhreflangの指定を無視することがあります。

改善例（After）:

<!-- 日本語ページ（/ja/seo-guide/）のhead内 -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/seo-guide/">
<link rel="alternate" hreflang="en" href="https://example.com/en/seo-guide/">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/seo-guide/">

<!-- 英語ページ（/en/seo-guide/）のhead内にも同じセットを記述 -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/seo-guide/">
<link rel="alternate" hreflang="en" href="https://example.com/en/seo-guide/">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/seo-guide/">

改善例では、x-defaultを含めた完全なセットを用意し、対になるすべてのページに同じ組み合わせのhreflangタグを設置しています。

2026年のHTML最適化 — AI検索とクロールの最新事情

生成AI検索に「特別なHTMLタグ対策」は不要 — Google公式ガイド

「AI Overviewsに引用されるための特別なタグやファイルが必要なのでは」という疑問には、Google自身が答えを出しています。Googleは2026年5月に生成AI検索向けの最適化を解説する公式ガイドを公開し、生成AI機能は既存の検索ランキング・品質システムに基づくため追加要件はなく、llms.txtの設置やコンテンツのチャンク化といった「AI向けの特別対応」は不要だと明言しました。詳細はGoogleの生成AI検索最適化ガイド公開を報じた解説記事で整理しています。

これはLLMO（大規模言語モデル最適化）やGEOといった呼称で語られる施策を検討している方にとって重要な前提です。本記事で扱ってきたtitle・見出し・セマンティックHTML・構造化データといった基本のマークアップこそが、AI検索でも評価される土台になります。

Googlebotが処理するのはHTML先頭から2MBまで

Googleは2026年3月、公式ブログでGooglebotのクロールと取得の仕組みを解説し、HTMLの取得上限がHTTPヘッダー込みで2MBであることを明らかにしました。上限を超えた部分はインデックス処理に渡されず、Googleからは見えません。だからこそ、title・meta・canonical・構造化データといった重要なタグはHTMLの上部に置き、重いCSSやJavaScriptは外部ファイルに切り出してHTML本体を軽く保つ設計が推奨されています。発表内容の全体はGooglebotの「2MBの壁」を解説したニュース記事を参照してください。

head内の並び順の目安を示します。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
  <meta name="description" content="...">
  <link rel="canonical" href="https://example.com/page/">
  <!-- 構造化データ・OGPなどの重要タグもHTML上部に置く -->
  <!-- 重いCSS/JSは外部ファイル化してHTML本体を軽く保つ -->
  <link rel="stylesheet" href="https://example.com/css/style.css">
  <script src="https://example.com/js/app.js" defer></script>
</head>

同じ発表では、サーバーの応答時間に目を配ることも挙げられています。応答速度の指標であるTTFBは0.8秒以内が目安とされており、当サイトの実測（2026年7月計測）ではTTFB平均0.19秒でした（curlによる3回計測）。HTMLを軽く保つことと応答の速いサーバーを使うことは、クロールとユーザー体験の両方に効きます。

AI検索での表示はSearch Consoleで計測できる

施策の結果を確認する環境も整いつつあります。Googleは2026年6月、Search Consoleに生成AIパフォーマンスレポートを追加すると発表しました。AI OverviewsやAI Mode、Discoverの生成AI機能で自サイトのURLが表示された回数を、URL別・国別・デバイス別に確認できる計測ビューです（まずは一部サイトへの段階提供）。機能の詳細と注意点はSearch Consoleの生成AIパフォーマンスレポート解説記事にまとめています。

HTMLタグを整備したら、通常の検索パフォーマンスとあわせてAI検索での露出も観測し、どのページが拾われているかを把握する——という改善サイクルが2026年の標準になっていくはずです。

SEO対策HTMLタグ総合チェックリスト

ここまで解説してきた各タグの設定ポイントを、ページ公開前に確認できるチェックリスト形式でまとめます。新しいページを公開するたびに、このリストで漏れがないか確認してください。

ページ公開前 HTMLタグ SEOチェックリスト

チェック項目	対象タグ	確認ポイント	チェック
titleタグは設定されているか	<title>	30〜35文字、ターゲットKWを先頭付近に配置、ページ固有の内容	□
meta descriptionは設定されているか	<meta name=”description”>	120〜160文字、ターゲットKWを含む、ページの内容を正確に要約	□
h1タグは1つだけか	<h1>	ページに1つだけ設置、titleタグと整合する内容	□
見出しの階層構造は正しいか	<h1>〜<h6>	レベルを飛ばさず順序通り、装飾目的で使っていない	□
すべての画像にalt属性があるか	<img alt>	具体的な説明、キーワード詰め込みなし、装飾画像はalt=””	□
画像にwidth/heightが設定されているか	<img>	CLS（レイアウトシフト）防止のためサイズを明示	□
内部リンクのアンカーテキストは適切か	<a href>	「こちら」ではなくリンク先の内容を表すテキスト	□
外部リンクに適切な属性が付いているか	<a href>	target=”_blank”にrel=”noopener noreferrer”を併記	□
canonicalタグは正しいURLを指しているか	<link rel=”canonical”>	絶対パス、正しいURL、1つだけ設置	□
robotsメタタグは意図通りか	<meta name=”robots”>	本番でnoindexが残っていないか、ステージング環境の設定を引き継いでいないか	□
OGPタグは設定されているか	og:title, og:image 等	og:imageは1200×630px、各SNSのデバッガーで表示確認済み	□
viewportメタタグがあるか	<meta name=”viewport”>	width=device-width, initial-scale=1.0 を設定	□
構造化データは設定されているか	JSON-LD	記事ページならArticle、FAQならFAQPageなど適切なスキーマ	□
重要タグはHTML上部にあるか	<head>内のタグ全般	title・meta・canonicalが2MBの取得上限に埋もれない位置にある	□
多言語対応の場合hreflangがあるか	<link rel=”alternate” hreflang>	双方向の設定、x-defaultの指定	□

このチェックリストに加えて、構造化データマークアップ完全ガイドを参考にJSON-LDを設定すると、リッチリザルト獲得のチャンスが広がります。HTMLタグの最適化は「一度やって終わり」ではなく、新規ページ作成時のテンプレートにチェックリストを反映し、既存ページはGoogle Search Consoleのデータを見ながら改善サイクルを回す——という継続的なプロセスに組み込むことで効果が積み上がります。

まとめ

本記事では、SEO対策において重要なHTMLタグを優先度別に整理し、それぞれの役割・書き方・よくある間違いを解説しました。最後に要点を振り返ります。

最優先で取り組むべきは、titleタグ、meta description、見出しタグ、aタグの4つです。titleタグは30〜35文字に収めてターゲットキーワードを先頭付近に配置する。meta descriptionは120〜160文字でページの内容とベネフィットを伝える。見出しタグはh1を1つだけ設置し、h2→h3→h4と階層を崩さない。アンカーテキストは「こちら」ではなくリンク先の内容を表す具体的なテキストにする。この4点だけでも、検索順位とCTRの土台は大きく変わります。

次に対応すべきは、imgのalt属性、canonicalタグ、robotsメタタグ、viewportメタタグです。alt属性は画像SEOとアクセシビリティの両面で必須です。canonicalタグは重複コンテンツによる評価分散を防ぎ、URL移行時には301リダイレクトとの併用が効きます。robotsメタタグは、テスト時のnoindexを本番で外し忘れる事故を防ぐため、デプロイ前チェックの対象に必ず含めてください。viewportメタタグは1行で済む設定ですが、モバイルファーストインデックスの前提条件です。

そして2026年の視点として、生成AI検索にも特別なHTML対策は不要であり、ここまでの基本がそのまま土台になるとGoogleが公式に明言していること、Googlebotが処理するHTMLは先頭から2MBまでであり重要タグを上部に置く設計が推奨されていることを押さえておきましょう。HTMLの最適化に特別なコストは要りません。本記事のコード例とチェックリストをテンプレートとして、自サイトの改善に取り組んでみてください。

執筆根拠: 本記事は2026年7月時点の情報に基づき、Google検索セントラルの公式ドキュメント・公式ブログ（SEOスターターガイド、robotsメタタグ仕様、Googlebotのクロール仕様、生成AI検索の最適化ガイド、Search Consoleの生成AIパフォーマンスレポート発表）および当サイトの実測データ（2026年7月計測。詳細はSEOに強いコーディングの実測レポート参照）をもとに執筆しています。