「h1」「h2」のタグの意味って？使い方や使用する際の注意点を解説

SEO効果が期待できる見出しタグ

見出しタグを設定することで、そのWebページで伝えたいテーマや文章の構成をわかりやすく読者に伝えられるうえ、SEO効果も期待できます。見出しタグによって文章構成を整えることで、読者だけではなく検索エンジンにも、Webページの内容を正しく認識させられるのです。

Googleなどの検索エンジンは、「クローラー」と呼ばれるロボットがWebページを巡回してその内容を確認し、それぞれを評価します。見出しタグによって階層が整理されていると、読者にわかりやすい記事とクローラーが判断して、Webページの評価向上につながりやすくなるでしょう。

記事の見出しにタグを使用する

見出しタグは、HTMLのhタグを使用することで設定できます。見出しタグの分類やそれぞれの使用用途は、下記の通りです。

見出しタグの構造上のルール

hタグは、HTMLにおいてbody要素内に配置できる「フローコンテンツ」であり、「ブロック要素」でもあります。

ブロック要素であることから、hタグの中には下記のようなインライン要素を含むことが可能です。

• span
• img
• strong
• em

これらのインライン要素を見出しタグ内に含めるには、下記のように記載します。HTMLタグの区分をよく理解して、それぞれの要素を正しくhタグ内に設定することが重要です。

h1タグの過剰な使用は控える

見出しタグは、Webページ上で適切な数を使用することが求められます。特にh1タグは、そのWebページ全体を通して伝えたいテーマに設定するものです。

必要であれば複数のh1タグを使用しますが、重要なテーマが複数あるとWebページを複雑にしてしまう可能性もあります。記事の最も重要なテーマを強調して可読性を向上させるために、h1タグは適切に使用しましょう。

見出しタグのリンク指定

見出しタグには、リンクを指定できます。ここでは、下記2つのリンクの設定方法を見ていきましょう。

背景色の表示方法

見出しタグにおいてはHTMLでの使用が非推奨であるため、CSSを活用することで背景色をはじめ、さまざまなデザインを設定することが可能です。デザインを設定することで、読者の目に留まりやすくなり、Webページの可読性を向上させられるでしょう。

デザインの例として、見出しに背景色を表示させるCSSの記述をご紹介します。

キーワードを詰め込み過ぎない

見出しにキーワードを入れることは、SEO対策として有効な手段です。しかし、見出しに毎回同じキーワードを詰め込んでしまうと、かえって読者が読みにくくなります。

Webページで重要なことは、読者が読みやすい記事を提供することです。SEO対策ばかりにとらわれすぎず、見やすいWebページを作成しましょう。

見出しを長文にしない

見出しが長文だと、読むだけで読者にストレスを与えてしまう可能性があるでしょう。見出しは読者が文章の要点を知るためのものなので、一目で文章の内容を理解できることが求められます。設定する際は、情報量を抑え簡潔にポイントをしぼって作成しましょう。