SEO対策で重要なHTMLタグ — 優先度別一覧表
SEOに関わるHTMLタグは数多くありますが、すべてを同じ優先度で扱う必要はありません。ここでは、検索順位・クリック率・クロール制御への影響度をもとに、3段階の優先度に分類します。
| 優先度 | タグ | 主な役割 | 影響範囲 |
|---|---|---|---|
| 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タグの書き方のポイント
titleタグの最適な文字数は、2026年3月現在のGoogle検索結果の表示仕様を基準にすると、PCで約30〜35文字、スマートフォンでも概ね同程度が目安です。これを超えると「…」で途中が省略されてしまい、伝えたいキーワードやメッセージが切れるリスクがあります。
実際にscale-basics.comでは、全ページのtitleタグを30〜35文字に統一するリライトを実施しました。その結果、Google Search Consoleで計測した平均CTRが約1.3%向上しました。特に効果が大きかったのは、タイトルの先頭にターゲットキーワードを配置し、後半に具体的なベネフィット（「〇〇付き」「完全ガイド」など）を添えるパターンです。
titleタグのBefore/After
NG例（Before）:
<title>株式会社〇〇 | サービス紹介 | SEO対策からWeb制作まで幅広くサポートする総合デジタルマーケティング企業</title>この例の問題点は3つあります。第一に、65文字以上あり検索結果で大幅に切れます。第二に、社名が先頭にあるためキーワードが後方に押しやられています。第三に、何のページなのかが分かりにくく、CTRの低下を招きます。
改善例（After）:
<title>SEO対策に必須のHTMLタグ一覧｜コード例付きチェックリスト</title>改善例では、ターゲットキーワード「SEO対策」「HTMLタグ」を先頭付近に配置し、全体を32文字に収めています。「コード例付き」「チェックリスト」という具体的なベネフィットも含まれており、ユーザーが「自分の求めている情報がありそうだ」と感じやすい構成です。
コピペ用テンプレート
<!-- titleタグの推奨テンプレート -->
<title>[ターゲットKW] + [補足KWまたはベネフィット]｜[サイト名]</title>
<!-- 記入例 -->
<title>SEO対策に必須のHTMLタグ一覧｜コード例付きチェックリスト</title>meta descriptionタグ — CTRを左右するスニペット
meta descriptionの役割と検索順位への影響
meta descriptionは、検索結果のタイトル直下に表示される説明文（スニペット）のソースとなるタグです。Googleは公式に「meta descriptionはランキング要因ではない」と明言しています。しかし、だからといって軽視してよいわけではありません。なぜなら、魅力的なスニペットはCTRを大きく改善し、CTRの向上は間接的に検索順位にもプラスの影響を及ぼすからです。
また、Googleはページ内のコンテンツから自動的にスニペットを生成する場合がありますが、meta descriptionを明示的に設定しておけば、意図した内容が表示される確率が高まります。特に商品ページやランディングページでは、コンバージョンにつながる訴求文をmeta descriptionに含めることで、質の高いトラフィックを呼び込めます。
最適な文字数と書き方
2026年3月時点で、Google検索結果に表示されるスニペットの文字数目安は、PCで約120〜160文字、スマートフォンではやや短く表示される傾向があります。そのため、最も伝えたい情報は最初の80文字以内に含めるのが安全です。
効果的なmeta descriptionの書き方には以下のパターンがあります。まず、ページの内容を正確に要約すること。次に、ユーザーが得られるメリットを具体的に提示すること。最後に、行動を促すフレーズ（「解説します」「紹介します」「チェックリスト付き」など）を含めることです。
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） — コンテンツ構造を検索エンジンに伝える
見出しタグが持つ2つの役割
見出しタグ（h1〜h6）は、ページのコンテンツ構造を検索エンジンとユーザーの双方に伝える役割を持っています。検索エンジンにとっては、見出しタグの階層構造がページの論理構成を理解する手がかりになります。ユーザーにとっては、見出しを拾い読みすることで記事全体の流れを素早く把握できるナビゲーション機能を果たします。
特に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の階層を守って記述しています。すべての見出し的な要素に適切な見出しタグを使い、検索エンジンもユーザーもコンテンツ構造を正確に把握できる状態です。HTMLのセマンティクスに基づいた記述方法について、さらに詳しくはSEO対策済みHTMLテンプレートの記事で紹介しています。
imgタグのalt属性 — 画像SEOとアクセシビリティの基本
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=”lazy”で遅延読み込みを設定することでCore Web Vitalsのスコア改善にも配慮しています。
aタグ（リンク） — SEO評価を伝達するアンカーテキスト
aタグがSEOにおいて重要な理由
aタグ（アンカータグ）は、ページ間のリンクを作成するHTMLタグです。SEOにおいてリンクは「ページの信頼性・関連性を投票する仕組み」として機能します。外部サイトからの被リンクが外部投票であるのに対し、サイト内の内部リンクは「このページとあのページは関連がある」というシグナルを検索エンジンに伝える内部投票の役割を果たします。
特に重要なのがアンカーテキスト（リンクテキスト）です。アンカーテキストは、リンク先ページの内容を検索エンジンに伝える手がかりとなります。「こちら」「ここをクリック」といった曖昧なアンカーテキストではなく、リンク先の内容を的確に表すキーワードを含んだ自然な文言を使うことが推奨されます。
内部リンクの設計とaタグの最適化
内部リンクを設計する際は、ユーザーの情報探索の流れに沿って、関連性の高いページ同士を結びつけます。無関係なページへのリンクを大量に設置しても効果はなく、むしろ「リンクの希薄化」を招いて各リンクの価値が下がります。
外部リンクについては、信頼性の高い情報源を適切に引用することでページの専門性を示せます。ただし、ユーザー投稿コンテンツ（コメント欄など）に含まれるリンクや、広告リンクにはrel=”nofollow”やrel=”sponsored”を設定し、SEO評価の不適切な伝達を防ぎましょう。
aタグのBefore/After
NG例（Before）:
<!-- NG: アンカーテキストが曖昧 -->
<p>SEOに強いコーディングについては<a href="/blog/seo-coding/">こちら</a>をご覧ください。</p>
<!-- NG: URLがそのまま -->
<p>詳しくは <a href="https://example.com/guide">https://example.com/guide</a> を参照。</p>
<!-- NG: 同じアンカーテキストで異なるページにリンク -->
<a href="/page-a/">詳しくはこちら</a>
<a href="/page-b/">詳しくはこちら</a>改善例（After）:
<!-- 良い例：リンク先の内容を表すアンカーテキスト -->
<p>HTMLタグの最適化と合わせて、<a href="/blog/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>
<!-- 良い例：nofollowの適切な使用 -->
<a href="https://example.com/sponsored" rel="sponsored noopener noreferrer" target="_blank">提携サービスの紹介ページ</a>改善例では、アンカーテキストからリンク先の内容が推測できるようになっています。外部リンクにはtarget=”_blank”とrel=”noopener noreferrer”を設定し、セキュリティにも配慮しています。内部リンク戦略を含めたWeb制作にSEOを組み込む方法についても、詳しくはこちらの記事で解説しています。
canonicalタグ — 重複コンテンツの正規化
canonicalタグが必要になる場面
link rel=”canonical”タグは、同一または類似のコンテンツが複数のURLで表示される場合に、「正規のURL（正本）はこれである」と検索エンジンに宣言するためのタグです。重複コンテンツはSEOにおいて「クロールバジェットの浪費」「被リンク評価の分散」「意図しないURLのインデックス」といった問題を引き起こすため、canonicalタグによる正規化は非常に重要です。
具体的にcanonicalタグが必要になるのは、次のようなケースです。パラメータ付きURL（例: ?utm_source=twitter）と素のURLが共存する場合。httpとhttps、wwwありとwwwなしの両方がアクセス可能な場合。ECサイトで同一商品がカテゴリ別の異なるURLで表示される場合。ページネーション（一覧ページの2ページ目以降）で全ページを1ページ目に正規化したい場合などです。
canonicalタグの正しい使い方
canonicalタグはHTMLのhead要素内に記述します。URLは絶対パスで記述するのが推奨されています。相対パスでも動作しますが、環境による解釈の違いを避けるため、絶対パスを使うのが安全です。また、canonicalタグは「ヒント」であり「命令」ではないということを理解しておくことが重要です。Googleは、canonicalタグの指定とページ内容の実態が大きく異なる場合、canonicalタグを無視して独自の判断を下すことがあります。
canonicalタグのBefore/After
NG例（Before）:
<!-- NG: 相対パスで指定 -->
<link rel="canonical" href="/blog/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/blog/seo-html/">
<!-- 良い例：パラメータ付きページから正規URLへ -->
<!-- https://example.com/blog/seo-html/?utm_source=twitter 上で以下を記述 -->
<link rel="canonical" href="https://example.com/blog/seo-html/">
<!-- 良い例：head要素内の適切な位置に1つだけ配置 -->
<head>
<meta charset="UTF-8">
<title>SEO対策に必須のHTMLタグ一覧</title>
<link rel="canonical" href="https://example.com/blog/seo-html/">
<meta name="description" content="...">
</head>scale-basics.comでは、WordPressのパーマリンク変更時にcanonicalタグの設定漏れにより、一時的に旧URLと新URLの両方がインデックスされた経験があります。その際、全ページのcanonicalタグを新URLに統一し、旧URLから301リダイレクトも併設することで、約2週間でインデックスの正規化が完了しました。
robotsメタタグ — クロール・インデックスの制御
robotsメタタグの役割と使いどころ
meta name=”robots”タグは、検索エンジンのクローラーに対して「このページをインデックスしてよいか」「ページ内のリンクをたどってよいか」を指示するためのタグです。robots.txtがサイト全体やディレクトリ単位でクロールを制御するのに対し、robotsメタタグはページ単位で制御できる点が異なります。
robotsメタタグが必要になる代表的な場面は、検索結果に表示したくないページがある場合です。たとえば、サイト内検索の結果ページ、会員限定コンテンツのプレビュー、テスト用ページ、サンクスページなどです。これらのページがインデックスされると、検索結果にノイズが生まれ、サイト全体の品質評価にマイナスの影響を及ぼす可能性があります。
使用できるディレクティブの詳細は、Google Search Centralのrobotsメタタグの解説で網羅的に確認できます。
主要なディレクティブの一覧
robotsメタタグで使用頻度の高いディレクティブを整理します。indexはページのインデックスを許可、noindexはインデックスを禁止、followはページ内のリンクのたどりを許可、nofollowはリンクのたどりを禁止します。これらを組み合わせて「noindex, follow」のように記述すれば、「ページ自体はインデックスしないが、ページ内のリンクはたどってほしい」という指示になります。
2026年現在、Googleではmax-snippet（スニペットの最大文字数）、max-image-preview（画像プレビューの最大サイズ）、max-video-preview（動画プレビューの最大秒数）といったディレクティブもサポートしています。検索結果での表示を細かく制御したい場合に活用できます。
robotsメタタグのBefore/After
NG例（Before）:
<!-- NG: すべてのページに一律noindexを設定（サイト全体がインデックスされなくなる） -->
<meta name="robots" content="noindex, nofollow">
<!-- NG: テスト時のnoindexを本番で外し忘れ -->
<!-- 公開中の主要ページに残っている -->
<meta name="robots" content="noindex">最もよくある事故は、開発・ステージング環境でnoindexを設定し、本番公開時に外し忘れるパターンです。scale-basics.comでもサイトリニューアル時に一部ページでnoindexの解除漏れがあり、約1週間インデックスから消えた経験があります。デプロイ前のチェックリストに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タグの最適化は投資対効果の高い施策です。OGPの仕様詳細はOpen Graph Protocol公式サイトで確認できます。
必須のOGPタグと推奨タグ
最低限設定すべきOGPタグは、og:title（ページタイトル）、og:description（説明文）、og:image（サムネイル画像）、og:url（正規URL）、og:type（ページ種別）の5つです。加えて、X（旧Twitter）向けにはtwitter:card、twitter:siteなどのTwitterカード専用タグも設定しておくと、Xでシェアされた際の表示品質が向上します。
og:imageのサイズは、2026年3月時点では1200×630px（アスペクト比1.91:1）が最も汎用性が高い推奨サイズです。これはFacebook、X、LINEのいずれでも適切に表示されるサイズです。
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/blog/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年以降は全サイトが対象となりました。2026年現在、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の適切な実装が検索流入の最大化に直結します。設定が不十分だと、英語圏のユーザーに日本語ページが表示されたり、逆に日本のユーザーに英語ページが表示されたりして、ユーザー体験を損ないます。
hreflangタグの実装方法
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: 双方向の設定がない（日本語ページだけに設定し、英語ページには設定していない） -->hreflangタグのよくある間違いとして、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タグを設置しています。
SEO対策HTMLタグ総合チェックリスト（テーブル）
ここまで解説してきた各タグの設定ポイントを、ページ公開前に確認できるチェックリスト形式でまとめます。新しいページを公開するたびに、このリストを使って漏れがないか確認してください。
| チェック項目 | 対象タグ | 確認ポイント | チェック |
|---|---|---|---|
| titleタグは設定されているか | <title> | 30〜35文字、ターゲットKWを先頭付近に配置、ページ固有の内容 | □ |
| meta descriptionは設定されているか | <meta name=”description”> | 80〜150文字、ターゲット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など適切なスキーマ | □ |
| 多言語対応の場合hreflangがあるか | <link rel=”alternate” hreflang> | 双方向の設定、x-defaultの指定 | □ |
このチェックリストに加えて、構造化データマークアップ完全ガイドを参考に、JSON-LDによる構造化データの設定も行うとリッチリザルト獲得のチャンスが広がります。
HTMLタグ最適化の効果を最大化するために
HTMLタグの最適化は、SEO対策の「基盤整備」に位置づけられます。いくら良質なコンテンツを作っても、HTMLの構造が正しくなければ検索エンジンは内容を正確に評価できません。逆に、HTMLタグだけを完璧にしても、コンテンツ自体が薄ければ上位表示は難しいでしょう。
重要なのは、HTMLタグの最適化を「一度やって終わり」ではなく、継続的なプロセスとして組み込むことです。新規ページ作成時のテンプレートに上記のチェックリストを反映し、既存ページは定期的にGoogle Search Consoleのデータを見ながら改善サイクルを回していきましょう。コンテンツSEOの戦略と組み合わせることで、技術面と内容面の両輪でSEOの成果を高めることができます。
まとめ
本記事では、SEO対策において重要なHTMLタグを優先度別に整理し、それぞれの役割・書き方・よくある間違いを解説しました。最後に要点を振り返ります。
まず最優先で取り組むべきは、titleタグ、meta description、見出しタグ、aタグの4つです。これらは検索順位とCTRに直接影響するため、まだ最適化していないページがあれば今すぐ対応する価値があります。titleタグは30〜35文字に収め、ターゲットキーワードを先頭付近に配置しましょう。meta descriptionは150文字以内でページの内容とベネフィットを伝え、クリックを促す文言にします。見出しタグはh1を1つだけ設置し、h2→h3→h4と階層を崩さないようにします。アンカーテキストは「こちら」ではなく、リンク先の内容を表す具体的なテキストにします。
次に対応すべきは、imgのalt属性、canonicalタグ、robotsメタタグ、viewportメタタグです。alt属性は画像SEOとアクセシビリティの両面で重要です。canonicalタグは重複コンテンツによる評価分散を防ぎます。robotsメタタグは、テスト時のnoindexを本番で外し忘れるという事故を防ぐため、デプロイ前のチェック対象に必ず含めてください。viewportメタタグは1行で済む設定ですが、モバイルSEOの大前提です。
さらに、OGPタグはSNSシェアの見栄えを整え、間接的なSEO効果をもたらします。多言語サイトではhreflangタグの双方向設定を忘れずに行いましょう。加えて、構造化データ（JSON-LD）の実装はリッチリザルト獲得のために強く推奨されます。
SEO対策におけるHTMLの最適化は、特別な技術やコストを必要としません。正しい知識に基づいて1つずつ実装し、チェックリストで漏れを防ぐだけで、検索パフォーマンスの着実な改善が期待できます。本記事のコード例とチェックリストをテンプレートとして活用し、自サイトのHTML改善に取り組んでみてください。
