SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

【HTMLの見出しタグの使い方】h1~h6の正しい使い分けについて

見出しタグで重要なテーマを際立たせ、HTMLのh1からh6タグを正しく使いながら、ユーザーの利便性を考慮したコンテンツ(ブログ記事)を提供することが大切です。

今回は、HTMLの見出しタグの定義から使い方(h1~h6の正しい使い分け)までについて中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

【HTMLの見出しタグの使い方】h1~h6の正しい使い分けについて

見出しタグとは?

見出しタグとは、ユーザーや検索エンジンにページの重要なテーマを伝えるために、HTMLでマークアップするhタグ(h1/h2/h3/h4/h5/h6)のことです。

Google公式では、以下のように定義してます。

見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。
※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

また、Googleは、別途以下のように定義してます。

Headings give you the opportunity to tell both Google and users what’s important to you and your website. The lower the number on your heading tag, the more important the text, in the eyes of Google and your users.
※引用元:Official Google Webmaster Central Blog: Holiday source code housekeeping: Website clinic for non-profits

翻訳すると、

見出しタグは、あなたとあなたのウェブサイトにとって重要なことをGoogleとユーザーの両方に伝える機会を与えます。

このように、ユーザーと検索エンジン双方の利便性を高めるために、見出しタグは重要な役割を担ってることがわかります。

とくに「ユーザーの利便性」は、以下のようにGoogleが公式に掲げる最も重要な要素です。

  1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
    Google は、当初からユーザーの利便性を第一に考えています。

※引用元:Google が掲げる 10 の事実

また、別途Googleは以下のようにも言及してます。

  1. 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。

※引用元:ウェブマスター向けガイドライン(品質に関するガイドライン) – Search Console ヘルプ

このことから、見出しタグを適切に活用し、わかりやすいコンテンツに仕上げながら、ユーザーの利便性を考慮したサイトを運用することが重要です。

見出しタグのSEO効果について

見出しタグは、ユーザーと検索エンジン双方に重要なテキストを伝えてコンテンツ内容の認識を手助けするので、利便性が高まり、サイト評価向上によるSEO効果が期待できます。
※参考:見出しタグとは?

とくに、「ユーザーの利便性」は、以下のようにGoogleが公式に掲げる重要な要素の一つです。

  1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
    Google は、当初からユーザーの利便性を第一に考えています。

※引用元:Google が掲げる 10 の事実

また、別途Googleは以下のようにも言及してます。

  1. 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。

※引用元:ウェブマスター向けガイドライン(品質に関するガイドライン) – Search Console ヘルプ

このことから、ユーザーの利便性を考慮して見出しタグを活用することが、SEOにおいて重要と言えます。

つまり、見出しタグを適切に使って利便性を高めることで、サイトの評価が上がって順位上昇するといったSEO効果が期待できるでしょう。

見出しタグの使い方(h1~h6の正しい使い分けルール)

見出しタグの使い方として、以下のようなポイントを押さえて正しく使い分けましょう。

コンテンツの要所に見出しタグを使う

コンテンツの要所に見出しタグを使うことを、以下のようにGoogle公式に言及してます。

概要を書く場合を想像する
長い論文の概要を書く場合と同様に、ページ上のコンテンツの主要なポイントと下位のポイントは何かを検討し、それに応じてどこに見出しを使用するか決定します。

ページ全体で控えめに見出しを使用する
見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

このことから、要所を重要なテキストとして際立たせて、ユーザーによりわかりやすいコンテンツを提供しながら、見出しタグを使うことが重要です。

見出しタグを順番に使う

見出しタグを順番に使うことを、以下のようにGoogle公式に言及してます。

複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

このことから、最も重要な大見出しにh1タグ、小見出しをh2タグ、次の小見出しをh3タグというように、必要に応じてh1から順番にh6タグまでをマークアップしながら、正しい順序で見出しタグを使うことが重要です。

これらのポイントに沿うと、見出しタグで以下のようにマークアップすることができます。

まとめこのように、簡潔な文言にし、h1タグから重要な見出しを順番にマークアップして際立たせながら、利便性を考慮して見出しタグを使いましょう。

ちなみに、はてなブログやワードプレスを使ったブログサイトでは、例えばTOPページのサイト名が「h1」、記事ページのタイトル名が「h1」というように、ページの属性によって見出しタグを使い分ける必要があります。

見出しタグに画像を使う場合に意識すること

見出しは主にテキストで記述されますが、画像にも適用することが可能です。

このように、見出しタグに画像を使っても良いですが、以下のような画像に関連する一般的な公式ガイドラインを意識して使うことが大切です。

重要な名前、コンテンツ、リンクを表示するときは、画像ではなくテキストを使用します。テキスト コンテンツの代わりに画像を使用する必要がある場合は、alt 属性を使用して簡単な説明テキストを組み込みます。

※引用元:ウェブマスター向けガイドライン(品質に関するガイドライン) – Search Console ヘルプ

また、Googleは、別途以下のように言及してます。

重要なテキストを、リンク ページの見出しやメニュー項目などの要素の画像に埋め込まないでください。ユーザーによっては、その要素にアクセスできないことがあるからです。重要なテキスト ベースのコンテンツにすべてのユーザーが確実にアクセスできるようにするには、通常の HTML 内に記述してください。

※引用元:画像 – Search Console ヘルプ

このことから、重要なテキストをマークアップする見出しタグに画像を使うことは、ユーザーの利便性を考慮すると、基本的にお勧めできません。

つまり、見出しタグにテキストを使って、重要なテキストを確実にユーザーに認識させながら、サイト運用することがベースと言えます。

見出しタグ(hタグ)の入れ子ルールについて

見出しタグ(hタグ)の入れ子ルールは、以下の「インライン要素」と「ブロック要素」の関係を理解しておくとわかりやすいです。

一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。この固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。

ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様で使用されていました。

「ブロックレベル」カテゴリはおおむね HTML5 のフローコンテンツに、また「インライン」はフレージングコンテンツに対応しています

※引用元:ブロックレベル要素 – HTML | MDN

このことから、見出しタグは、HTML5の「フローコンテンツ」であり、HTML 4.01における「ブロック要素」となります。

つまり、見出しタグの中に、基本的に「span」「img」「strong」「em」などのインライン要素を以下のように含めながら、入れ子にすることができます。

HTML記述例

このように、HTMLタグの区分を確認し、使える要素を正しくマークアップしながら、見出しタグの入れ子を行うことが重要です。

h1タグの複数使用について

h1タグの複数使用に関する質疑応答について、Googleのジョンミュラー氏が以前にTwitter上で、以下のようにつぶやいてます。

翻訳すると、

質問:
見出しタグの使用について:1つのWebページでいくつのh1タグを使用する必要がありますか?唯一?

Googleジョンミュラー氏の回答:
あなたが望むだけ多く。

このことから、h1タグを複数使用しても問題ないことがわかりますが、以下のようなGoogle公式のポイントを押さえてマークアップすることが大切です。

ページ全体で控えめに見出しを使用する
見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。

  • 避けるべき方法:
    • ページ内で見出しタグを過度に使用する。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

このように、厳選してマークアップし、最も重要な見出しを強調してわかりやすいコンテンツにしながら、ユーザーの利便性を考慮してh1タグを使うことが重要です。

見出しタグの改行について

見出しタグは、brタグを使うことで以下のように改行できます。

HTML記述例

デザイン例

見出しタグを改行後のデザイン例

上記から、brタグを挿入した箇所から折り返され、改行されてテキストが表示されてることがわかります。

このように改行する際、以下のようなGoogle公式の見出しタグのポイントを抑えたうえで改行を検討することをおすすめします。

  • 避けるべき方法:
    • 見出しが非常に長い。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

つまり、改行する前に簡潔な内容に改善できなか検討したうえで、見出しタグでマークアップすることが重要と言えます。

見出しタグのリンク指定について

見出しタグは、基本的に以下のようにリンク指定をすることができます。

通常のリンク指定について

見出しタグには、通常、以下のようなHTMLマークアップで、リンク指定することができます。

HTML記述例

このように、ブロック要素である見出しタグの中にインライン要素となる「aタグ」を含めて、見出しタグの子要素としてリンク指定することができます。
※参考:見出しタグ(hタグ)の入れ子ルールについて

また、「W3CのHTML5仕様書」をもとに、以下のような見出しタグのリンク指定が紹介されてます。

※引用元:a 要素 | HTML5 タグリファレンス | W3 Watch Reference

このように、h1タグの外側にaタグを設置して、見出しタグの親要素としてリンク指定することもできます。

このことから、リンクする際に、以下のようなポイントを抑えながら見出しタグにリンク指定しましょう。

アンカー テキストが効果であるほど、ユーザーがナビゲートしやすくなり、Google がリンク先のページについて理解しやすくなります。

  • わかりやすいテキストを選ぶ
  • 簡潔なテキストを記述する
  • 見つけやすいリンクの書式を設定する

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

つまり、認識しやすいアンカーテキストにし、ユーザーや検索エンジンの利便性を高めながら、見出しタグにリンク指定することが重要です。

また、ユーザーの利便性を考慮すると、画像よりもテキストを見出しタグでマークアップするのがおすすめです。
※参考:見出しタグに画像を使う場合に意識すること

ページ内リンクの指定について

ページの利便性を高めるために、よく目次などの「ページ内リンク」を設置しているページを見かけるかと思います。

こういった場合のように、h1、h2、h3などの見出しタグ内にアンカーリンク(aタグ)を使用しても、極端な数を設置するといった使い方を除けば、検索順位に悪影響を及ぼすことはありません。

下記のように、必要があれば通常のリンク設定と同じように設置しておきましょう。
移動先には「id」を設定して、リンク元には「#」を付けて指定します。

この場合、pタグで囲まれた「見出しへジャンプする」リンクをクリックすると、h1タグへジャンプするhtml記述となります。

HTMLとCSSで見出しタグをデザインする(※サンプル例)

HTMLとCSSで見出しタグを、以下のようにデザインすることができます。

※このデザインでは、Webアイコンフォントを表示するため「Font Awesome」のCSSコードを別途HTMLファイルのheadタグ内に設置してます。

汎用的な見出しタグをデザインする

ページごとに同様で、サイト単位で汎用的に利用することが多い見出しタグを、以下のようにデザインすることができます。

HTML記述例

CSS記述例

デザイン例

HTMLとCSS使った見出しタグのデザイン例

このように、最も重要な大見出しとなるh1タグを最初にマークアップし、次に小見出しをh2、h3と順番にマークアップし、CSSで調整して視覚的にわかりやすくしながら見出しタグをデザインしましょう。

見出しタグの色やフォントサイズを調整する

見出しタグの色やフォントサイズは、CSSの「color」プロパティ、「font-size」プロパティで値を指定して、以下のように調整します。

HTML記述例

CSS記述例

デザイン例

見出しタグの色調整後のデザイン例

このように、CSSを使ってh要素を指定し、「color」プロパティや「font-size」プロパティで値を調整することで、好みの色やフォントの大きさに簡単に変更することができます。
うまく調整できない場合は、以下のように「!important」というキーワードを値の語尾に追記することで、最優先となり、指定した見出しタグの色が有効となります。

先ほどもご説明した通り、見出しタグはh1が一番重要となります。
そのため、自然とh1から順にフォントサイズを落としていくデザインになるとわかりやすいでしょう。
あとは、見た目を工夫してデザインします。

背景画像を使う

htmlの見出しに背景画像を入れるには、以下のような方法があります。

cssに記述して表示させる

背景画像用のプロパティ・値を記述したcssファイルを読み込んでデザイン調整します。

さらに、リストマークのようにワンポイントとして表示させたい場合は追記で「background-repeat」でリピートを指定し、「background-position」で位置などを調整して表示させます。

または、cssをhtmlファイルに直接記述し、見出しを調整することも可能です。

うまく背景画像が表示されない場合は、画像へのパスが正しいかどうか確認してみましょう。

背景色を表示する

見出しに背景色を表示させる場合にも、cssにその設定を記述します。
この場合は「background-color」、または「background」を使用して背景色を調整します。

また、この背景色にはグラデーションも設定することができます。
この場合、対応しているブラウザなどによって記述方法も異なりますので、こちらを参考に調整してみると良いでしょう。
参考:linear-gradient()-CSS3リファレンス

ボーダーを表示する

見出しを装飾するには、ボーダーを表示させるといったデザインもよく見かけるかと思います。
例えば、見出しの左にポイントとなる色を少し太めに表示させることによって、ユーザーは目に止まりやすくなります。
こういった見出しのデザインを工夫して読みやすいコンテンツにすることが大切です。

下記の場合だと、h1の見出しの左に6pxの赤い直線を表示させ、さらに下線として1pxの薄いグレーの直線を表示させています。
この場合、paddingで余白を調整してデザインしましょう。

位置(中央揃え・右寄せ・左寄せ)を調整する

見出しの位置を調整するには、フォントサイズ用のプロパティ「text-align」に表示させたい値を記述したcssを読み込ませて調整しましょう。

見出しタグは基本ブロック要素なので、単純に「text-align」でcenterやrightなどを指定することによって、位置を調整することができます。

まとめ

見出しタグを適切に使って、HTMLを最適化し、利便性を高めましょう。

ユーザーや検索エンジンにわかりやすいコンテンツにし、サイト評価を上げながら、SEO対策で上位表示を目指すことが重要です。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら