SEO対策の基本:H1タグは1ページにつき1つだけ使うべき理由

見出しタグの基本:H1からH6までの階層構造

ウェブ開発者やデザイナーが最初に学ぶことのひとつが、HTML5の見出し要素(H1〜H6)による6段階の階層構造です。

初心者のうちは「H1が最も重要な要素であり、メインタイトルや大見出しなど、最も重要なコンテンツに使うべき」と教わります。その後、H2、H3、H4と順番に下位レベルの見出しを小見出しとして使っていくのが基本的なルールです。

初心者に多い失敗:H1の重複使用

ところが、多くの初心者が同じページ内でH1タグを複数回使用しているのを目にします。おそらく、そのページ上の複数のテキスト要素がどれも重要だと考えているためでしょう。しかし、これはSEO上の問題を引き起こします。

検索エンジンは、H1タグで囲まれたコンテンツを自動的に「そのページの主要トピック(見出し)」であると判断します。これが重要なのは、SERP(検索エンジン結果ページ)で検索した際に表示されるのが次の3つの要素だからです。

• タイトル
• メタディスクリプション
• URL

1ページ内でH1を複数回使用すると、ページごとの優先度が薄まってしまいます。検索エンジンは、検索結果を表示する際にどのH1見出しを選べばよいのでしょうか?デフォルトでは通常、上から下へと選択されますが、それは保証されたものではありません。インデックス方法やコンテンツの表示方法には、さまざまな要因が影響するからです。

検索エンジンはH1見出しをもとに、各ページで最も重要なトピックを判断します。しかし「すべてが重要だ」と伝えてしまえば、実質的には何ひとつ重要ではなくなってしまうのです。

典型的な失敗例:ポートフォリオサイトのグリッドギャラリー

H1の乱用の代表例として挙げられるのが、ポートフォリオサイトです。トップページに制作プロジェクトの一覧をグリッド形式で表示しているケースが該当します。

一見すると、各プロジェクトが個別のURL(詳細ページ)を持っているのだから、グリッドアイテムのプロジェクトタイトルにもH1を使うのが理にかなっているように思えます。

しかしこれは誤ったSEO対策です。

正しい実装方法

• クライアントのプロジェクトをグリッド表示するトップページでは、グリッドアイテムのタイトルにH2、H3、またはH4を使用する。
• 各プロジェクトの個別ページでは、プロジェクトタイトルをH1(<h1></h1>)タグで囲む。1プロジェクトページにつきH1は1つだけ。

H2以下の見出しタグは、1ページ内で何個使っても問題ありません。そのため、グリッドアイテムのタイトルにはこの3つの中からどれか1つを選んで使いましょう。

H2・H3・H4のどれを選ぶべきか?

なぜH2、H3、H4なのでしょうか?どれを選ぶかで違いはあるのでしょうか?結論から言えば、大きな違いはないと考えられます。上位表示されている大手サイトの多くは、この3つのうちいずれかを採用しており、H2がH3やH4より優れているという明確な根拠は確認できませんでした。

参考までに、実際の採用例は以下の通りです。

• css-tricks.com と Scotch.io → H2を使用
• Medium.com と sidebar.io → H3を使用

見出しはユーザーにとっても大切なサイン

見出しは、検索エンジンにコンテンツの構造を伝えるだけでなく、ユーザーに対して視覚的にもコンテンツの階層構造を示す役割を果たしていることを忘れないでください。

グリッドアイテムのタイトルにどの見出し要素を使うかは、サイトで採用しているタイプスケール(フォントサイズの一覧)で決めても問題ありません。たとえば、H3がfont-size: 1.5rem;に設定されていて、そのサイズがグリッドアイテムのタイトルにぴったり合うのであれば、それを採用すればよいのです。