HTMLのh1タグとは？役割を解説

Webサイトのページの「h1タグ」は、そのページが何について書かれているかを伝える重要な要素です。

適切な設計は、ユーザーがページの内容を一目で理解する助けとなります。

本記事では、h1タグの役割と、使い方のポイントを解説します。

h1タグとは

h1タグはHTMLにおける見出しタグの1つで、Webページ全体のもっとも重要な「大見出し」を定義するタグです。サイトの中で、そのページの内容を一目で伝える役割を担っています。

見出しタグには、h1, h2, h3, h4, h5, h6の6種類のタグがあり、数が小さいものほど上位の見出しであることを示しています。これらを順番に使用することで、情報の構造が整理されます。

タグ名	意味	役割のイメージ
h1	大見出し	本のタイトル、記事の題名
h2	中見出し	各章のタイトル
h3	小見出し	各節のタイトル
h4	h3より小さい見出し	補助的な見出し
h5	h4より小さい見出し	h4よりさらに細かい補足や項目
h6	h5より小さい見出し	h5よりさらに細かい補足や項目

h1タグとtitleタグの違い

「h1タグ」とよく混同されるのが、「title（タイトル）タグ」です。

どちらもページ名を表しますが、大きな違いは、ユーザーが目にするタイミングにあります。

titleタグ

Googleなどの検索結果一覧で、青色のリンク部分として表示されます。ユーザーが検索結果からサイトを選択する際の判断材料になります。また、ブラウザのタブに表示されるのもtitleタグです。

h1タグ 

検索結果をクリックしてサイトに訪問した後、ページ内の最上部などに表示される大きな文字の見出しです。

つまり、titleタグは検索結果でクリックされるための看板であり、h1タグはサイトに来たユーザーにそのページの内容を簡潔に示すものです。

基本は同じでも良いですが、目的に併せて違うものを使用して、h1の方が長くなっても問題ありません。

補足

検索結果に大きな文字で表示され、ユーザーがクリックするリンク部分は、基本的にはHTMLのtitleタグの内容が反映されます。ただし、Googleが、titleタグの内容がページの中身を適切に表していないと判断した場合、ページ内のh1タグやその他の見出しを引用して、検索結果のタイトルを自動的に書き換えることもあります。

ユーザーの離脱を防ぐh1タグの役割

h1タグを適切に設定することは、読者がページを開いた瞬間に「自分が探していた情報がある」と確信させることにつながります。これが結果として、ページをすぐに離脱せずに読み進めてもらえる要因になります。

見出しのルールとしてh1から順番に使うことが推奨されますが、形式を整えること自体が目的ではありません。大切なのは、見出しを見ただけで記事の構成が把握できるかどうかです。Googleも、タグの順番が多少前後していることよりも、読者にとって有益で分かりやすい構造になっているかを重視しています。

参考：Google公式

無理にテクニックを詰め込むのではなく、まずはページを訪れた人が内容を理解しやすい言葉をh1タグに設定してください。

まとめ

h1タグはWebサイトの訪問者に対して、ページの主題を伝える重要な要素です。検索結果のリンクをクリックしてページに訪れたユーザーが、最初に目にする見出しとして、内容を端的に表す文言を設定しましょう。

h1タグの具体的な書き方については以下の記事で解説しています。