H1タグとは？SEOベストプラクティス

この記事はAhrefs公式ブログの日本語訳です。
原文：What is an H1 Tag? SEO Best Practices
（著者：Joshua Hardwick / 原文の最終更新日：May 11, 2021）
※フルスピード註：この記事は2021年5月11日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。

H1タグはHTMLの見出しで、ウェブページのタイトルをマークアップするために一般的に使われます。通常、CSSを使用してH1タグを他の見出し（H2やH3など）よりも目立たせるためにスタイリングされます。

しかし、H1タグの重要性や追加方法、およびベストプラクティスについてはどうでしょうか？
このガイドでは、これらのすべての疑問に対する答えを学ぶことができます：

なぜH1タグがSEOに重要なのか？
H1タグを追加するには？
H1タグSEOベストプラクティス
1. ページタイトルにH1タグを使用する
H1にはタイトル・ケースを使用する
よくあるご質問
最終的な感想

なぜH1タグがSEOに重要なのか？

その理由は以下の3つです：

H1タグは検索エンジンがページを理解するのに役立ちます。
H1タグはユーザー体験を向上させる
H1タグはアクセシビリティを向上させる

H1タグは検索エンジンがページを理解するのに役立ちます。

Googleのジョン・ミューラー氏は、H1タグはGoogleがページの構造を理解するのに役立つと述べています。つまり、Googleが推奨するようにH1をページタイトルやコンテンツの見出しに使用することで、H1は事実上Googleに “私のページが何について書かれているか “を伝えていることになります。

H1タグはユーザー体験を向上させる

H1タグはウェブページの階層構造の一部であり、その存在によりユーザーエクスペリエンスが向上します。H1タグはページ上で最も目立つ見出しであり、それに続いてH2、H3などの見出しが続きます。
H1タグや他の見出しを適切に使用しないと、ページが読みづらくなり、情報を理解するのが難しくなります。

H1タグはアクセシビリティを向上させる

何百万人もの視覚障害者が、スクリーンリーダーを使ってウェブページのコピーや画像を音声に変換しています。webAIMによるこの調査によると、スクリーンリーダーのユーザーの60%は、ページタイトルのみをH1タグにすることを希望しています。

H1タグを追加するには？

ほとんどのCMSでは、ページにH1タグを簡単に追加することができます。人気のあるいくつかのCMSのH1タグの付け方を見てみましょう。

WordPressでH1タグを追加する方法

ほとんどのWordPressテーマは、ページや投稿のタイトルをH1として使用するようにコーディングされています。

WixでH1タグを追加する方法

ほとんどのWixテーマには、各ページに1つのH1タグがあります。これがどのテキストかわからない場合は、テーマエディターでH1タグのスタイルを一時的に変更してください。これにより、ページビルダーでH1が効果的にハイライトされます。

SquarespaceでH1タグを追加する方法

ほとんどのSquarespaceテーマには、各ページに1つのH1タグがあります。これがどこにあるかわからない場合は、目立つテキストボックスをクリックして、「見出し1」のスタイルがあるものを見つけてください。

HTMLでH1タグを追加する方法

冒頭のH1タグ（<h1>）を使い、ページタイトルを入力し、閉じのH1タグ（</h1>）を追加します。
例
<h1>これはH1</h1>です。

H1タグSEOベストプラクティス

ベストプラクティスを紹介する前に、これらを守らなかったからといって、あなたのウェブサイトがSEOで大混乱になる可能性は非常に低いことを覚えておいてください。ですから、これらの要件を満たしていなくても心配する必要はありません。Googleのペナルティなどの恐ろしい状況には陥りません。

Googleの仕事は、ウェブのコンテンツを理解し、インデックスし、ランク付けすることです。H1タグがないページなどの非理想的な状況を処理する仕組みがなければ、それは不可能です。

ただし、少しずつでもSEO対策は効果があるので、可能な限りベストプラクティスに従うことが有効です。以下に、H1タグのベストプラクティスを9つ紹介します：

ページタイトルにH1タグを使用する
H1にはタイトル・ケースを使用する
H1とタイトルタグを一致させる
すべての重要なページにH1タグを使用する
H1は1ページに1つだけ使用する
H1タグを短くする
階層構造のためのスタイル見出し
ターゲット・キーワードを含める
H1タグに説得力を持たせる

ページタイトルにH1タグを使用する

Googleは、「記事のタイトルは、<h1>タグなど、記事本文の上の目立つ場所に配置する」と述べています。多くのウェブサイトプラットフォームやCMSでは、デフォルトでこのように設定されていますが、特定のテーマでは上書きすることもできます。

H1タグの設定が気になる場合は、簡単な確認方法として、ブラウザでタイトルを右クリックして「検証」を選択すると、ハイライトされた部分に<h1>が含まれていれば、H1タグで囲まれていることがわかります。

HTMLが苦手な方は、Ahrefs SEOツールバーをインストールし、無料のページ内レポートでH1タグを含むHタグをご確認ください。

H1タグを一括でチェックしたい場合：

Ahrefsウェブマスターツールの無料アカウントに登録する
サイト監査のウェブサイトをクロールする
オンページ・レポートへ
「H1の設定」チャートまでスクロールする。
円グラフの緑色の部分をクリックする

H1にはタイトル・ケースを使用する

タイトルケースとは、4文字以上の単語をすべて大文字にすること。
H1タグとタイトルタグの両方にページタイトルを使用しているCMSの場合、ページタイトルに大文字と小文字を使用すると、検索結果で見た目をすっきりさせることができます。通常、小文字や文の大文字を使うのはフォーラムの投稿だけです。

H1とタイトルタグを一致させる

Googleは、タイトルタグとH1が一致するように推奨しています。
ほとんどのCMS（WordPressなど）は自動的にこれを行いますが、YoastなどのSEOプラグインを使用すると、タイトルタグをH1とは異なるものに設定することもできます。

これを行う最も一般的な理由は、ページタイトルがH1としては全く問題ないが、titleタグとしては長すぎる場合です。
例えば、この記事のタイトルとH1は少し違います：

タイトルとH1が微妙に異なる場合でも、同じテーマから派生している限りは問題ありません。ただし、タイトルとH1が劇的に異なる場合は、両者を一致させるほうが価値があるかもしれません。

なぜなら、検索結果ページ（SERP）ではタイトルタグが見えて、検索者はそれに基づいて判断を下すからです。もしページにアクセスした際に全く異なる無関係なタイトル（H1）が表示されると、検索者は騙されたと感じるでしょう。

H1とタイトルタグの不一致は、Ahrefsウェブマスターツールで無料でチェックできます。

Ahrefsウェブマスターツールに登録する
サイト監査でウェブサイトをクロールする
オンページ・レポートへ
「H1の設定」チャートまでスクロールする。
円グラフの緑の部分をクリックする。
タイトルタグとH1の不一致を探す

例えば、アンカーテキストに関するガイドの場合、タイトルタグとH1のミスマッチがある場合は次のような状況です：

タイトルタグは「定義」の視点で書かれていますが、H1は「研究」の視点で書かれています。検索者はこのページをクリックした後、少し騙されたり混乱したりするかもしれません。そのため、一貫した視点での表現を重視することが理にかなっています。

プロのアドバイス
ウェブサイトのページ数が多い場合は、Ahrefsのサイト監査のレポートをオーガニックトラフィックでソートし、優先順位の変更を行いましょう。ただし、オーガニックトラフィックを獲得していないページについては、タイトルやH1の不一致について心配する必要はあまりありません。

すべての重要なページにH1タグを使用する

ページタイトルはH1タグで囲むべきであり、重要なすべてのページでH1を使用することは当然です。結局のところ、すべてのページにはタイトルが存在します。

もしH1が存在しないか空のページを見つけたい場合は、以下の手順をお試しください：

Ahrefsウェブマスターツールの無料アカウントに登録する
サイト監査でウェブサイトをクロールする
オンページ・レポートへ
「H1の設定」チャートまでスクロールする。
円グラフの赤い部分をクリックする。

先述の方法で、いくつかのページにH1が存在しないことが確認できます。
これはベストプラクティスとは言えませんが、それらのページが特に重要ではないため、SEOの観点からは問題ありません。これらのページはブログのホームページやアーカイブページであり、主にブランドトラフィックを集める役割を果たしているからです。開発者は数分でこれを修正できるかもしれませんが、訪問者にとっては問題がないように見えるため、時間を費やす価値はあまりありません。

H1は1ページに1つだけ使用する

Googleのジョン・ミューラー氏は、1ページに複数のH1タグを使用しても問題ないと述べています。
特にHTML5を使用している場合、これは厳密に言えば正しいです。異なるセクションに複数のH1タグを使用することは、技術的には何の問題もありません。
例えば、このHTML5ページには4つのH1タグが存在しますが、技術的には問題ありません。

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h1>Taste</h1>
<p>They taste lovely.</p>
<section>
<h1>Sweet</h1>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>

ほとんどのモダンブラウザは、これを正しく表示し、入れ子になった<section>要素内のH1タグをその入れ子レベルに従って表示します。つまり、最初の<section>にあるH1はH2のように表示され、別の<section>にあるH1はH3のように表示されます。

ただし、HTML5であっても、W3Cは「セクションの入れ子レベルに応じて適切な階層の見出し」を使用することを推奨しています。

例えば、次のようになります：

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>

古いブラウザの中には、明示的なCSSルールがないと正しく表示されないものもあります。

しかし、もしもあなたのウェブサイトがHTML5を使用していない場合はどうでしょうか？

ジョン・ミューラー氏によれば、複数のH1タグを使用しても問題はありません。
HTML5を使用しているかどうかに関係なく、ページ上に複数のH1要素を持つことは問題ありません。

なぜなら、ウェブページには複数のH1が存在するという一般的な問題に対処するためのメカニズムが開発されているからです。

そのため、H1タグを1つだけ使用するか複数使用するかは、SEO上それほど重要ではないかもしれませんが、ほとんどのウェブサイトではベストプラクティスと考えられています。

Ahrefsウェブマスターツールを使用すれば、あなたのサイトに複数のH1タグを持つページがあるかどうかを無料でチェックすることができます。

Ahrefsウェブマスターツールの無料アカウントに登録する。
サイト監査でウェブサイトをクロールする
オンページ・レポートへ
「H1の設定」チャートまでスクロールする。
円グラフの黄色い部分をクリックする。

H1タグを短くする

多くのCMSでは、H1タグとタイトルタグに同じコピーを使用します。もしもあなたがそうなら、ページタイトルをユニークに書くつもりがない限り、ページタイトルを短くする価値があります。
では、どのくらい短くすればいいのでしょうか？一般的な目安は70文字以下です。
このルールに違反しているページを見てみましょう：

このページのH1タグは80文字ですが、ページ自体では問題ありません。しかし、WordPressは同じコピーをタイトルタグに使用しているため、検索結果では切り詰められてしまいます。

この問題を解決するためには、titleタグをH1タグの短いバージョンに設定することができます。ただし、最初から短いタイトルを作成していれば、この問題は起こらなかったでしょう。

階層構造のためのスタイル見出し

見出しはウェブページの階層を示すために使用されます。通常、H1タグはページ内で最も重要な見出しであるため、CSSのスタイリングでもそれを目立たせる必要があります。
つまり、H1タグはページ上で最も目立つタグであるべきです。
これは当たり前のことのように思えるかもしれませんが、実際にはH1とH2の区別がほとんどないウェブサイトがたくさん存在しています。

ターゲット・キーワードを含める

2020年、Googleのジョン・ミューラーは次のように述べています：

ページ内のテキストに関して言えば、見出しはこの部分がどのトピックに関連しているかを強力に示すシグナルとなります。

通常、H1タグはページタイトルを囲む位置に配置されるため、ページで最も重要な見出しとなります。そのため、Googleと検索者の両方に対して、ページのトピックを明確に伝えるためにメインキーワードを含めることは一般的に理にかなっています。
これはほとんどのブログ記事で行われていることです。

しかし、常にこの方法が最善かというと、必ずしもそうではありません。
読みやすさのために、ターゲットキーワードに近いバリエーションを使用することもあります。

例えば、この記事の主要キーワードは「YouTubeでより多くの再生回数を獲得する方法」ですが、私たちはリスト記事を書いているため、H1にそのキーワードを使用することは意味がありませんでした。代わりに、関連したバリエーションを使用しました。

また、自然な文体を保つために、接続詞やストップワードを使用することをためらう必要はありません。

H1タグに説得力を持たせる

H1タグは説明的でなければなりません。これは当然のことです。しかし、ブログ記事のタイトルを書く場合、クリックを誘う魅力も必要です。
魅力的な記事タイトルを作成するにはどうすればいいでしょうか？

ブログ記事タイトルジェネレーターを使用する前に、記事の目的を考えてみましょう。もし記事が検索エンジンからのオーガニックなトラフィックを集めるために存在している場合、そしてあなたのCMSがH1とタイトルタグにページタイトルを使用している場合、投稿のタイトルは検索エンジンのユーザーを惹きつけるように書かれる必要があります。

彼らが何を求めているのか、それをどうやって知ることができるのでしょうか？
ターゲットキーワードの上位表示結果からヒントを得ることができます。
例えば、「SEOテクニック」のトップページを見ると、検索者が求めているのは実用的で効果的なSEOテクニックであることがわかります。