WEBマーケティング

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

「h1」「h2」のタグの意味って?使い方や使用する際の注意点を解説
Webページを作成する際、HTMLの記述で「h1」や「h2」などのタグを目にしたことがある人は多いのではないでしょうか。

本記事では、h1やh2とはどのようなタグか、また使い方やルールも併せて解説します。どのようなタグかわからない、使い方を知りたいという人は、ぜひ最後までご覧ください。

「h1」「h2」は見出しタグのこと

「h1」や「h2」のhとは、「heading(見出し)」の略称であり、見出しタグと呼ばれています。見出しタグとは、HTML(Webページを作成するための言語)においてページの重要なテーマや文章の構成を、読者や検索エンジンにわかりやすく伝えるために設定するタグです。h1〜6があり、数字が小さいほど高い階層の見出しを意味します。

特に見出しタグは、読者はもちろんのこと、Googleなどの検索エンジンの利便性を高めるためにも欠かせません。見出しタグを正しく活用することで、双方に適したWebページを作成できるでしょう。

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

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

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

見出しタグの使い方・ルール

見出しタグを使用すると、読者や検索エンジンからの評価向上につながりますが、それは正しい使い方やルールに沿って使用されている場合です。

適切に使用されていなければ、かえって評価を下げる原因になってしまう恐れもあるでしょう。ここでは、見出しタグの使い方やルールを詳しく解説します。

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

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

見出しタグ 分類 使用用途
h1 大見出し 記事のテーマやタイトル
h2 中見出し 記事の章の見出し
h3 小見出し 各章のポイントとなる見出し
h4〜6 超小見出し h3の補足など

見出しタグは数字の若い順から使用する

見出しタグは、<h1>→<h2>→<h3>のように、数字の若い順から構成されているのが基本です。<h2>→<h1>→<h3>のように順番が入れ替わると記事が複雑になり、読者や検索エンジンが中身を理解できなくなってしまいます。

見出しタグを使用する際は、下記のように階層を意識して設定しましょう。

<h1>大見出し</h1>
<h2>中見出し①</h2>
<h3>小見出し①</h3>
<h3>小見出し②</h3>
<h2>中見出し②</h2>

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

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

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

  • span
  • img
  • strong
  • em

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

<h1><span>〇〇〇とは?</span>〇〇について紹介</h1>

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

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

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

見出しタグのリンク指定

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

通常のリンク指定

ブロック要素であるhタグの中に、インライン要素となる「aタグ」をhタグの子要素として設定することで、リンクを指定できます。下記は、h2タグにリンクを指定する場合の記述例です。

<h2><a href=”リンク先のURL” title=”タイトル”>見出し2</a></h2>

aタグのhrefにはリンク先のURL、titleにはリンク先のタイトルを設定するのが一般的です。インライン要素のaタグの中にブロック要素のhタグは設定できないため、記述する際は間違えないように注意しましょう。

ページ内リンクの指定

文字数の多い記事では、ページの利便性を高めるために、目次などに「ページ内リンク」を設定することがあります。ページ内の見出しをリンク先に設定するには、リンクを設定する要素と見出しでそれぞれ下記のように記述します。

【リンクを設定する要素】

<p><a href=”#link”>見出し</a></p>

【見出し】

<h2 id=”link”>見出し</h2>

見出しタグにidを設定し、リンクを設定する要素のaタグでそのidを指定することで、ページ内リンクを設定できます。

背景色の表示方法

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

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

h1 { background-color: #FFFF00;}

見出しタグを使用する際の注意点

ここでは、見出しタグを使用する際の注意点を2つ解説します。

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

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

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

見出しを長文にしない

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

まとめ

h1やh2などの見出しタグは、Webページの可読性を向上させるために重要なタグです。読者はもちろんのこと、検索エンジンに対して有効なため、SEO効果も期待できます。

しかし、正しく使わなければかえって可読性を低下させてしまう要因になるため、注意が必要です。見出しタグを正しく活用してサイトの利便性を高め、上位表示を狙いましょう。

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。

Service Siteサービスサイト

CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。

SSL GMOグローバルサインのサイトシール