「SEOのためにHTMLをどう書けばよいのか分からない」「titleやmetaタグを設定しているが、正しいのか不安」と感じているWeb担当者は多いのではないでしょうか。
HTMLタグは、検索エンジンにページの内容や構造を正確に伝えるための重要な手段です。タグを正しく使い分けることで、検索エンジンにページを理解してもらいやすくなり、検索結果での見え方も整えられます。
本記事では、SEOにおけるHTMLの役割、head内と本文で使う重要なタグ12種類の書き方、記述例、効果がないタグや注意点、構造化データ、確認方法、CMSでの対策のポイントまでを順番に解説します。
まずは記事全体の要点をまとめました。気になる項目をクリックすると、該当する見出しに移動します。
| 確認したいポイント | 結論 | 詳細 |
|---|---|---|
| SEOにおけるHTMLの役割とは？ | ページの意味と構造を伝えること | タグで見出しや段落、リンクを区別すると、検索エンジンがページの主題と構成を正しく理解できます。 |
| head内で重要なタグは？ | title・description・canonicalなど | 検索結果の表示やインデックスの扱いを決めるタグです。ページごとに固有の内容を設定します。 |
| 本文で重要なタグは？ | hタグ・aタグ・alt属性など | 見出しの階層、リンク、画像の説明、リストや表を正しく使い、内容の関係性を伝えます。 |
| 実際にはどう書けばいい？ | headと本文の記述例を参考にする | head内にtitleやmeta情報、本文にh1から始まる見出しと段落を論理的な順番で記述します。 |
| 効果がないタグや注意点は？ | meta keywordsは不要で詰め込みはNG | Googleはmeta keywordsを使っていません。装飾目的の見出しやキーワードの詰め込みも避けます。 |
| 構造化データは必要？ | ページの情報を補足できる | JSON-LDで記事や商品などの情報を記述すると、検索エンジンが内容を理解しやすくなります。 |
| 正しく書けているか確認するには？ | ソース・URL検査・ツールで点検 | ページのソースや開発者ツールで記述を確認し、Search ConsoleでGoogleの認識を確かめます。 |
| CMSで対策するポイントは？ | テーマの出力と運用ルールを確認 | テーマやプラグインが出力するタグを確認し、記事ごとにtitleや見出しを設定するルールを決めます。 |
| ＼ サイトのHTML、SEOに沿って書けていますか？ ／ ・titleやmeta descriptionが全ページで同じになっている・見出しタグが装飾目的で使われている気がする・内部対策のどこから手をつけるべきか判断できない 楽々Editでは、SEOコンサルタントがサイトの内部設定を確認し、HTMLを含む技術的な課題と改善の優先順位をレポートでお伝えしています。 ≫ 無料SEO診断を申し込む |
SEOにおけるHTMLの役割とは？
HTMLとは、Webページの文章や画像に「見出し」「段落」「リンク」といった意味や役割を与えるための言語です。ブラウザはHTMLを読み取ってページを表示し、検索エンジンもHTMLをもとにページの内容を理解しています。
SEOにおけるHTMLの役割は、検索エンジンにページの主題と構造を正確に伝えることです。HTMLの書き方は、SEOの内部対策の基本にあたります。内部対策の全体像は、次の記事で整理しています。
関連記事：SEO内部対策とは？やるべき施策一覧と外部対策との違いをわかりやすく解説
検索エンジンにページの意味を伝える
検索エンジンは、人のようにページの見た目から内容を判断するのではなく、HTMLタグを手がかりに、どこが見出しで、どこが本文で、どれがリンクなのかを読み取ります。
見た目では大きな文字でも、見出しタグを使っていなければ見出しとは認識されにくくなります。逆に、装飾のために見出しタグを使うと、ページの構造が正しく伝わりません。見た目ではなく、意味に合ったタグを選ぶことが基本です。
正しいHTMLはユーザーにも読みやすい
見出しや段落、リストが適切に使い分けられたページは、ユーザーにとっても内容を把握しやすいページになります。スクリーンリーダーなどの支援技術も、HTMLの構造をもとに読み上げを行います。
検索エンジンのためだけでなく、すべての読み手にとって分かりやすいページをつくることが、結果としてSEOの評価にもつながります。
head内で設定するSEOに重要なHTMLタグ
HTMLのhead要素には、ページのタイトルや説明文、インデックスの扱いなど、ページ全体に関する情報を記述します。画面には表示されませんが、検索結果での見え方や検索エンジンの処理に大きく影響します。
Googleは、サポートしているmetaタグとHTML属性の一覧を公開しています。ここでは、その中から特に重要な5つのタグを紹介します。
参照：Google がサポートしているメタタグと HTML 属性｜Google 検索セントラル
1. titleタグ
titleタグは、ページのタイトルを指定するタグで、検索結果に表示されるタイトルの主な情報源になります。サイト内のすべてのページに、内容を表す固有のタイトルを設定しましょう。
<title>SEOに効果的なHTMLタグの書き方｜サイト名</title>
Googleは、タイトルを簡潔にし、キーワードの詰め込みや全ページで同じ文言の繰り返しを避けるよう求めています。文字数の上限は示されていませんが、検索結果では途中で省略されることがあるため、狙うキーワードを前半に入れ、30〜35文字程度にまとめるのが一般的です。キーワードの入れ方は、次の記事で解説しています。
関連記事：SEOキーワードの入れ方とは？効果的なキーワード設定のコツとSEOの関係性
2. meta description
meta descriptionは、ページの内容を要約した説明文を指定するタグです。検索結果のタイトルの下に表示される説明文として使われることがあり、クリックされるかどうかに影響します。
<meta name=”description” content=”SEOに効果的なHTMLタグの種類と書き方を解説します。”>
meta descriptionは検索順位を直接決める要素ではありませんが、ページの内容が分かる説明文はクリック率の向上につながります。検索結果で省略されにくいよう、全角120文字前後を目安に要点を先に書きましょう。クリック率の考え方は、次の記事が参考になります。
関連記事：SEO対策におけるクリック率（CTR）とは？検索順位別の平均値と改善方法を解説
3. canonicalタグ
canonicalタグは、内容が同じ、または非常に似ている複数のURLがある場合に、正規のURLを検索エンジンに伝えるタグです。パラメータ付きのURLや、PC用とスマートフォン用でURLが異なる場合などに使います。
<link rel=”canonical” href=”https://example.com/page/”>
指定するURLは、相対パスではなく「https://」から始まる絶対URLで記述するのが基本です。canonicalはGoogleにとってヒントとして扱われるため、内部リンクやサイトマップのURLもそろえておきましょう。重複したページの扱い方は、次の記事で解説しています。
関連記事：重複コンテンツの対策方法とは？SEOへの影響とチェック方法・正しい直し方を解説
4. meta robots
meta robotsは、検索エンジンに対して、ページをインデックスに登録するか、ページ内のリンクをたどるかを指示するタグです。何も指定しない場合は、インデックスに登録し、リンクもたどる扱いになります。
<meta name=”robots” content=”noindex”>
検索結果に表示させたくないサンクスページや、サイト内検索の結果ページなどに「noindex」を指定します。重要なページに誤って設定すると検索結果から消えてしまうため、公開時には必ず確認しましょう。
5. meta viewport
meta viewportは、スマートフォンなどの画面の幅に合わせてページを表示させるためのタグです。Googleはスマートフォン向けの表示を基準にページを評価しているため、モバイル対応の基本となる設定です。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
この指定がないと、スマートフォンでPC向けの表示が縮小されて表示され、文字が小さく読みにくくなります。レスポンシブデザインのサイトでは、必ず設定しておきましょう。
本文で使うSEOに効果的なHTMLタグ
body要素の中では、見出し、段落、リンク、画像、リスト、表などをタグで区別して記述します。本文のタグは、ページの構成と内容の関係を検索エンジンに伝える役割を持っています。
ここでは、本文でSEOの観点から特に意識したい7つのタグを紹介します。いずれも、見た目ではなく意味に合わせて使うことが大切です。
6. 見出しタグ（h1〜h6）
見出しタグは、ページの見出しを示すタグで、h1からh6まで6段階の階層があります。h1はページの主題、h2は大きな章、h3はその中の節というように、階層に沿って使います。
<h1>SEOに効果的なHTMLタグ</h1>
<h2>head内で設定するタグ</h2>
<h3>titleタグ</h3>
h2の次にいきなりh4を使うなど、階層を飛ばすのは避けましょう。Googleは複数のh1があっても問題ないとしていますが、ページの主題を明確にするため、h1は1つにまとめるのが一般的です。見出しの構成の考え方は、次の記事が参考になります。
関連記事：SEO記事構成の作り方とは？検索上位を獲得する構成案の手順とテンプレートを解説
7. aタグ（リンク）
aタグは、他のページへのリンクを設定するタグです。検索エンジンは、aタグのhref属性に指定されたURLをたどって新しいページを見つけ、リンクの文言からリンク先の内容を判断します。
<a href=”https://example.com/seo/”>SEO対策の基本</a>
リンクの文言（アンカーテキスト）には、「こちら」ではなく、リンク先の内容が分かる言葉を使いましょう。広告や有料のリンクには「rel=”sponsored”」、ユーザーが投稿したコメント内のリンクには「rel=”ugc”」を付けて、リンクの性質を伝えます。アンカーテキストの書き方は、次の記事で解説しています。
関連記事：アンカーテキストとは？SEO効果と正しい書き方・注意点を例つきで解説
8. img要素のalt属性
alt属性は、画像の内容を文章で説明するための属性です。検索エンジンは画像を見て内容を判断しにくいため、alt属性の文章を手がかりにします。画像が表示されない場合や、音声読み上げを使う人にも内容が伝わります。
<img src=”tag-list.png” alt=”SEOに効果的なHTMLタグの一覧表” width=”800″ height=”450″>
altには、画像の内容を簡潔に具体的に書きましょう。キーワードを並べるだけの記述は避けます。width属性とheight属性で画像の大きさを指定しておくと、読み込み時に画面がずれるのを防げます。
9. リストタグ（ul・ol・li）
リストタグは、箇条書きや手順のように、並列する項目や順番のある項目をまとめるタグです。順番のない箇条書きにはul、順番のある手順にはolを使い、各項目をliで囲みます。
<ol>
<li>キーワードを決める</li>
<li>構成をつくる</li>
</ol>
リストを使うと、項目同士の関係が検索エンジンに伝わりやすくなり、読者にとっても要点を把握しやすくなります。手順や比較のポイントを整理するときに活用しましょう。
10. tableタグ（表）
tableタグは、料金の比較や仕様の一覧など、行と列で整理された情報を表すタグです。見出しのセルにはth、データのセルにはtdを使い、表の構造を正しく記述します。
表を画像にしてしまうと、検索エンジンが中の文字を読み取りにくくなります。比較や一覧の情報は、HTMLの表で記述しておきましょう。レイアウトを整える目的で表を使うのは避けてください。
11. strongタグ
strongタグは、文章の中で特に重要な部分を示すタグです。見た目が太字になるだけのbタグと異なり、内容の重要性を意味として伝えます。
<p>titleタグは<strong>ページごとに固有の内容</strong>にします。</p>
強調の多用は、どこが重要なのかを分かりにくくします。1つの段落で強調するのは、読者に必ず伝えたい部分だけにとどめましょう。
12. blockquoteタグ（引用）
blockquoteタグは、他のサイトや文献から文章を引用していることを示すタグです。引用した部分を明確に区別することで、自分の文章と引用元の文章が混同されるのを防げます。
引用する場合は、引用元を明記し、自分の解説を主体にすることが大切です。引用だけで構成されたページは、独自の価値が少ないと判断されるおそれがあります。
| ＼ HTMLを含む内部対策を整理したい方へ ／ ・どのタグから見直せばよいか優先順位を知りたい・社内でSEOの方針を説明する資料がほしい・制作会社に依頼する前に、必要な対策を把握したい 楽々Editの資料では、SEO支援の進め方や内部施策の考え方、これまでの支援実績をまとめてご紹介しています。社内での検討資料としてご活用ください。 ≫ サービス資料をダウンロードする |
SEOを意識したHTMLの記述例
ここまで紹介したタグを組み合わせると、SEOを意識したHTMLの基本的な形になります。実際の記述例を見ながら、各タグをどこに配置するかを確認しましょう。
記述例はあくまで基本の形です。サイトの構成や使っているCMSに合わせて、必要なタグを取り入れてください。
head部分の記述例
head部分には、文字コード、表示領域、タイトル、説明文、正規URLの順に記述するのが一般的です。headの中は正しいHTMLの形式で記述し、タグの閉じ忘れがないようにしましょう。
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>SEOに効果的なHTMLタグの書き方｜サイト名</title>
<meta name=”description” content=”SEOに効果的なHTMLタグの種類と書き方を解説します。”>
<link rel=”canonical” href=”https://example.com/seo-html/”>
</head>
文字コードはUTF-8で指定するのが推奨されています。titleとmeta descriptionは、ページごとに内容に合わせて書き換えることが大切です。
本文の記述例
本文では、h1でページの主題を示し、h2、h3と階層に沿って見出しを配置します。見出しの下には段落やリスト、画像を内容に合わせて配置しましょう。
<body>
<h1>SEOに効果的なHTMLタグ</h1>
<p>HTMLタグの役割と書き方を解説します。</p>
<h2>head内で設定するタグ</h2>
<h3>titleタグ</h3>
<p>titleタグは<strong>ページごとに固有の内容</strong>にします。</p>
<img src=”title.png” alt=”titleタグの記述例”>
</body>
段落はpタグ、強調はstrongタグというように、意味に合ったタグを選ぶことがポイントです。見出しの中に長い文章を入れたり、段落の代わりに見出しタグを使ったりしないよう注意しましょう。
SEO効果がない、または注意が必要なHTML
HTMLの中には、かつてはSEOに効果があるとされていたものの、現在のGoogleでは使われていないものや、使い方を誤ると逆効果になるものがあります。古い情報のまま設定を続けないよう、代表的な例を確認しておきましょう。
いずれも、検索エンジンをだます目的ではなく、読者に正しく内容を伝える目的でHTMLを書くことが基本です。
meta keywordsはGoogleで使われていない
meta keywordsは、ページに関連するキーワードを列挙するためのタグです。Googleは、このタグをインデックス登録や検索順位に使用していないと明言しています。
設定していても害はありませんが、時間をかけて記述する必要はありません。キーワードは、titleや見出し、本文の中で自然に使うことが大切です。
見出しタグを装飾目的で使わない
文字を大きくしたい、目立たせたいという理由で見出しタグを使うと、ページの構造が検索エンジンに正しく伝わらなくなります。見出しの見た目を変えたい場合は、CSSで調整しましょう。
サイドバーやフッターなど、本文以外の部分で見出しタグを多用しているテーマもあります。本文の見出し構造が埋もれていないか確認しておくと安心です。
キーワードを詰め込まない
titleやalt属性、見出しに同じキーワードを不自然に繰り返して入れることは、Googleのスパムに関するポリシーに反する行為です。読みにくくなるだけでなく、評価を下げる原因になります。
キーワードは、読者にとって自然な文章の中で使います。背景と同じ色の文字でキーワードを隠すといった手法も、明確に禁止されています。
重要なタグはHTMLに直接記述する
titleやmeta robots、canonicalなどの重要なタグをJavaScriptで追加・変更すると、検索エンジンが意図どおりに読み取れない場合があります。Googleも、JavaScriptでmetaタグを挿入・変更することはできるだけ避けるよう求めています。
特に、noindexをJavaScriptで外すような実装は、ページがインデックスに登録されない原因になります。重要なタグは、サーバーから返すHTMLに直接記述しておきましょう。
| ＼ HTMLの修正を任せられる体制はありますか？ ／ ・テンプレートのHTMLを修正できる担当者がいない・CMSやプラグインの設定変更に不安がある・内部施策を社内で回せるようになりたい 楽々Editでは、HTMLを含む内部施策の実行代行から、社内で運用できる体制づくりまで支援しています。設定作業だけでなく、判断基準の共有も行います。 ≫ SEO内部施策代行・内製化支援の詳細を見る |
構造化データでページの情報を補足する
構造化データとは、「このページは記事である」「この数字は商品の価格である」といった情報を、検索エンジンが理解しやすい決まった形式で記述したものです。HTMLタグだけでは伝えきれない情報を補足できます。
正しく記述された構造化データは、検索結果にパンくずリストや商品の価格などを表示する「リッチリザルト」の対象になります。HTMLとあわせて押さえておきたい要素です。
JSON-LDで記述する
構造化データには複数の形式がありますが、GoogleはHTMLとは別のscript要素にまとめて記述できるJSON-LD形式を推奨しています。本文のHTMLを書き換えずに追加できるため、管理しやすいのが特徴です。
<script type=”application/ld+json”>
{“@context”: “https://schema.org”, “@type”: “Article”, “headline”: “SEOに効果的なHTMLタグ”}
</script>
記事、パンくずリスト、商品、店舗情報、組織情報など、ページの種類に合ったものを選んで記述します。それぞれの種類には必須の項目が決められているため、Googleのドキュメントで確認しながら設定しましょう。
表示内容と一致させて記述する
構造化データには、ページに表示されている内容と同じ情報を記述する必要があります。ページに掲載していないレビューの評価や、表示価格と異なる金額を記述することは、Googleのポリシーで認められていません。
記述した構造化データは、Googleのリッチリザルトテストで正しく読み取れるかを確認できます。公開前に必ずテストしてから反映しましょう。
HTMLがSEOに沿っているか確認する方法
HTMLは画面の見た目からは確認できないため、ツールを使って記述内容を点検することが欠かせません。ここでは、費用をかけずに始められる3つの確認方法を紹介します。
新しいページを公開したときや、テンプレートを変更したときは、必ず確認する習慣をつけましょう。
ページのソースと開発者ツールで確認する
ブラウザでページを右クリックして「ページのソースを表示」を選ぶと、HTMLの記述をそのまま確認できます。Ctrl+F（MacではCommand+F）で「title」「description」「canonical」などを検索すると、設定内容をすぐに見つけられます。
開発者ツールを使えば、見出しの階層や画像のalt属性などを、画面の要素と対応させながら確認できます。JavaScriptで書き換えられた後の状態も確認できる点が特徴です。
Search ConsoleのURL検査で確認する
Search ConsoleのURL検査ツールでは、Googlebotが実際に取得したHTMLや、インデックスへの登録状況を確認できます。noindexやcanonicalがGoogleにどう認識されているかも分かります。
設定したはずのタグが反映されていない場合は、この画面で確認するのが確実です。ページがインデックスに登録されない原因の切り分けは、次の記事で解説しています。
関連記事：Googleにインデックスされない原因は？確認方法と今すぐできる対策をわかりやすく解説
チェックツールでまとめて確認する
SEOのチェックツールを使うと、titleやmeta description、見出し、alt属性などの設定状況を一覧で確認できます。タイトルの重複や説明文の未設定など、ページ数が多いと見落としやすい問題を効率よく見つけられます。
無料で使えるツールも多いため、まずは主要なページから点検してみましょう。目的に合ったツールの選び方は、次の記事で紹介しています。
関連記事：SEO内部対策チェックツールとは？無料・有料のおすすめツールと活用法を解説
CMSでHTMLのSEO対策を進めるポイント
WordPressなどのCMSを使っている場合、HTMLを直接書かなくても、テーマやプラグイン、管理画面の設定でSEOに必要なタグを出力できます。一方で、自動で出力される内容を把握しないまま運用すると、思わぬ問題が起きることがあります。
ここでは、CMSでHTMLのSEO対策を進めるための3つのポイントを紹介します。
テーマやテンプレートの出力を確認する
CMSのテーマによっては、記事のタイトルがh1ではなくh2で出力されていたり、サイト名が全ページでh1になっていたりすることがあります。導入時や変更時に、主要なページの見出しの出力を確認しておきましょう。
パンくずリストや構造化データ、canonicalなどを自動で出力するテーマも多くあります。プラグインと重複して出力されていないかもあわせて確認します。
SEOプラグインでtitleとmeta descriptionを設定する
SEOプラグインを使うと、記事ごとにtitleやmeta description、noindexなどを管理画面から設定できます。HTMLの知識がない担当者でも、必要なタグを正しく設定しやすくなります。
設定を空欄にすると、自動で生成された文章が使われることがあります。重要なページは、内容に合わせて手動で設定しておきましょう。
記事作成時のルールを決める
複数の担当者で記事を作成する場合は、見出しの階層、画像のalt属性、リンクの文言などのルールを事前に決めておくことが大切です。担当者によって書き方がばらつくと、サイト全体の構造が乱れます。
公開前のチェック項目にHTMLの確認を入れておくと、ミスを防げます。HTMLを含む内部施策の具体的な手法は、次の記事でまとめて整理しています。
関連記事：SEO内部施策とは?｜3つの基本施策と15の効果的手法まとめ
| ＼ HTMLの課題を第三者の目で点検しませんか？ ／ ・titleや見出しが正しく出力されているか不安がある・テーマやプラグインの設定がSEOに合っているか確認したい・検索順位が伸びない原因を技術面から確かめたい 楽々Editの無料SEO診断では、HTMLを含む内部設定とインデックスの状況を確認し、成果が出ていない原因をレポートにまとめてお渡しします。 ≫ 無料SEO診断を申し込む |
まとめ
SEOにおけるHTMLの役割は、検索エンジンにページの主題と構造を正確に伝えることです。見た目ではなく、意味に合ったタグを選んで記述することが基本になります。
head内では、title、meta description、canonical、meta robots、meta viewportを、本文では見出しタグ、aタグ、alt属性、リスト、表、strong、blockquoteを正しく使い分けましょう。meta keywordsはGoogleでは使われておらず、キーワードの詰め込みや装飾目的の見出しは避ける必要があります。
構造化データでページの情報を補足し、ページのソース、Search ConsoleのURL検査、チェックツールで定期的に確認することが大切です。CMSを使っている場合は、テーマやプラグインの出力を把握し、記事作成時のルールを決めて運用しましょう。
| ＼ 技術面とコンテンツの両面からSEOを見直しませんか？ ／ 楽々Editでは、SEOコンサルタントがサイトを分析し、内部施策・コンテンツ・外部施策のどこに課題があるかを特定したうえで、戦略設計から実行まで一貫して支援しています。 ≫ SEOコンサルティングの詳細を見る |