hタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

hタグとは？

hタグとは、Webページの見出しを意味するHTMLタグです。hタグの「h」はheadingの略で「見出しタグ」とも呼ばれます。見出しタグはh1～h6までの6種類のhタグがあり、h1は大見出し、h2は中見出し、h3は小見出し…と、数字の小さい順に使います。中でもh1タグはSEOにおいて重要度が高く、h1タグの適切な使用方法を知ることが大切です。

h1タグは以下のように記述します。

<h1>見出し</h1>

本記事ではh1タグを含む見出しタグ全般について解説します。

hタグ（見出しタグ）の必要性

h1タグを含む見出しタグは、検索エンジンの文書構造理解を深める役割があります。

ユーザーは視覚的に見出しかどうかを判断します。極端に言ってしまえば、フォントを大きくするなどデザインを調整して見出しの体裁を整えれば、どんなタグを使用しても見出しと思ってもらえます。

しかしプログラムである検索エンジンはhタグを認識して見出しであると理解します。hタグの文章はこれから書かれている内容が凝縮されている一文ですので、検索エンジンはhタグで大まかな内容を理解します。したがって適切にhタグを設置していくことは、検索エンジンに理解しやすい構造となり、結果的にSEOに影響を与えます。

hタグの使い方

書籍や論文の章立てのイメージで使う

Webページを書籍と見立てて、「第１章」の見出しをh1タグ、「第１章、第1節」の見出しにh2タグを使うイメージです。「第２章」の見出しには新たにh1タグを使用します。

hタグを過度に使用しすぎない

hタグはページ内で何回使っても問題ありませんが、見出しが多すぎるとユーザーも検索エンジンも、コンテンツを読みにくくなるので、過度な使いすぎに注意しましょう。

数字の順番通りに記述する

hタグにはh1～h６まで全6種類があり、h1→h2→h3→…と数字の小さい順に使用しましょう。

h1タグに画像を使用する場合はalt属性を付与する

h1タグにはテキストの代わりに画像を使用することができます。その際は必ず画像のalt属性にh1タグに相当するテキストを設定してください。

alt属性とは画像の内容を文字で記述するHTML属性です。検索エンジンは画像が読めないため、alt属性に記述された内容を読んで画像を理解します。また、音声読み上げ時には、alt属性が画像の代わりに読み上げられます。

h１タグに画像を使用した場合は、alt属性のテキストがh1タグのテキストとして認識されます。

キーワードを含めた簡潔な見出しにする

特にh1タグには、コンテンツ内で伝えたい内容を簡潔に記述します。キーワードを含めると、SEO的により一層有効です。ただし、キーワードを詰め込んだ長過ぎる見出しは、読みにくくなるため避けてください。

デザインを整える目的でhタグを使用しない

h1タグを含めた見出しタグは、デフォルトで目立つデザインになっているケースが多いです。このため、目立たせたい文章に見出しタグを設定したくなるのですが、それは絶対に避けてください。見出しタグの目的は文章構造を明確にするためであり、デザインのためではありません。デザインを変更したい場合は、見出しタグで調整するのではなく、CSSなど他の方法で設定しましょう。

Googleによる見出しタグ使用ガイド

Googleは公式にガイドラインを公開しており、その中で見出しタグの使い方について、避けるべき使用法についての記述があります。

概要は以下のとおりです。

参考：検索エンジン最適化スターターガイド「見出しタグを使用して重要なテキストを強調する」（Google）

まとめ

本記事では、hタグの役割と使い方について解説しました。

hタグはコンテンツの中身をユーザーと検索エンジンに端的に伝える役割を果たし、さらにSEO評価に影響を与えます。見出しタグを見ればコンテンツの概要がパッと伝わるのが理想的です。コンテンツ内のどこにどんな見出しタグを設置するか慎重に検討し、特にh1タグは検索エンジンに注目されていると意識しましょう。