コンテンツにおいて見出しのhタグは重要で、ユーザーだけでなく検索エンジンにも大きな影響を与えます。つまり、より良いサイトにするためには、hタグを正しく活用することが求められます。そこで今回は、hタグの種類だけでなく効果的な使い方まで解説します。
hタグの役割とは？
hタグはユーザーと検索エンジンに記事内の構成を伝える役割があり、HTMLで記述します。hは「head」を表しており、hタグの種類は「h1」から「h6」まで6種類です。コンテンツの構成に合わせて最適な記述にすることで、ユーザーと検索エンジンの両方から評価されるサイトになります。
hタグを設定するメリット
hタグの適切な見出しをつけることで、ユーザーがページ構造を理解しやすく、メリハリのある読みやすいコンテンツになります。また、hタグで見出しをつけると目次も作成できます。アンカーリンクを設定することで欲しい情報に素早くジャンプできるので、ユーザビリティの向上に繋がります。さらにSEOキーワードを含めることでSEO効果が期待でき、検索エンジンのクローラーに対してもページ構造を正確に伝えるので、インデックスされやすいというメリットもあります。
hタグの種類と記述方法
hタグの適切な見出しをつけることで、ユーザーがページ構造を理解しやすく、メリハリのある読みやすいコンテンツになります。また、hタグで見出しをつけると目次も作成できます。アンカーリンクを設定することで欲しい情報に素早くジャンプできるので、ユーザビリティの向上に繋がります。さらにSEOキーワードを含めることでSEO効果が期待でき、検索エンジンのクローラーに対してもページ構造を正確に伝えるので、インデックスされやすいというメリットもあります。
中見出し：hタグの種類と記述方法
hタグには1から6までの数字があり、小さいほど重要度が上がります。HTMLでは以下のようなタグで記述します。
- <h1>テキスト</h1>：最も大きな見出し
- <h2>テキスト</h2>：2番目の見出し
- <h3>テキスト</h3>：3番目の見出し
- <h4>テキスト</h4>：4番目の見出し
- <h5>テキスト</h5>：5番目の見出し
- <h6>テキスト</h6>：最も小さい見出し
例えばこの記事では、h3までを使用して見出しをつけています。
<ul>
<li><h1>hタグの使い方は？HTMLでの記述やSEO対策になる見出しの順番を解説</h1>：記事のタイトル</li>
<li><h2>効果的なhタグの使い方7選</h2>：本文の中見出し</li>
<li><h3>hタグの順番を守る</h3>：中見出しの中の小見出し</li>
</ul>
h1はhタグの中で最も大きな見出しで重要な情報です。検索エンジンもh1を優先的に認識するので、h1は記事タイトルなどに使用されます。
効果的なhタグの使い方7選
hタグを適切に使用するために、効果的な7つの方法を解説します。
hタグの順番を守る
見出しタグでは、h1からh6の階層を意識して順番を守る必要があります。ページがh3から始まって、次にh2→h4→h1と順番が守られていないとユーザーとSEOに悪影響を与えてしまいます。正しい階層構造になるようにhタグを配置してください。
hタグの下にはテキストを入れる
hタグは見出しなので、必ずテキストを入れて見出しだけのコンテンツを作らないようにしましょう。hタグの下にはpタグで本文を記述していくのがルールです。
h1タグの使用は1ページで1回
上限は決まっていませんが、基本的にh1タグの使用は1度だけにしましょう。h1タグが複数あると、検索エンジンがどの見出しが重要なのか判断できなくなり、本来の大見出しとしての重要度や価値が低下します。さらに、ユーザーもページを読みにくくなるので、可能であればh1タグの使用は1度にするのがおすすめです。
デザイン感覚でhタグを乱用しない
文章のデザインやフォントを変更するためにhタグを使用してはいけません。これは順番を守るのと被りますが、適切な位置とテキストで見出しを作成しないと階層構造が崩れます。hタグはデザインの変更ではなく、必ず見出しのために使用してください。
hタグ内にstrongタグなどを使用しない
hタグは記述すると自動でフォントが変わるので、装飾タグを追加してデザインを変更しないようにしてください。「<h2><strong>効果的なhタグの使い方7選</strong><h2>」のように、文字を太くしたいからといって見出し内にストロングタグなどを追加するのはNGです。デザインが崩れたり、検索エンジンが正しくクロールできなくなってしまいます。
h1やh2タグには関連キーワードを含める
大見出しには適宜キーワードを含めると、SEO効果が期待できます。ただし詰め込み過ぎると、スパムやユーザービリティの低いコンテンツだと判断されるので注意してください。キーワードを繰り返し使用するのではなく、必要なキーワードのみを自然に含めることが大切です。
見出しに画像を使うときはalt属性を記述する
基本的に見出しに画像を使用するのはNGですが、h1タグには画像を使用しても問題ありません。設定する場合は「alt属性」を記述します。
<h1><img src=”画像URL” width=”幅” height=”高さ” alt=”画像の説明（h1テキスト）”></h1>
しかし、h1タグもテキストで記述するのがおすすめです。もしもの場合の対処法程度に捉えてください。
魅力的な見出しを作る4つの方法
hタグをさらに有効活用するために、「魅力的な見出しを作成する方法」を解説します。
簡潔にまとめて長文にしない
見出しはシンプルにして「何が書いてあるか」を一目で分かるようにしましょう。文章にしてしまうと、ユーザーがページの構造や内容を理解しにくいので、読み進めるのが大変になります。また、見出しのみを斜め読みするユーザーも多く、気になる項目がなければページから離脱してしまう可能性があります。離脱を防ぐためにも、瞬時に内容が分かる見出しをつけることは大切です。
調べる必要がない単語を使用する
見出しには誰でも読める単語を使用しましょう。例えば「計画」を「アジェンダ」と表記すると、多くユーザーは単語の意味を調べなければなりません。このタイミングでページを離れるとそのまま離脱する可能性が高くなってしまうので、専門用語以外は中学生でも理解できる単語で見出しを作成するのが基本です。
ターゲットに合わせた見出しにする
見出しは検索してほしいターゲットユーザーに合わせて、最適な単語や言い回しにするのがおすすめです。例えば、ビジネスマン向けなら稚拙な見出しは避けて厳格な言い回しにし、子供向けならひらがなを多めにするなどの工夫をしましょう。
積極的に数字を使用する
数字を入れるとユーザーに興味を持たれやすく、情報量も予測しやすいので読みやすくなります。例えば、「効果的なhタグの使い方」よりも「効果的なhタグの使い方7選」の方がインパクトがあり情報量も分かりやすいです。いくつかの項目を小見出しで紹介する場合などは、積極的に数字を活用しましょう。
hタグに関わる3つのよくある質問
ここからは、hタグに関係する「よくある質問」を紹介します。
見出しを改行するにはどうすればいい？
見出しをどうしても長くする必要があり改行したい場合は、改行したい場所に「brタグ」を記述しましょう。これでタグを設置した箇所で改行され、ユーザが見やすい見出しとなります。ただし、基本的には改行を必要としないように文章をまとめるようにしましょう。
h2からh6は見出しの使用上限が決まってる？
ページ内の見出し数の上限や最適解は決まっておらず、コンテンツに合った階層構造になっていることが重要です。また、使用上限が決まっていないとはいえ、コンテンツのテキスト量にあった見出しの数を意識しましょう。
ページ内で全てのhタグを使用する必要はある？
ページ内でh1からh6まで全てのタグを使用する必要はありません。むしろh3タグまでしか使用していないサイトが多く、かなり細分化しなければいけないコンテンツ以外はh4タグまでの使用がおすすめです。見出しの階層が増えると読みづらく、見出しの数に対してテキストの割合が少なくなってしまいます。
まとめ
hタグはコンテンツ内容を検索エンジンとユーザーに分かりやすく伝え、適切な見出しはユーザビリティを向上させて離脱を防ぎます。使用上の注意点を守りながら、検索エンジンやユーザーにとってより良いコンテンツになるように、hタグを見直して最適化しましょう。
