TOP

h1タグとは?SEO効果と付け方のポイント7つを解説!

h1タグとは?SEO効果と付け方のポイント7つを解説!

h1」は、「見出しタグ(hタグ)のひとつ」です。
※見出しタグ(hタグ)は、HTML(Webページを作成するための言語)の要素
※hは「heading(見出し)」の略

Webページのコンテンツは、見出しによって論理的に区分・整理されることで、わかりやすい構造になります。
見出しが適切に設置されていると、検索エンジンからもユーザーからもWebページを理解してもらいやすいです。

no-img2
記事Pro
スタッフ
h1は見出しタグ(hタグ)のうち最も大きな見出しで、Webページの全体像を端的に表します。この記事では以下のポイントを押さえています。

  • h1の役割
  • h1のSEO効果や使うメリット
  • h1を上手に設置する7つのポイント
no-img2
記事Pro
スタッフ
h1についての基本情報やSEO効果について知りたい方は、ぜひ参考にしてください。

1.SEOでよく聞く「h1」とは?

1.SEOでよく聞く「h1」とは?

h1」とは、簡単にいえば「見出しのひとつ」です。
もう少し具体的にいうと、「hタグ(hは見出しを意味するheading)」のひとつです。
※hタグは6種類あり、h1はその中で最も大きな見出し

上の画像では赤枠部分がh1にあたります。
※通常、h1はWebページの一番上の方に表示される。

「hタグ」は、Webページの内容を細かなまとまりに分ける上で使われるものです。
Webページでは1つのテーマが扱われますが、関係する情報は内容ごとに細分化できます。

no-img2
記事Pro
スタッフ
非常に短い文章ではhタグによる区切りは必要ないかもしれませんが、ある程度長い文章の場合、見出しがあることでユーザーは文章構造を理解しやすくなるでしょう。

例えるなら、hタグはスーパーにある陳列棚の標識みたいなものです。

スーパーに行くと、「お菓子」「魚」「肉」「飲料」「アイス」「パン」など、さまざまな標識が目に入ります。
標識を見ると、目的の商品が置かれている場所をすぐに突き止められます。
また目的の棚に行くと、そのカテゴリーの商品がさらに別の標識で細分化されている場合があるでしょう。
「お菓子」の棚なら、「チョコレート菓子」「ポテトチップス」「おせんべい」といった具合です。

このように、スーパーの商品が標識によってカテゴリー分けされるのと似ていて、Webページの情報はhタグによって細分化されます。

なお少し技術的な話をすると、Webページは「HTML」と呼ばれる言語を使ってブラウザに表示されます。
HTMLはhタグを含むさまざまなタグによって構成されており、表示させたいテキストなどをタグで囲むのが基本ルールです。

例えば「hタグ(h1)」を使用する場合、表示させたいテキストが「ブログを上手に書く方法」であれば、以下のように記述します。

見出しタグの付け方の例

上記の例の場合、ブラウザには「ブログを上手に書く方法」と表示されます。

1-1.見出しの大きさは「h1>h2>h3~」

hタグには、h1を含めて全部で6つの種類があります。

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

hの次にくる数字が小さいものほど、大きな見出しです。
つまり見出しの大きさを比較すると、「h1>h2>h3>h4>h5>h6」という順位になります。

Webページの構成を組み立てるときは、文章のまとまりの大きさに合わせて適切なhタグを用います。
例えば、「有酸素運動」をテーマにした記事を書く場合、以下のような見出し構成を組み立てられるでしょう。

タグの構成表の例

no-img2
記事Pro
スタッフ
この例だとh1が一番大きな「くくり」で、その下にh2が4つ配置されています。それぞれのh2には、h2の内容に深く関連する情報がh3で細分化されており、h3がさらにh4で細分化されている箇所があります。

九段さん
なるほど。こうやって情報をhタグで細かくまとめるとわかりやすいですね。ところで、h5やh6はないようですが…。

no-img2
記事Pro
スタッフ
すべてのhタグを使わないといけないわけではありません。それほど情報の種類が多くなければ、h3やh4くらいまで使えば問題ないでしょう。

九段さん
あとh2やh3・h4が複数あるのに対して、h1は1つしかありません。それぞれのタグを使える回数が決まっているのでしょうか?

no-img2
記事Pro
スタッフ
いいえ、特に使用回数に制限はありません。詳しくは後述しますが、h1を複数使ってもかまいません。ただしh1はWebページのテーマ全体を示す見出しとして使われることが多いようです。そのため各ページに1つ設定するのが無難でしょう。

なおWebページがブラウザで表示される際、hタグの種類によって見出しの文字の大きさが変わります(ブラウザにより仕様は異なる)。
以下の画像をご覧ください。

タグの大きさ比較表

このように通常は、h1が最も大きなサイズで表示されます(大きさは指定可能)。

関連記事:「記事の見出しはSEOの大黒柱!上手につける6つのコツを紹介

1-2.Title(タイトル)タグとは別物

1-2.Title(タイトル)タグとは別物

「h1はWebページのテーマ全体を示す見出しとして使われることが多い」と説明しましたが、そう聞くと「h1とタイトルが同じもの」であると考える方は少なくないでしょう。
しかし、h1とタイトルは別物です。

使われるタグは違いますし(タイトルタグは「タイトル」)、そもそもブラウザで表示される箇所が異なります。
タイトルはGoogleの検索結果ページに表示されますが、h1はユーザーがアクセスしたWebページ内に表示されます。

つまり、タイトルはWebページの外、h1はWebページの中です。
さきほどのスーパーの例えでいうなら、タイトルが道路脇に掲げられたスーパーの看板(「生鮮食品の総合スーパー○○」など)で、h1はスーパーの建物正面に掲げられた看板(「生鮮食品・飲料・パンの総合スーパー○○」など)といった感じでしょう。

h1とタイトルは別物ですが、両方のテキストが同一か酷似しているケースは珍しくありません。
というのも「Webページのテーマ全体を示す」という点で、両者の働きは似ているからです。

タイトルは、検索結果ページを見ているユーザーに、「このWebページには○○について書いてありますよ」と伝えます。
h1はWebページ内に入ったユーザーに、「今から○○について説明しますね」とページ紹介をするものです。

no-img2
記事Pro
スタッフ
タイトルとh1をまったく同じにしてもよいですし、少し変えても問題ありません。h1の記述のコツについては後述します。

2.h1とSEOの関係

h1とSEOには、どのような関連性があるでしょうか?

結論からいうと、h1をつけたからといって、検索順位において絶対的に有利になるわけではありません。
一方で、h1をつけないからといって不利になるわけでもありません。

h1に関するGoogleの公式コメントを見てみましょう。

“(訳文)h要素は適切な場所に配置する
別の簡単な解決策は、あなたのサイトで見出しタグを適切に使用することです。私たちの非営利調査によると、対象サイトの約19%に見出し要素に関する改善の余地が見つかりました。hタグの最も一般的な問題点は、恐らく見た目を気にして、h1ではなくh2やh3でヘッダー箇所を開始しようとする点です。
見出しはGoogleとユーザー双方に対して、あなたとあなたのサイトにとって何が重要なポイントかを示す役割を果たします。hタグの数字が小さいほど、Googleとユーザーにとってテキストは重要さを増します。h1タグを上手に使いましょう!h1タグを使うことによる見た目の問題が気になるなら、CSSを使っていつでも外観を変更できます。”

出典:“Holiday source code maintenance:Website clinic for non-profits”,Google Search Central

no-img2
記事Pro
スタッフ
このコメントによると、h1を使うとGoogleに対してWebページの重要点をアピールできることがわかります。

続いて、Googleのスタッフであるジョン・ミューラー(John Mueller)氏のコメントを見てみましょう。

“(訳文)見出しは、私たちがあなたのコンテンツの文脈を少しばかり明確に理解するのに役立ちますが、劇的な変化をもたらすものではありません。仮にあなたが見出しを適切に使わなかったとしても、私たちはそれを問題視しません。「これはよくないから、我々のアルゴリズムは検索順位を下げるだろう」と考えることはないでしょう。
見出しはWebページの構造理解に便利なものですが、「これは絶対的に重要だ」というものではありません。”

出典:“English general Google Webmaster Central office-hours hangout”,Google Search Central

no-img2
記事Pro
スタッフ
ジョン・ミューラー氏は見出しの価値を認めているものの、「Webページに欠かせない必須の要素ともいえない」としています。

まとめると、h1を含む見出しは適切に設置すると便利ですが、設置方法に問題があったところで、検索順位に影響する要素にはなりません。

関連記事:「【SEOビギナー必見】SEO対策とは?基本と実践方法を徹底解説

2-1.h1を使うメリット

2-1.h1を使うメリット

検索順位に大きな影響がないとしても、サイト運営者はh1をはじめ、適切な見出しの設置を意識すべきです。

Webページが上位表示されるに越したことはありませんが、SEOの本質は「ユーザーに有益なコンテンツを、わかりやすい仕方で提供すること」です。

Googleが公式に認めているとおり、見出しはGoogleにとっても、ユーザーにとってもコンテンツ理解をするのに便利な要素であるため、積極的に利用しましょう。

no-img2
記事Pro
スタッフ
先ほどのスーパーの例えでいえば、各陳列棚に標識がなかったとしても、そのスーパーで売っている商品の価値が変わるわけではありません。とはいえ、標識があった方が買い物客に親切でしょう。同じように、h1がなくてもWebページが提供する情報の価値が失われるわけではありませんが、あった方が便利です。

また、h1にはほかのメリットも期待できます。

例えば、h1はタイトルの代わりに検索結果ページで使用されることがあります。

タイトルの代わりに使われることは、検索結果ページを見ているユーザーの目に留まることを意味します。
h1が適切に設置されており、かつそのテキストが魅力的であれば、数あるWebページの中で自サイトのページを選んでもらいやすいでしょう。

またh1を含む見出し情報は、「スクリーンリーダー」を使用する方にも役立ちます。
※「スクリーンリーダー」とは、視覚障害者がコンピュータ操作を助けるために、コンピュータがページ情報を音声で読み上げる機能

スクリーンリーダーは、見出しレベルの情報とともに、見出しテキストを読み上げたり、ビープ音やその他の聴覚要素を提供したりできます。
h1を適切に設置するなら、視覚障害者の方がWebページの内容を理解しやすくなるでしょう。

3.SEOによい見出し(h1を含む)のつけ方7ポイント

h1を含む見出しの基本がわかったところで、SEOによい見出しのつけ方を7つご紹介します。
以下の7ポイントです。

  • 複数のh1は使わないのが無難
  • h1タグから順番に見出しをつける
  • 対策キーワードを含める
  • キャッチーな言い回しにする
  • タイトルとの間に一貫性を持たせる
  • 比較的少ない文字数で記述する
  • 基本は画像よりテキスト

ひとつずつ見ていきましょう。

3-1.複数のh1は使わないのが無難

3-1.複数のh1は使わないのが無難

1つ目のポイントは、「複数のh1を使わないこと」です。

先述のとおり、h1を複数回使うことには何の問題もありません。

以下のジョン・ミューラー氏のコメントをご覧ください。
「h1タグを各Webページに1つだけ設置するのは決まりですか?それとも複数回使えますか?」という質問に対して、以下のように回答しています。

“(訳文)この質問はよく出てきますが、あなたが好きなだけ使えます。上限も下限もなく、自由に使えます。h1はWebページの構造を伝えるのに素晴らしい方法であるため、ユーザーと検索エンジンはページ内の階層を理解できます。ですから私は適切な方法でh要素を使うでしょう。
特にHTML5において、複数のh1タグが同一ページにあるのはいたって普通のことですし、予想されていることでもあります。ですから心配することはありません。SEOツールの中には「h1をまったく使ってない」とか「h1を2回使っている」などの指摘をするものがあります。しかし、私たちはそれらが重要な問題であるとは考えません。ユーザビリティーの観点からいえば、改善すべきかもしれませんが。私はそういう提案をまったく無視するわけではありませんが、重要な要素とは思いません。仮にあなたのサイトにh1がなくても、5つのh1があっても、うまくいくかもしれません。

出典:“English Google Webmaster Central office-hours from September 27,2019”,Google Search Central

ジョン・ミューラー氏はh1の複数利用について、否定的なことをまったく述べていません。
そのためh1の使用回数を気にする必要はないでしょう。

とはいえ複数回使うことに明確なメリットがない限り、h1は各ページに1つ使用するのが無難といえます。

h1が同一ページ内に意味なく複数出現すると、ユーザーはページ内の重要な要素を見分けづらく感じるかもしれません。
h1は文字サイズが特に目立つこともあり、ユーザーの利便性を考えると、h1が1つの方がスマートに思えます。
※CSSで文字サイズを調整する場合は異なります。

no-img2
記事Pro
スタッフ
特にこだわりやメリットがなければ、ページのテーマ全体を示すh1を1つ設置し、h2を使っていくつかの重要な見出しに分けるとよいでしょう。

3-2.h1タグから順番に見出しをつける

3-2.h1タグから順番に見出しをつける

2つ目のポイントは、「h1タグから順番に見出しをつけること」です。

Webページの見出し構成を考えるときは、「h1→h2→h3…」というように順番で見出しをつけていくのがセオリーです。
先ほど例に挙げた見出し構成をもう一度見てみましょう。

タグの構成表の例

画像では、h1から始めて、h2・h3と順序よく階層が作られています。
このようにhタグの数字に沿って見出し構成を組み立てると、ユーザーにとってわかりやすいページになるでしょう。

九段さん
順番を守らないと、検索順位に悪影響が及ぶことはありますか?

no-img2
記事Pro
スタッフ
ありません。ジョン・ミューラー氏は、hタグの順番に関する質問に対して、以下のコメントをしています。

“(訳文)順番は問題になりません。私たちは見出しを通して、コンテンツの前後関係をより理解できます。しかし、hタグの厳密な順番に関しては問題にしていません。テンプレートやあなたのページの何かの要素が原因で、h1が複数あるとか、あるいは…順番が少しばかり違うとかいうことがあるかもしれません。しかし、まったく問題はありません。”

出典:Google 検索セントラル

no-img2
記事Pro
スタッフ
このように、検索順位が下がる心配はありません。とはいえHTMLの本来の使い方では、H1から数字順に見出し記述することになっています。h1からh6に向かってブラウザ上の文字が小さくなること自体も、それが自然な流れであることの証拠です。いきなりh3からWebページが始まったり、h4からh1につながったりするのは不自然です。

検索エンジンが正しくWebページの内容を読み取れるとしても、ユーザーに混乱をきたすような要素は避ける方が賢明です。
例えば、先ほどh1を含む見出しのメリットとして、「スクリーンリーダーの使用者に便利」という点を説明しました。
仮に見出し構造がバラバラであれば、ユーザーが正しく見出しを認識する上で支障が生じるかもしれません。

ブラジルで以前Googleのスタッフだったペドロ・ディアス(Pedro Dias)氏が述べた次の言葉どおり、サイト運営者は検索順位だけでなく、ユーザーに親切なサイト作りを心がけるべきです。

“(訳文)私は検索順位に直接関係することだけ改善しようとする考え方が嫌いだ。
(リツイート元)h1やh2の見出し順序はGoogleにとって重要か?いや重要ではない。だけど正しい順序は利便性やアクセスのしやすさにおいて重要だ。であれば、何故正しい順序に直さないのだろうか?”

3-3.対策キーワードを含める

3-3.対策キーワードを含める

3つ目のポイントは、「対策キーワードを含めること」です。

各Webページには対策キーワードが設定されていて、キーワードをベースにコンテンツが執筆されます。
良質なコンテンツは、キーワードから脱線した情報を提供することはありません。

この点、h1はWebページのテーマ全体を示すものであるため、当然対策キーワードが含まれてしかるべきでしょう。
ページにアクセスしてきたユーザーが目にするのは、多くの場合h1のテキストです。

もしh1にキーワードが含まれていなければ、せっかちなユーザーの場合、「自身がほしい情報がそのページになさそうだ」と判断してブラウザバックするかもしれません。
一方h1にキーワードが盛り込まれていれば、読み進めてくれる可能性が高まります。

no-img2
記事Pro
スタッフ
また、ご紹介したGoogleスタッフのコメントにあったように、見出しはGoogleがコンテンツの情報を理解するのに役立つ要素です。h1にキーワードがあれば、Googleはページ内の重要テーマをより認識しやすくなると期待できます。

関連記事:「キーワード数はSEOに関係ある!?上手な入れ方を徹底解説

3-4.キャッチーな言い回しにする

3-4.キャッチーな言い回しにする

4つ目のポイントは、「キャッチーな言い回しにすること」です。

タイトルと同じく、h1のテキストもユーザーを引き付ける言い回しにすべきです。
ページにアクセスしてきたユーザーがh1を見たとき、「読みたい」と思わせるような言い回しだと、読み進める動機付けを与えます。

具体的には以下のような要素を意識してh1のテキストを決めるとよいでしょう。

  • 意外性のある言い方(例:実は○○は○○だった!、9割の人が知らない○○)
  • 疑いを抱かせる言い方(例:○○って本当に○○!?、まだ○○してるの!?)
  • 共感を示す表現(例:【つらい50代の○○(悩み)】)
  • メリットを感じさせるテキスト(例:○○を実践すると〇〇力アップ!、○○する5つのメリット!)
  • 「手軽」「気軽」を感じさせる文(例:たったこれだけ!、○分間で○○解消!)

ページ上部のh1でユーザーの心をひきつければ、ページ内の平均滞在時間を伸ばしやすくなります。

ただし、「h1だけがキャッチーで本文は薄い」コンテンツにならないよう注意しましょう。
これはタイトルにも当てはまる点ですが、そのような「名前負け」のコンテンツだと、ユーザーからの信頼を失います。

サイト名を覚えられたら、「このサイトはタイトルやh1で釣るサイト」というレッテルを貼られてしまうかもしれません。
あくまで、本文に有益で信頼できる情報があることが前提です。

3-5.タイトルとの間に一貫性を持たせる

3-5.タイトルとの間に一貫性を持たせる

5つ目のポイントは、「タイトルとの間に一貫性を持たせること」です。

「h1とタイトルは同一か酷似していることが多い」と説明しましたが、h1のテキストに変化を持たせることもできます。
しかしその場合は、タイトルの内容と本質的に同じ内容のテキストになるようにしましょう。

もしタイトルとh1の内容が大きく違ったら、ユーザーは混乱してしまいます。
例えばタイトルとh1のテキストが、以下のように設定されたらどうなるでしょうか?

タイトルとh1の内容が異なる例

これだとユーザーは、「あれ、検索結果ページで選んだページじゃないかも」と感じてしまうでしょう。

no-img2
記事Pro
スタッフ
先ほどタイトルを道路脇の看板に、h1を建物正面の看板に例えました。もし、道路脇の看板に「生鮮食品の総合スーパー」と書かれているのに、建物正面の看板に「建築資材と家庭用品のホームセンター」と書かれていたら変な話です。ユーザーの利便性を損なって、ページ離れを起こさないためにも、タイトルやh1には一貫性を持たせましょう。

3-6.比較的少ない文字数で記述する

3-6.比較的少ない文字数で記述する

6つ目のポイントは、「比較的少ない文字数で記述すること」です。

h1に文字数制限はありません。
望むなら長文にすることも可能です。

しかしあまりに長いと、読みにくくなってしまいます。
長すぎて頭に入ってこない校長先生の話のように、ユーザーはWebページが何を強調しているのか理解できません。

パッと見てすぐに理解できるくらいの短い文がベストです。

九段さん
具体的に何文字くらいがよいでしょうか・・・?

no-img2
記事Pro
スタッフ
タイトルと同一にしたい場合、28文字前後くらいにおさめるのがよいでしょう。検索結果ページの表示制限上、タイトルの文字数はそのあたりが上限になるからです。ただしタイトルを補足したい場合は、もう少しテキストを長くするのも効果的です。以下に一例を示します。

テキストを長くする一例

3-7.基本は画像よりテキスト

7つ目のポイントは、「基本は画像よりテキストでh1を記述すること」です。

ロゴマークやユーザーの注意をひきつける画像などをh1の位置に貼り付けることもできます。

その場合は「altタグ」と呼ばれる代替テキストを記述し、Googleが画像の内容を理解できるように工夫しましょう。
またWebページの内容と関連性のある画像を使うことも大切です。

しかし、特に理由がないのであれば、h1には画像よりもテキストをおすすめします。
というのも、Googleは画像より、テキストをより理解できると考えられるからです。

no-img2
記事Pro
スタッフ
h1は、SEOにおいて大きな影響力を持つ要素ではありませんが、少しでもGoogleからWebページを正しく理解してもらうために、対策キーワードを含むわかりやすいテキストにするとよいでしょう。

4.見出し(h1を含む)にマッチする記事作りがSEOに重要

ここまでh1を含む見出しの基本やSEOとの関連について解説しました。

見出しは、Webページの情報をわかりやすく整理するのに役立ちます。
見出しが適切に設定されていれば、検索エンジンもユーザーもページの構造を理解しやすいです。

とはいえ、見出しと本文との間に差異があるのでは意味がありません。

ユーザーは見出しを見て、書いてある内容を予想します。
仮に予想していた内容や期待していた内容が書かれていなければ、肩透かしを食う形になるでしょう。

見出しに沿った内容の濃い本文を書くことが、良質なコンテンツとして評価されるために重要です。

タイトルにしてもh1にしても、ディスクリプションにしても本文にしても、各Webページの情報は常に一貫性を持っていなければなりません。

4-1.SEO特化型記事なら「記事作成代行Pro」へ!

記事作成代行proのトップ画像

「SEOに強いライティング方法がよくわからない」
「良質なコンテンツを継続して公開したいけど人手が足りない」

サイトのコンテンツSEOを強化したいものの、このような悩みを持っている方は少なくないでしょう。
そんなときはぜひ、弊社のSEO特化型記事作成サービス「記事作成代行Pro」をご活用ください。

弊社は「心に響くコンテンツ」「SEOを強化する良質なコンテンツ」の作成を得意としております。
心理学」を応用しつつ、ユーザーの検索意図を見極めて適切な見出し構成を組み立てることに7割の時間を費やすため、ユーザーに訴える記事を作成できます。

以下は弊社の実績を示すデータの一部を抜粋したものです。

記事Proの実績を示すデータの一部
※塗りつぶしている部分は顧客情報に関連するため非表示

赤枠の数字は検索順位の伸びを示す数字で、左隣の数字がコンテンツ公開後の順位です。
複数の対策キーワードで、検索順位1位を獲得しているのがわかります。

弊社がSEOに強い記事を作成できるのには、ほかにも以下のような理由があります。

・専属ライターによる「統一感のある記事」
同じライターが記事執筆をすることで、ブレのない記事を継続公開できます。

・ディレクターと校閲&校正者によるチーム作業
ライターが組み立てた見出し構成をディレクターがチェックし、執筆後はプロが校閲&校正するため、精度の高い記事が仕上がります。

・徹底したライター研修制度
SEOのノウハウに精通できるよう、ライターとのミーティングや資料共有を行っております。

no-img2
記事Pro
スタッフ
弊社のサービスには、以下のメリットもございます。

  • 必要な作業内容を選べる5つのプラン
  • 必要に応じて追加できる4つのオプション(WordPress入稿、画像挿入、画像文字挿入、SEOコンサルティング)
  • 低コストの文字単価(4.5~9.5円/文字、相場は7~10円)
  • 各種割引サービス

コストパフォーマンスと質の高さを両立しているのが、弊社のサービスの特長です。
「サイトのコンテンツ力をさらに高めたい方」「まとまった数の記事をアウトソーシングしたい方」は、ぜひ一度弊社の公式サイトをご覧ください。

5.まとめ

h1はhタグのひとつであり、最も大きな見出しです。
見出しはWebページの情報を細分化するのに使われ、適切に設置されることで、検索エンジンとユーザーのコンテンツ理解が進みます。

h1はタイトルと同様、Webページのテーマ全体を示す役割があり、アクセスしてきたユーザーとの最初の「接点」です。
そのためh1のテキストは、Webページの対策キーワードに沿ったものにし、かつユーザーの関心を引くキャッチーなものにしましょう。

no-img2
記事Pro
スタッフ
ご紹介した7つのポイントを参考にしつつ、h1をはじめ適切な見出しをつけてください。またより重要な点として、見出しにマッチし、かつ内容の濃い本文を執筆するよう心がけましょう。ただしSEOに強いライティングには多くのノウハウとスキルが求められます。必要に応じてプロにアウトソーシングするのもよい選択肢です。