h1タグとは？SEO効果と使い方のポイントを解説

【h1タグの概要】

h1タグ（エイチワンタグ）とは、HTMLで見出しを意味するhタグの中で最上位の見出しのことです。

h1タグは、<h1>見出し</h1>と記述します。

h1タグに設定したテキスト情報はページ内の大見出しを示し、検索エンジンはh1タグ内にあるキーワードをページのテーマを表す重要な情報と認識します。

h1タグはtitleタグの代わりに検索結果にページタイトルとして表示される事もあるため、SEO内部対策では「titleタグ」と同様に重要視されています。

また、h1タグはWEBページ上に表示されるため、ユーザーに対してページの内容を端的に伝える役割があります。

h1がブラウザ上でどのように表示されるか次の項目で解説します。

htmlのh1タグが、ブラウザ上でユーザーにどのように見えるのか解説します。

本記事のh1タグは、 <h1>h1タグとは？使い方とタイトルとの違い・SEO効果を解説</h1>です。
ページ上では以下画像の赤枠内に大見出しとして表示され、titleタグと一致させています。

titleタグとh1タグのテキストを一致させることで、検索結果から遷移したユーザーが目的のページ内に遷移した事を伝えられるようにしています。

弊社SEOサービス「ホワイトリンク」のサービスページのh1は、<h1>価値ある SEOに 挑戦する</h1>です。
ブラウザ上では以下画像の赤枠内の部分になります。

サービスサイトはtitleタグとは一致させずに、ファーストビューのキャッチコピーをh1として利用しています。

SEOツールで有名なahrefsのh1タグは、<h1>Everything you need to rank higher & get moretraffic<h1>（和訳：上位表示とトラフィックの増加に必要なすべてのもの）と記載されており、h1タグに☆のマークを入れるなど面白い使い方をしています。

尚、日本語のサイトの方ではh1タグにロゴ画像を設定しています。

h1タグは、<h1>と</h1>で挟む形で記述するためシンプルですが、改行や画像を指定する方法を紹介します。

尚、h1タグに指定するテキストの文字数自体に制限はありません。テキストのフォントサイズを変更する場合には、fontタグ（<font size=>）ではなく、CSSで指定します。

h1タグを設定したからといって、ページの品質が高まるといった直接的なSEO効果はありません。

ただし、以下2点から間接的なSEO効果はあると考えられます。

1. 検索エンジンがページの内容を理解するのに役立つ
2. ユーザー体験に良い影響を与えることが出来る

それぞれ詳しく解説します。

検索エンジンはページの内容を理解する際、h1タグのテキスト情報を参考にします。そのため、ページの内容を端的かつ具体的に表すテキストをh1タグに入れることで、そのページのテーマや趣旨を検索エンジンに伝えることができます。

検索エンジンがページの内容を正確に理解することで、ユーザーが検索した検索クエリと関連性が高いページかどうかを判断出来るため、検索結果に表示されやすくなります。

つまり、間接的なSEO効果が期待できます。

h1タグは通常ページ上部の目立つ場所（グローバルナビやパンくずリストなどの下）に大きなフォントサイズで表示されるため、ユーザーがページの内容を理解するのに役立ちます。

ページに遷移したユーザーにとって分かりやすいデザインは、ユーザーエクスペリエンス（ユーザー体験）を向上させるため、ページの離脱率を低下させることができます。

優れたユーザーエクスペリエンスは、ランキングを向上させる可能性があります。

例えば、検索結果に表示されたページタイトルと整合性が取れていない不適切なh1が表示されてたら、ユーザーはページから離脱して再検索を行います。このようなユーザー行動はSEO的にはマイナスになります。

h1タグを効果的に使うためのポイントと注意点は、以下の7つです。

1. h1タグはhタグの中で一番上部に記述する
2. h1タグはページごとに独自の内容を記述する
3. h1タグは1ページに１つ設定する
4. ターゲットキーワードを含める
5. h1タグとtitleタグのテキストを一致させる
6. h1タグに画像を入れる場合はalt属性を使用する
7. フォントサイズを不規則にする

それぞれ詳しく解説します。

hタグには、「h1・h2・h3・h4・h5・h6」の6種類があり、数字が小さいほど重要度の高い見出しとなるためh1タグはhタグの中で一番上に記述します。

h1タグを最上部に設定したら、以下の記述例のようにそれ以降の見出しに関しても順番を守りながらh2、h3、h4と階層を深くして記述します。

【hタグを記述する順番】

以下記述例のように、SEOのメリットをh1タグに設定した場合は、その中で更に説明する見出しをh2、h3と階層を深くして記述します。

h1タグはページのテーマを表すため、titleタグと同様にページごとに独自のh1タグを設定します。

例えば、複数ページで同一のh1タグを使用すると、検索エンジンがどちらのページを評価して良いか迷ってしまい検索順位に悪影響が出る可能性があります。

【悪い例：同じ内容のh1が複数のページで使われている】

それぞれのページのテーマや、内容を表すテキストを設定するようにしましょう。

h1タグを1ページの中に複数設定すると、検索エンジンとユーザーがページの内容を正確に理解できない可能性があるため、原則として1ページにつき１つだけ設定するようにします。

Googleのジョン・ミュラー氏は、下記の動画でh1タグはぺージ内で複数使用しても問題は無いと言っています。

しかし、検索エンジンとユーザーにぺージの主要なテーマを伝える点と、スクリーンリーダーを使用するユーザーがぺージの論理構造を理解し辛くなる点を考えると、h1タグが2つ以上あるのは推奨出来ず、1つにするのが望ましいです。

h1タグにターゲットキーワードを含めて記述します。

検索エンジンはtitleタグやh1タグからページのテーマを推測し、ユーザーが検索した検索クエリとの関連性を判断しランキングを決定するため、h1タグにターゲットキーワードを含めていなかった場合と含めている場合では、後者の方がより関連性があるページと認識され検索順位が高く表示される可能性があります。

ただし、同じキーワードを何度も記述したり、過度にキーワードを詰め込む行為はスパム行為と判断されるためNGです。文字数の制限はありませんが、titleタグと同じように30文字〜35文字程度で設定しましょう。

h1タグにターゲットキーワードを入れるやり方は、別記事で詳しく解説しています。

【関連記事】

特別なケースを除きh1タグとtitleタグのテキストは同じものを使用します。

titleタグは検索結果ページ（SERPs）に表示され、h1タグはぺージ上に表示されるため、それぞれが大きく異なっている場合、ユーザーが混乱する可能性があります。

また、Googleは検索結果に表示されるページタイトルをtitleタグに設定したテキストではなく、h1に設定したテキストに書き換える事があります。このような本来意図してないページタイトルが表示されるのを防ぐためにも、titleタグとh1のテキストを一致させる必要があります。

h1タグに会社やサービスのロゴ画像を使用する事も出来ますが、画像を使用する場合は「alt属性」を設定します。

alt属性は、画像の内容を説明するテキスト情報を記述するhtmlタグで以下のように記述します。

<h1><img src="logo.png" alt="画像を説明するテキスト"></h1>

検索エンジンは画像の内容を正確に理解することができないため、h1タグに画像を設定した場合にalt属性を設定をしなければ、h1タグに何も設定されていないのと同じ扱いになります。

Googleがページのテーマを正確に理解するためにも、alt属性を使用しましょう。

【関連記事】

h1タグのフォントサイズを不規則に変えてはいけません。

h1タグを含めた見出し要素は、h1タグの文字サイズが最も大きく、数字が大きくなるにつれて文字サイズを小さくすることが推奨されています。

hタグは見出しの階層構造を示しているため、h1タグの文字サイズをh2以下のhタグよりもCSSで小さくすると、検索エンジンやユーザーが混乱する可能性があるためです。

尚、WordPressなどの一部のCMSでは、ページ内のテキストにh1タグを指定することで、フォントサイズを変更出来ますが、h1タグのフォントサイズを本文と同じにする行為などは行わないようにしましょう。

h1タグを確認するにはページ上で、右クリックし「ページのソースを表示」を選択しソースコードを開きます。次に「Ctrl+F」で検索窓を出し、「h1」と検索すると見つけることが出来ます。

この方法が一番シンプルな方法ですが、ツールを使って調べる方法があるためいくつか紹介します。

Google chromeで利用できる「H-tag」というプラグインを使うと、ページ上のh1タグやその他hタグを簡単に調べることが出来ます。

【利用方法】

1. chrome　WEBストアからH-tagをインストール
2. h1タグを調べたいぺージを開く
3. ブラウザの上部に表示された「H-tag」をクリックして「Ahow tag」をクリック

ページ上にhタグが表示されます。

その他にも、Detailed SEO Extensionを使うとhタグだけではなく、ページのtitleタグやDescriptionタグ、canonicalタグ、noindexタグの設定まで一覧で確認することが出来ます。

Screaming Frog（スクリーミング フロッグ）を使うと、WEBサイト内にある全ページのh1タグを一括で確認することが出来ます。

【利用方法】

1. Screaming Frogをインストールします。
2. ツール上部にある検索窓に調べたいWEBサイトのURLを入力して「Start」をクリック
3. クロールが完了したら、上部メニューの「h1」をクリック

ツール上に、各URLのh1タグが一覧で表示されます。

無料版は最大500URLまでとなりますが、一括でh1を確認したい場合はオススメです。

■ 質問①：h1タグとtitleタグの違いはなんですか？

回答：h1タグはページ上に表示される大見出しなのに対して、titleタグは検索結果に表示されるページ全体のテーマ（タイトル）です。

▼ 具体的な違いは以下になります。

■ 質問②：h1タグを使わないとどうなりますか？

回答：ページにh1タグを使用しなくても、SEOへ影響することはありません。SEOツールで有名なMOZが行ったページのタイトルをh1タグとh2タグで表示させるA/Bテストでは、オーガニック検索からのトラフィックに有意な差はなかったそうです。

ただし、WEBぺージ上でh1タグやその他の見出しタグを使用しない場合、クローラーがWEBページの構造を正確に理解することができなくなるため、ランキングが低下する可能性があります。

■ 質問③：h1タグに画像やロゴを使用しても問題ありませんか？

回答：h1タグ内に画像やロゴを使用すること自体は問題ありません。実際に、企業のWEBサイトではヘッダーの左上に、会社やサービスのロゴ画像を<h1>タグでマークアップしているケースが多くあります。

ただし、本来はページの大見出しとして使用するため、出来ればテキストを入れましょう。

今回は、h1タグについてSEO効果・使い方のポイントと注意点を中心に初心者向けに解説しました。h1タグは、ユーザーにページの概要を簡潔に伝え、検索エンジンにはページの構造を伝える効果が期待できます。

ただし、間違った使い方をするとSEOへ悪影響を及ぼす可能性があるため、使い方や注意点を確認し、適切に設置することを心掛けましょう。