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

SEOラボ

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

2018/03/28 2018/04/23

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

今回は、見出しタグの使い方、HTMLとCSSで見出しタグをデザインする方法など中心に解説したいと思います。

【見出しタグの使い方】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記述例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML記述例

CSS記述例

デザイン例

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

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

見出しタグの色を調整する

見出しタグの色は、CSSのcolorプロパティで値を指定して、以下のように調整します。

HTML記述例

CSS記述例

デザイン例

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

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

また、HTMLとCSSを使った見出しタグのデザインについて、以下関連記事でより詳しく触れてますのでご参照ください。

まとめ

見出しタグを適切に使い、利便性を高めましょう。

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

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

カテゴリから記事を探す