h1タグとは？ SEO効果と正しい使い方を徹底解説
satouこの記事では、h1タグのSEO効果と正しい使い方を解説します。h1タグの使い方をマスターし、ユーザーが理解しやすいWebページを作成しましょう。
h1タグとは？
h1タグ(読み方：エイチワンタグ)とは、Webページにおいて最上位の見出し＝大見出しを記述するHTMLタグです。h1タグの「h」は英語の「heading」(見出し)の略です。hタグにはh1〜h6までありますが、そのうちh1タグは最上位となります。
titleタグとの違い
h1タグとは別に、titleタグというものがあります。同じ目的で使われることも多い両者の違いは、下記の通りです。
| h1タグ | Webページ内で表示され、見出しとして認識される |
| タイトルタグ | 検索結果などで表示され、タイトルとして認識される |
上記のように厳密には異なりますが、「ページ全体の内容を簡潔に示す」という役割は同じです。SEO的にも、h1タグと同一のタイトルタグを設定することは問題ありません。実際にタイトルタグの内容がそのままh1タグに反映されているWebページも多く、Wordpressのテーマでも自動的に反映されるものが多いです。
h1タグによる3つのSEO効果
h1タグは、最も重要な大見出しを記述するタグであることが分かりました。h1タグの設定はSEOにおいても重要です。h1タグによる3つのSEO効果を見ていきましょう。
クローラーが認識しやすくなる
h1タグのSEO効果としては、クローラーが認識しやすくなる効果が挙げられます。クローラーはWebページがどのようなページかを認識する上で、h1タグを重要視します。h1タグに「脱毛器」というキーワードが含まれていれば、そのページは「脱毛器」に関するページだと認識されやすいです。
同ページで脱毛サロンをおすすめする記述が多数あったとしても、クローラーの認識は「脱毛器」に関するページとなる可能性があります。このように、クローラーはh1タグの記述を通じてWebページを認識します。
そのため、h1タグがWebページの内容を要約していれば、クローラーはページ内容を的確に認識できます。このようにh1タグの設定はクローラーの認識に深く関わっており、SEO効果にも影響します。
読者が内容を理解しやすくなる
読者が内容を理解しやすくなる点も、h1タグによるSEO効果の一つです。h1タグは大見出しであり、Webページの主旨が要約されているべきものです。ページの主旨が反映されたh1を見ることで、読者はWebページの内容を大まかに把握できます。
このように、h1タグには読者が内容を理解するのを手助けする効果があります。読者が内容を簡単に理解できればページからの離脱を防ぎ、滞在時間を長くできます。読者の離脱が少なく滞在時間が長ければ、サイトとしての評価も上がりやすいです。
検索からのアクセスが増えやすくなる
h1タグを効果的に設定することで、検索からのアクセスが増えやすくなる点もメリットです。検索からのアクセスを促すためには、ページのタイトルが重要です。
Googleは、titleタグが設定されていないページのタイトルを自動的に生成して判断します。titleタグがない場合、h1タグのテキストが主な判断材料となります。また、h1がそのままタイトルになるCMSの設定もあります。
このように、h1タグがタイトルとしての役割を担い、検索結果に表示されるケースも多いです。このようなケースでは、魅力的なh1タグを設定することで、検索からのアクセスを増やすことができます。
h1タグの効果的な使い方のポイント5選
h1タグがSEOにおいて重要なことは分かりましたが、具体的にどのように使えばよいのでしょうか。ここでは、h1の効果的な使い方のポイント5選をお伝えします。
対策キーワードを含めて簡潔にまとめる
h1タグを設定する上では、対策キーワードを含めて簡潔にまとめることが重要です。検索エンジンは、ページ内容を判断する上でh1を重要視しています。また、キーワードがh1に含まれていれば、読者もページを開いてすぐにキーワードを見つけられます。そのため、h1タグにキーワードを含めることは重要です。
ただし、キーワードの詰め込みには注意が必要です。キーワードを不自然に詰め込むと読者が読みづらくなるだけでなく、クローラーからスパムと認識される恐れもあります。あくまで適度にキーワードを使用し、ページ内容を簡潔にまとめたh1が望ましいです。下記の条件を満たすことを意識し、簡潔なh1タグを設定しましょう。
- 文字数：30~50文字程度(タイトルも兼ねる場合は32字以内)
- キーワードの使用回数：基本1回(多くても2回)
ページ内容と一致させる
h1タグを設定する際は、ページ内容と一致させることも重要です。Webページは読者の疑問を解決する内容になるべきであり、h1は疑問に対する回答を要約し「同ページを読めば疑問が解決できる」と示すべきものです。
そのため、読者の理解を助けるためには、ページ内容を簡潔に要約したh1が望ましいです。たとえ興味を引くような文言が含まれているh1でも、ページ内容と関係がなければユーザーの疑問を解決できません。キーワードを入れてクリックしてもらうことは重要ですが、ページ内容と一致したh1であることを前提にしましょう。
画像を使う時はalt属性を付与する
h1に画像を使ってはいけないというルールはないため、画像を使用してもペナルティはありません。しかし、ページ内容を簡潔に伝えるという目的を果たすためには、テキストのみで十分です。
もしh1に画像を使用する場合には、alt属性を付与することが重要です。クローラーは画像そのものではなく画像に付与されたテキストから内容を判断します。また、alt属性が設定されていれば、閲覧環境によって画像が表示されない時でも、テキストが表示されます。このことから、クローラーおよびユーザーの理解を助けるために、h1で使用する画像にalt属性を付与することは必須です。
また、h1に使用した画像を同ページ内で使い回したり、他ページのh1として設定したりするのも不自然なため、避けるべきです。
hタグは順番に使用する
SEO効果を高めるためには、hタグを順番に使用することも重要です。h1はページの大見出しにあたり、hタグの中で最上位です。そのため、h1タグはhタグのなかで最初に登場させます。以降は、下記のようにhタグを順番かつ入れ子構造で使用しましょう。
h1：大見出し
h2：中見出し
h2：中見出し
h3：小見出し
h3：小見出し
h3：小見出し
(h4~6：補足)
h2：中見出し
h3：小見出し
(h4~6：補足)
h3：小見出し
h3：小見出し
h2：中見出し
h1タグは、同セクション内で「h3→h2→h4」のように順番を変えて使用することはできません。なお、必ずしもh6まで使う必要はなく、h4〜6がないページも多いです。
色やデザインはCSSで整える
h1タグを使う上では、色やデザインはCSSで整えることも重要です。Googleは、h1のデザインに関して、下記のように述べています。
If you don’t like how an <h1> tag is rendered visually, you can always alter its appearance in your CSS.
(h1タグのビジュアルが気に入らない場合には、CSSで変えることができます)
Holiday source code maintenance: Website clinic for non-profits
上記の通り、h1タグの色やデザインを変えたい場合は、CSSを活用しましょう。このようにh1タグの見た目を変えることは可能ですが、視覚的なデザインのためにhタグを使うのは適切ではありません。Googleも、下記の見解を示しています。
以下のことは避けましょう。
(中略)
構造を示すためではなく、テキストの書式を整える目的で見出しタグを使用する。
Googleウェブマスター向けガイドライン
あくまでh1は「ページ内容を端的に示す大見出し」です。目的を履き違えずに、h1を設定しましょう。
h1タグに関してよくある質問
最後に、h1タグに関してよくある3つの質問をチェックしましょう。
複数回使用できる？
h1タグの使用回数に制限はありませんが、複数回使用するのはおすすめできません。h1はhタグの中で最も重要度が高く、タイトルを反映することも多いです。1つのページ内にh1が複数あると、クローラーが記事のテーマを認識しづらくなります。また、記事の一貫性が下がることで、ユーザーを戸惑わせる可能性もあります。このような理由から、h1タグは1コンテンツにつき1つだけ使用するのがおすすめです。
画像を使うとSEO効果が下がる？
h1タグに画像を使用すると、必ずSEO効果が下がるわけではありません。ただし、画像を使用する場合には、alt属性を付与してテキストで画像を説明する必要があります。alt属性のない画像はクローラーが認識しづらく、また画像が表示されない環境ではユーザーの理解も下がります。
そのため、alt属性の設定されていない画像はSEO的にマイナスと言えます。h1タグに画像を使用する場合には、必ずalt属性を設定しましょう。
フォントサイズを変えてもいい？
hタグのフォントサイズをCSSなどで変えることは問題ありません。ただし、フォントサイズを理由に、hタグの順番を無視して使用してはいけません。hタグの目的は、デザインを整えることではなく、ページの論理構造を示すことです。フォントサイズを変更する場合も、必ずhタグの順番を守りましょう。
h1タグ まとめ
h1タグは、Webページにおける大見出しであり、hタグの中で最上位です。h1タグにはページ内容を要約して伝える役割があり、titleタグと同一になるケースもあります。h1タグの使い方によってSEO効果が変わるため、下記のポイントをおさえてh1タグを設定することが重要です。
・対策キーワードを含めて簡潔にまとめる
・ページ内容と一致させる
・画像を使う時はalt属性を付与する
・hタグは順番に使用する
・色やデザインはCSSで整える
クローラーの認識やユーザーの理解を助けるべく、h1タグを効果的に設定しましょう。
