SEO対策の基本！hタグ(見出しタグ)の効果的な使い方とは？

h1タグはページ内でもっとも重要なテキストに使用します。つまり、WebサイトであればWebサイトのタイトルを指し、記事ページであれば記事タイトルがそのページでもっとも重要なテキストとなるでしょう。

そのため、h1タグはタイトルに設定し、1ページにつき1つだけ使うのが一般的です。
WordPressのほとんどのテーマでは、タイトルに<h1>が自動でつくようになっています。html5を使用する場合は、1ページ内に複数回h1タグを使用することが可能です。
しかし、タイトルのような重要な文章が同一ページ内にいくつもあると、ユーザーが混乱してしまいます。
何を1番伝えたいかどうかじっくり考えた上で、h1タグは1ページにつき1つだけ使用するのがいいでしょう。

hタグはコンテンツの階層構造を正しく表すために使用されます。
h1からh6まで6種類ありますが、h1→h2→h3→h4→h5→h6のように順番を守る必要があります。
このように階層構造を設定することで、ページ内で最も伝えたいことは何か、見出しの始まりと終わりはどこか、何についての補足説明なのかを伝えることができます。

Googleではhタグを順番について以下のように定義しています。

「複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。」

 

※引用：検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ

hタグの順番が違ってもWebサイトやページの評価が低くなることはありませんが、hタグの順番や構造が正しければ、Googleの検索エンジンがWebサイトやページを正しく評価するために役立つのです。

hタグを使って正しく階層構造を設定すると、以下のようになります。

このように、重要な見出しをh1タグに設定し、見出しや説明を順番にマークアップしましょう。
そうすれば、ユーザーにもGoogleなどの検索エンジンにとっても、分かりやすく見やすいWebサイトやページを作成することができます。

以前は、hタグにキーワードを詰め込むことが検索順位を上げるなどのSEO対策に有効だとされていました。
しかし2021年現在では、見出しタグの中に内容と関係ないキーワードや文章として意味が成り立たない見出しを使用していると、Googleの評価が下がり、検索結果の上位に表示されない可能性が高いのです。
Googleに評価されるためには、h1タグに自然な形でキーワードを含め、ユーザーから見て簡潔で読みやすい見出しを作成しましょう。

ユーザーの中には、ページの見出しだけを読んでページ全体の内容を理解しようとする人もいます。
見出しテキストをまとめた目次やページを上から下までスクロールしたときにページ全体の内容を把握できなければ、読み進めずに離脱するユーザーもいるでしょう。そのため、見出しを見ただけで全体の内容が理解できることが重要です。

見出しを読むだけで意味がわかれば、ユーザー自分の求めている情報があるかどうか判断するのに役立ち、読んでもらいやすくなるでしょう。

hタグに記載するテキストは、目を通しただけで理解でき、興味を引くものであることが重要です。そのため、答えを考えなければならない疑問形や、伝えたいことが伝わりにくい体言止めが使用しない方がいいでしょう。

悪い例と良い例をあげて説明します。

■悪い例
疑問形：なぜhタグは重要なのか？
体言止め：SEO対策に重要なのはhタグ
↓
■良い例
SEO対策にhタグが重要な理由

hタグに記載したテキストに興味を持つことができなければ、読み進めてもらえず、ユーザーの離脱につながってしまいます。結果的にGoogleに評価されず、検索結果の表示順位に影響するのです。

hタグに記載するテキストは何が言いたいのか明確に伝わるよう、疑問形ではなく最後は名詞で終わるようにまとめましょう。

hタグには画像も設定することもできますが、「alt””」を使って画像の説明文を記載しなければ、Googleなどの検索エンジンには画像だと認識されません。特にh1タグはWebサイトやページなど、一番重要な要素を示すものです。

h1タグに記載したテキストは、ユーザーが検索エンジンに入力したキーワードとマッチしているかどうかで検索結果の表示順位に影響します。
画像を使用せず、Googleなどの検索エンジンに認識してもらいやすいよう、Webサイトやページなどにとって重要なキーワードを設定しましょう。

hタグを設定すると、hタグを設定していないテキストより大きく目立たせる効果があります。

WordPressをはじめとするサイト作成サービスでは、HTML（※1）やCSS（※2）などのホームページを作成するときに使う言語を使用すると、見やすく工夫することが可能です。

h1〜h6までのhタグを、最も重要な見出しであるh1タグから順にh2、h3とhタグを設定したテキストの色やフォントサイズをCSSで調整して装飾をし、ユーザーが見やすく分かりやすいようデザインしましょう。
見出しの重要性が伝わるよう、色やフォントサイズ、下線や背景色などで違いを出すと効果的です。
（※1）HTML:文書を構造化するための言語
（※2）CSS:作成されたHTMLの見た目や装飾を整えるもの