h1タグなど見出しタグの使い方と確認方法について解説します。
h1タグとは
h1タグとは、HTMLで使われる見出しタグのひとつで、ページ全体のテーマや内容を一言で表す「大見出し」として機能します。
h1タグで囲まれたテキストは、「このページは何についてのページか」をユーザーと検索エンジンの両方に伝える役割を持ちます。記事のタイトルや、サービスページのメインコピーに使われるのが一般的です。
h1タグの記述例は以下の通りです。
<h1>h1タグとは?見出しタグの使い方と確認方法</h1>
Googleのタイトルリンク自動生成の参照元になることがある
Googleは検索結果に表示するタイトルリンク(青いリンクテキスト)を、自動的に生成することがあります。その際、h1タグのテキストが参照元のひとつとして使われる場合があります。h1タグがそのまま使われるわけではありません。
h1タグとtitleタグの違い
h1タグとよく混同されるのがtitleタグです。どちらも「ページタイトル」に関わる要素ですが、役割は異なります。
h1タグはページ内のコンテンツの見出し
h1タグはHTMLの<body>タグ内に記述し、ページのコンテンツ内に表示される見出しです。ユーザーがページを開いたときに目に入るもので、「このページで何を読むのか」を伝えます。
タグ内のh1タグの記述例は以下の通りです。
<body> <h1>h1タグとは?見出しタグの使い方と確認方法</h1> </body>
titleタグはタイトルリンク生成における参照元のひとつ
titleタグはHTMLの<head>内に記述するタグで、Google の検索結果の一行目に表示されます。ただし、titleタグを記述すれば必ずタイトルに表示されるわけではありません。
Googleがタイトルリンクを生成する際に参照するソースには、<title>要素のほか、<h1>などの見出し要素、ページ上で目立つ大見出しやテキストなど、複数の要素が含まれます。
<head>タグ内のtitleタグの記述例は以下の通りです。
<head> <title>h1タグとは?見出しタグの使い方と確認方法</title> </head>
h1タグとtitleタグは同じでなくても良い
h1タグとtitleタグは、必ずしも同じテキストにする必要はありません。titleタグは検索結果でのクリックを意識した文言、h1タグはページを開いたユーザーに向けた文言として、それぞれ最適化することができます。
ただし、内容が大きくかけ離れているとユーザーが混乱する原因になります。同じテーマを軸に、表現を調整する程度にとどめておくのが良いでしょう。
h1タグの記述ルール
h1タグの記述ルールを紹介します。
h1タグは複数あってもよいが1ページ1つが基本
HTMLの仕様上、h1タグを1ページに複数設置することは可能です。しかし、h1が複数あるとページのテーマが曖昧になりやすく、ユーザーにとっても分かりにくい構成になります。原則として1ページに1つのh1タグを設置するようにしましょう。
文字数制限はないが表示範囲に収める
h1タグに設定できる文字数に、厳密なルールはありません。ただし、長すぎるとモバイル画面でレイアウトが崩れたり、読みづらくなったりする場合があります。目安として、30〜40文字程度に収めると読みやすい見出しになります。
対策キーワードを含めつつ簡潔に記述する
h1タグには、そのページで対策するキーワードを自然な形で含めましょう。キーワードを詰め込みすぎると不自然な文になり、ユーザーにとって読みにくくなります。
h1タグの良い記述例、悪い記述例は以下の通りです。
良い例:<h1>h1タグとは?見出しタグの使い方と確認方法</h1>
悪い例:<h1>h1タグとは?見出しタグの使い方と確認方法 h2タグ h3タグ HTMLタグ</h1>
あくまで「ユーザーにとって読みやすい見出し」を意識しながら、対策キーワードを盛り込むのがポイントです。
画像をh1に使う場合はalt属性を記述する
h1タグは、テキストで記述することが基本です。ただし、デザイン上の理由でh1タグの中に画像を使う場合のみ、alt属性で見出しのテキストを記述します。
alt属性の記述例は以下の通りです。
<h1> <img src="page-title.png" alt="h1タグとは?見出し設定の使い方と確認方法"> </h1>
alt属性が未設定の場合、検索エンジンはh1の内容を正しく把握できません。画像をh1に使う場合は必ずalt属性を設定しましょう。
h1タグは必須ではないが推奨される
h1タグはHTMLの仕様上、必須ではありません。ただし、Googleはh1タグをページ構造を理解するためのシグナルとして活用しています。ページのテーマを明確に伝えるためにも、適切にh1タグを設置しておくのが基本です。
見出しタグ(h2〜h6)の記述ルールと使い方
h1タグだけでなく、h2やh3などの見出しタグ全体を正しく使うことも重要です。
見出しは階層の順番を守って使う
hタグはh1〜h6までの6段階で構成されており、数字が大きくなるほど下位の見出しを意味します。見出しを設定する際は、階層の順番を飛ばさずに使いましょう。
良い例:h1 → h2 → h3 の順に使う
悪い例:h1 の次に h3 を使う(h2 を飛ばす)
階層が乱れていると、検索エンジンがページ構造を正しく把握しにくくなります。ユーザーにとっても読みにくいページになるため、階層の順番は必ず守りましょう。
テキストを大きくみせたいなど装飾目的で使用しない
hタグはあくまで「見出し」を示すための要素です。テキストを大きくしたい、太く表示したいからといって、見出しでない箇所にhタグを使うのは避けましょう。
kunugi SEO Checkerを活用してh1タグを確認する
Chromeの拡張機能「kunugi SEO Checker」を使うと、h1タグや見出しタグをかんたんに確認できます。
フローティングパネルからh1を確認できる
kunugi SEO Checkerを有効にすると、ページ上にフローティングパネルが表示されます。このパネルからページのh1タグの内容をすぐに確認できます。
サイドバーからh1など見出しタグを確認できる
kunugi SEO Checkerのサイドバーにある「見出しタグ」では、h1だけでなくh2・h3などの見出しタグもまとめて確認できます。h1~h6のページ内での使用回数も一目で把握できます。
基本要素からtitleタグを確認できる
kunugi SEO Checkerのサイドバーにある「基本要素」セクションでは、titleタグの内容も確認できます。h1タグとtitleタグを並べて確認することで、両者の内容が大きくかけ離れていないかをチェックするのにも活用できます。
