｢hタグをなんとなく設定しているけど、設定する目的・効果がよくわからない｣という方もいるのではないでしょうか。

hタグを使わなければ、重要なテーマを目立たせたり検索エンジンが理解しづらくなるため、ユーザーの利便性が低下したりGoogleからの評価を受けづらくなってしまいます。

このような状況を避けるためには、hタグを正しく使用して分かりやすいコンテンツにしましょう。

この記事では、hタグの正しい使い方や、hタグを使用するメリットを紹介します。

hタグとは?

hタグとはWebサイトの見出しを示すときに使うHTMLタグのことで、h1~h6まで6つのタグがあり、数字が小さいhタグほど階層の高い見出しになっています。

h2の中にはh3を設定するなど、入れ子構造のように数字が小さいhタグの中に数字の大きいhタグを設定するのが基本です。

hタグはユーザーにそのテキストの重要性を伝えて、見出しテキストの下に続くコンテンツの内容について理解しやすくする役割があります。

hタグを使うメリット

hタグを使うことで、検索エンジンだけではなくユーザーにとってもメリットがあるのが特徴です。

ここでは、具体的にhタグのメリットを紹介します。

SEO評価が上がる

hタグはユーザーと検索エンジンの両方に、重要なテキストを伝えてコンテンツ内容の認識をする効果があるため、利便性の向上・サイト評価の向上によるSEO効果が期待できます。

検索エンジンではなくユーザーの利便性を最優先にしてページを作成することが、SEOにおいて重要です。

そのためhタグを適切に使って利便性を高めることで、サイトの評価が上がって上位表示化が期待できます。

ユーザーが読みやすくなる

hタグを使って見出しを作ることで、コンテンツの読みやすさが格段に上がりユーザーの利便性が向上します。

hタグで囲まれたテキストは本文よりも大きく表示され、視覚的に情報が得やすいですが、hタグで囲むテキストを簡潔にまとめましょう。

hタグを簡潔に記載すると、ユーザーは見出しを見ただけでコンテンツの概要を掴みやすくなります。

対策キーワードを含めることは重要ですが、ユーザーにとって分かりやすい見出しになっているかが重要です。

hタグの役割

hタグにはh1~h6まであり、それぞれ重要度が違うのが特徴です。

ここでは、hタグの役割や使い分けについてお伝えします。

h1タグの役割

h1タグはコンテンツのテーマを表しており、タイトルタグと本質的な役割は同じなため、似た内容でも問題ありません。

検索エンジンにとってh1タグで囲まれたテキストは、コンテンツの内容・階層を理解するために重要な要素なので、必ず対策キーワードを含めるようにしましょう。

またh1タグに囲まれたテキストは、長すぎるとキーワードの重要度が薄まったり分かりにくいので、基本的には30~50文字に収めるのが理想的と言われています。

h2~h6タグのそれぞれの役割

h2~h6タグは本文中の見出しとして活用します。それぞれのhタグの使い方は以下の通りです。

1つのページにh2~h6は複数使用しても問題ありませんが、順番通りになるように気をつけて設定しましょう。

hタグの正しい使い方とルール

hタグを使用する際に、正しい使い方とルールを理解しておく必要があります。

ここでは、hタグの正しい使い方とルールを紹介します。

基本的な記述方法

hタグの記述方法はh1~h6まで同様で、以下のように記述します。

上記のようにh1からh2・h3・h4という流れで、小さい数字から順番に設定していきます。

hタグを順番通りに使う

｢h2タグには最も重要度が高い大見出し｣｢h3タグには中見出し｣｢h4タグは小見出し｣というように、必要に応じてh2から順番通りにh6まで設定しながら正しい順番でhタグを使いましょう。

hタグは数字が小さいほど大きな見出しになり、h1~h6の順番は入れ子構造を守ることが重要です。

hタグの入れ子ルール

hタグはHTML5のフローコンテンツであり、HTML4.01におけるブロック要素です。

hタグの中には｢span｣｢img｣｢strong｣｢em｣などのインライン要素を含めて、入れ子にすることができます。

hタグの改行のやり方

hタグの中のテキストが長くなり過ぎてしまった時などに、brタグを使うことで改行ができます。

brタグを挿入した箇所から折り返され、改行されてテキストが表示されるので、テキストが長くなってしまった時に使用するのが有効です。

hタグを使用する上での注意点はある？

hタグは非常に重要ですが、間違った使い方をするとSEO対策に悪影響になることもあるので、注意が必要です。

そこでhタグを設定する上で、注意するポイントを3つ紹介します。

スタイルを整える目的でhタグを使わない

hタグを設定するとフォントサイズが大きくなったり、装飾をつけて目立たせることができます。

しかしhタグの本来の目的は、検索エンジンのクローラーにページ構成やコンテンツ内容を伝えることなので、テキストを目立たせる目的で使用しないように注意しましょう。

hタグに画像を使う際はalt属性を設定

alt属性とは、画像の説明を行うテキスト情報のことです。

クローラーはテキストでコンテンツを認識しており、hタグに画像のみを入れてもクローラーに認識されません。

そのためhタグに画像を入れる際は、alt属性で画像の説明をするテキスト情報をつけてクローラーに認識してもらえるようにすることが重要です。

長い見出しはなるべく使わない方がベスト

Googleの公式ガイドには、｢非常に長い見出しを使用するのは避けるように｣と記載されています。

そのため改行する前に、簡潔な内容に改善できないかを検討した上で、改行を検討するのが大切です。

hタグを使うメリットは?正しい使い方と注意点｜まとめ

この記事ではhタグの使うメリットや、正しい使い方と使用する上での注意点を紹介しました。

hタグとは、Webサイトの見出しを示すときに使うHTMLタグのことで、大まかな使い方は以下の通りです。

hタグを使うメリットは、検索エンジンに認識させるだけでなくユーザーの利便性が上がるため、サイトの評価が上がり効果的なSEO対策が期待できます。

しかしhタグを使用する上で、正しい使い方を知らなければSEO対策に悪影響を与える可能性があるので、注意が必要です。

hタグを使用する際は、以下の3つに注意しましょう。

上記の3点に注意してhタグを正しく設定して、ユーザーの利便性を向上させサイトの評価を上げていきましょう。

なお、株式会社メディアエクシードではコーディング代行サービスを行っております。

ワードプレス上の記事コーディングはもちろんですが、コーダーのリソース不足に悩まれている企業様には特におすすめのサービスです。

めんどくさいコーディング作業を全部丸投げしてみませんか？