WEB歴 7年の専門家がホームページやブログ運営に役立つ情報を発信しています。

更新日:2020年4月3日

見出しタグとは?正しい書き方とSEO効果を上げるポイント

見出しタグって何?

SEOに効果があるの?

といった方を対象に、見出しタグの意味、正しい書き方、SEOで効果を上げるためのポイントについて、分かりやすく説明します。

当記事を読めば、SEOに必要な見出しタグの知識をすべて身に付けることができます。

見出しタグとは

見出しタグは、検索エンジンにウェブページの見出しを伝えるためHTMLタグです。

ちなみに、見出しとは次のような意味です。

見出しとは、新聞を始めとする様々な記事、文章において内容の要点を非常に短い言葉にまとめ、本文より大きな字で章(チャプター)や節(セクション)の最初に置かれる言葉。

引用:ウィキペディア(Wikipedia)見出し

ウェブページの見出しと聞くと難しく感じますが、そんな事はありません。私たちが、いつも読んでいる新聞や雑誌、書籍などの見出しと同じです。

そして、そのウェブページの見出しを伝えるための専用タグが見出しタグです。

もう少し具体的に説明します。

下の画像のように、私たちが読む新聞や雑誌の見出しは「文字サイズを大きくしたり太くしたり」して他の文字より目立つようになっています。

新聞の見出しを赤線で囲んだイラスト

そのため、私たち人間は「見出しがどこにあるか」をすぐに理解することが出来ます。

これと同様の役割をするのが見出しタグです。

検索エンジンに見出しを伝えるためには「文字サイズを大きくしたり太く」したりするのではなく「見出しタグでマークアップする」という訳です。

具体的には、次のHTMLタグを使用します。

<h1>、<h2>、<h3>、<h4>、<h5>、<h6> の 6種類


使用例:<h1> 見出しタグとは </h1>

詳しい書き方については後述します。

見出しタグの本当の意味:ユーザーに重要なテキストを伝える

先ほど「見出しタグは検索エンジンに見出しを伝えるためのもの」と説明しましたが、本当は少し違います。

本来「見出しタグはウェブサイトのユーザー(閲覧者)に見出しを分かりやすく伝えるためのもの」です。それを検索エンジンもページ内容の理解に利用しているというのが正しい説明になります。

見出しタグの役割について Google は次のように説明しています。

見出しタグを使用して重要なテキストを強調する

一般に、見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。

引用:検索エンジン最適化(SEO)スターター ガイド

この文章を見ると分かるように、本来「見出しタグはウェブサイトのユーザー(閲覧者)に見出しを分かりやすく伝えるためのもの」です。

見出しタグのSEO効果【検索順位への影響】

見出しタグは検索順位に影響があります。その根拠は次の3つです。

  • 検索エンジンはページ内容の理解に見出しタグを使用
  • 検索エンジンはユーザーの役に立つページを上位に表示
  • ウェブページが読みやすくなることで被リンクが増加

それぞれについて順番に説明していきます。

検索エンジンはページ内容の理解に見出しタグを使用

一つ目の根拠は、次の動画で Google のジョン・ミューラー氏が「検索エンジンはページ内容の理解に見出しタグを使用している」と言っている事です。

ページの内容を理解するために見出しタグを多少は使っている(後略)

引用:見出しがh1→h2→h3の順でないと、SEOに悪影響あったりします?

ウェブページを検索結果の上位に表示させるためには、検索エンジンにページ内容をしっかりと理解してもらう必要があります。

たとえば、ウェブページの内容がとても素晴らしいものだとします。しかし、その内容を検索エンジンが80%しか理解できなければ 80%の評価しか受けることができません。

この場合、ウェブページの検索順位はそれほど高くはならないでしょう。

先述したように、ウェブページを検索結果の上位に表示させるためには検索エンジンにページ内容をしっかりと理解してもらう必要があります。そして、そのためには見出しタグを適切に利用する必要があります。

したがって、見出しタグは間接的にウェブページの検索順位に影響があります。

検索エンジンはユーザーの役に立つページを上位に表示

二つ目の根拠は、Googleの検索エンジンがユーザーにとって使いやすい(利便性の高い)ページを検索結果の上位に表示するように設計されていることです。

このことは、次の文章を見れば分かります。以下、公式サイトからの引用です。

ユーザーに焦点を絞れば、他のものはみな後からついてくる。

Google は、当初からユーザーの利便性を第一に考えています。

引用:Google が掲げる 10 の事実

検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。

引用:ウェブマスター向けガイドライン(品質に関するガイドライン)

先述したように「見出しタグはウェブサイトのユーザー(閲覧者)に見出しを分かりやすく伝えるためのもの」です。言いかえると「ユーザーの利便性を高める」ものです。

見出しタグを適切に使えばユーザーの利便性が高いウェブページになります。そうすれば、検索結果の上位にウェブページが表示されやすくなります。

このように、見出しタグは間接的にウェブページの検索順位に影響します。

ウェブページが読みやすくなることで被リンクが増加

三つ目の根拠は、ウェブサイトの被リンクに影響することです。

どういうことかを説明します。

①ウェブページの内容をしっかりと読む②「おもしろい、役立つ」と感じる③人に紹介する(リンクを貼る)

上の画像に示したように、被リンクを獲得するためには、まずウェブページの内容をしっかりと読んでもらう必要があります。

そして、ウェブページを読んでもらうためには内容だけではなく見た目による内容の読みやすさ」も大きく影響します(下記画像を参照)。

見出しタグを使用したウェブページのサンプル画像
見出しタグを使用していないウェブページのサンプル画像

上の 2つの画像を見比べるとわかるように、見出しの有無だけでも「見た目による内容の読みやすさ」は大きく変わります。

つまり、見出しを適切に使用したほうがウェブページを読んでもらえる確率が上がり、被リンクの増加が期待できるというわけです。

このような点からも、見出しタグは検索順位(SEO)に影響すると言えます。

見出しタグの基本的な書き方【HTML】

次に、見出しタグの書き方について説明していきます。

  1. HTMLの書き方:<h1> 〜 <h6>
  2. 見出しタグを使用する順番(書く順番)
  3. <h6>まで使う必要はない
  4. <h1>は1ページに1つ
  5. WordPressの設定方法

HTMLの書き方:<h1> 〜 <h6>

見出しタグの書き方は次のとおりです。

        <h1>テキスト</h1>
                <h2>テキスト</h2>
                <h3>テキスト</h3>
                <h4>テキスト</h4>
                <h5>テキスト</h5>
                <h6>テキスト</h6>

上記コードの黄色い文字に見出しとなるテキストを入力します。

見出しタグが 6種類ある理由

見出しタグが 6種類ある理由は、見出しごとの重要度を検索エンジンに伝えるためです。重要度は <h1> タグが一番高く <h6> に進むにつれて低くなります。

見出しタグの重要度

<h1> → <h6>

<h1> の重要度が一番高く <h6> の重要度が一番低い

見出しの重要度とは?

見出しの重要度ってなに? と思われる方もいると思います。

そんな方のために具体例を使用して説明します。次の画像は、見出しだけで作成したウェブページのサンプルです。

見出しタグのマークアップ例を説明した画像

上記の画像を見ていただくと「見出しによって重要度が違う」ということを何となく理解できるのではないかと思います。

ちなみに、見出しの重要度の順番は次のとおりです。

見出しの重要度

大見出し… 1番重要度が高い

中見出し… 2番目に重要度が高い

小見出し… 3番目に重要度が高い

見出しタグを使用する順番(書く順番)

見出しタグは使用する順番が決まっています。具体的には次のとおりです。

<h1> → <h2> → <h3> → <h4> → <h5> → <h6>

「重要度の高い見出しタグから使用する」もしくは「数字の小さい見出しタグから使用する」と覚えておくと良いと思います。

        良い例:<h1><h2><h3><h4><h5><h6>
                悪い例:<h1><h3><h2><h3><h2>が逆
            

<h6> まで使う必要はない

一つのウェブページに <h1>から<h6> の見出しタグを全て使用する必要はありません。

具体的に説明します。例えば、下の画像のようなウェブページがあったとします。

見出しタグのマークアップ例を説明した画像

この場合ならば<h1>、<h2>、<h3>の3種類だけを使用すれば良いという意味です。見出しではない部分に <h4> から <h6> を無理して使う必要はありません。

<h1>タグは 1ページに 1つ

見出しタグに使用回数の制限はありませんが、「h1」タグを使用するのは 1ページに 1回だけにしてください。

その理由は、検索エンジンにウェブページの主題(テーマ)を正確に伝えるためです。

見出しタグのマークアップ例を説明した画像

ウェブページの主題(テーマ)を伝える h1 が 同じページに複数あったら検索エンジンはどう判断するでしょうか?

おそらく、どれが主題(テーマ)なのか迷ってしまうでしょう。

検索エンジンがウェブページの主題(テーマ)を間違えてしまったら、狙っている検索キーワードでの上位表示は「まず」無理でしょう。

したがって、h1 タグは 1ページに 1回だけ使用するようにしてください。

WordPressでの設定方法

参考までに、WordPressを使用している場合の見出しタグの設定方法を紹介します。

コードエディターを使用する場合

コードエディターでの見出しタグの設定方法は、次の画像のとおりです。

ワードプレスの「テキストエディター」で見出しタグを設定する方法

ビジュアルエディターを使用する場合

ビジュアルエディターでの見出しタグの設定方法は、次の画像のとおりです。

ワードプレスの「ビジュアルエディター」で見出しタグを設定する方法

Googleからペナルティを受けないための注意点

Google は、見出しタグを設定する際の注意事項として次の 6つをあげています。

見出しタグ:避けるべき方法

  • ページの構造を定義するのに効果的でないテキストを見出しタグで囲む
  • <em> や <strong> のような他のタグの方が適している場所で見出しタグを使用する
  • 見出しタグのサイズを不規則に変える
  • ページ内で見出しタグを過度に使用する
  • 見出しが非常に長い
  • 構造を示すためではなく、テキストの書式を整える目的で見出しタグを使用する

上記の注意点を分かりやすくまとめると次のとおりです。

  • 見出しではない部分に「見出しタグ」を使用しない
  • 見出しタグのサイズを不規則に変える
  • ページ内で見出しタグを過度に使用する
  • 見出しは短く分かりやすい言葉で設定する

それぞれの意味について簡単に説明します。

見出しではない部分に「見出しタグ」を使用しない

見出しではない部分に「見出しタグ」を使用しない、の意味は次のとおりです。

本当は見出しではない部分に「文字のサイズや色を変える目的」で見出しタグを使用してはいけない、という意味。

先ほど紹介したGoogleの注意事項で該当するのは次の項目です。

  • ページの構造を定義するのに効果的でないテキストを見出しタグで囲む
  • <em> や <strong> のような他のタグの方が適している場所で見出しタグを使用する
  • 構造を示すためではなく、テキストの書式を整える目的で見出しタグを使用する

見出しタグのサイズを不規則に変える

見出しタグのサイズを不規則に変えるの意味は、そのままです。

たとえば、同じページで使用している「h2」タグの文字サイズを、大きくしたり小さくしたりしてはダメという意味です。

先ほど紹介したGoogleの注意事項で該当するのは次の項目です。

  • 見出しタグのサイズを不規則に変える

ページ内で見出しタグを過度に使用する

ページ内で見出しタグを過度に使用する、の意味については次の文章を読むと理解しやすいと思います。

見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。

先ほど紹介したGoogleの注意事項で該当するのは次の項目です。

  • ページ内で見出しタグを過度に使用する

見出しは短く分かりやすい言葉で設定する

見出しは短く分かりやすい言葉で設定する、の意味はそのままです(説明は省略)。

先ほど紹介したGoogleの注意事項で該当するのは次の項目です。

  • 見出しが非常に長い

以上で、Googleからペナルティを受けないための注意点の説明は終了です。

見出しタグのSEO効果を上げる 3つのポイント

見出しタグのSEO効果を上げるためのポイントは次の3つです。

  1. h1タグとタイトルタグは同一にする
  2. テキストを使用【画像の場合は alt が必須】
  3. <h2> から <h6> に関連キーワードを入れる

それぞれついて順番に説明していきます。

h1タグとタイトルタグは同一にする

h1タグとタイトルタグに設定するテキストは同じにするべきです。

具体的には、次のような感じです。

タイトルタグ

見出しタグの正しい書き方とSEO効果を上げるポイント|TK-CREATE

h1タグ

見出しタグの正しい書き方とSEO効果を上げるポイント ← サイト名は不要

理由は、次の2つです。

① h1タグとタイトルタグの役割は同じ:ユーザーに不快感を与えない

② 検索上位の高いウェブページを分析した結果

それぞれの理由について説明します。

h1タグとタイトルタグの役割は同じ:ユーザーに不快感を与えない

h1タグとタイトルタグの役割は両方とも「ウェブページの主題を伝えること」です。

したがって、h1タグとタイトルタグは同一にすべきです。

同じ内容を設定するタグが 2つある理由は表示される場所が違うからです。

h1タグ ... ウェブページの中で表示される

タイトルタグ ... 検索結果で表示される

表示される場所は違いますが、どちらのタグも役割は同じで「ユーザーにウェブページの主題を伝える」ことです。

たとえば次のような場合、あなたはどう思いますか?

① 検索結果で「SEO初心者に見出しタグの意味をわかりやすく説明」というページタイトルをクリック。

「見出しタグのSEO効果を上げる7つのポイント」が主題のページが表示。

おそらく「あれ? 検索結果のタイトルと違う…だまされた」と思うのではないでしょうか。そして、そのウェブサイトに対して悪い印象を持つのではないでしょうか。

このような事態になるのを防ぐためにも、h1タグとタイトルタグに設定するテキストは同じにするべきです。

検索上位の高いウェブページを分析した結果

検索結果の上位に表示されているウェブページのほとんどは、h1タグとタイトルタグの内容を同一にしています(h1はタイトルタグからサイト名を除いたもの)。

たとえば「SEO」というキーワードで検索したときに表示される上位10件のウェブページは全て、h1タグとタイトルタグが同一になっています。

Googleで「SEO」というキーワードで検索した結果

この「SEO」というキーワードは検索結果の上位に表示されるのが難しいビッグキーワードです。具体的な数字は次のとおり(2020年4月調べ)。

月間検索回数

  • Yahoo … 約90万
  • Google … 約74万

ウェブページ数 … 8億3500万

このようなビッグキーワードで表示される上位10件のウェブページの全てが h1タグとタイトルタグが同一になっています。

このことから、h1タグとタイトルタグの内容を同一にしておけば検索順位にマイナスの影響を受けることは、まず無いと考えることができます。

このような理由からも、h1タグとタイトルタグに設定するテキストは同じにするべき、といえます。

テキストを使用【画像の場合は alt が必須】

見出しタグは、画像ではなくテキストを使用しましょう。

理由は、検索エンジンは画像よりもテキストの方が理解しやすくなっているからです。

根拠は Google公式サイトの次の文章です。

より効果的なインデックス登録の方法

画像ではなくテキストを使用して、内容を伝達します(Googleでは一部の画像や動画については理解できますが、テキストの方が理解しやすくなります(後略)

したがって、見出しタグは画像ではなくテキストを使用するようにするべきです。

画像の場合は alt属性 が必須

デザインの都合などで見出しタグに画像を使用したいこともあるかと思います。

そういった場合は、その画像を設定しているイメージタグに alt属性を必ず設定するようにしましょう。

alt属性は画像の代替テキスト(説明文)を設定するためのもので、検索エンジンに「どんな内容の画像か」を伝える役割があります。

具体的なHTMLの書き方は次のとおりです。

<img src="../images/sample.jpg" alt="画像の説明文" >
        

alt属性の詳しい書き方について知りたい方は次のページをご覧ください。

<h2> から <h6> に関連キーワードを入れる

<h2>から<h6>の見出しタグには、検索結果で上位表示を狙っているキーワードの関連キーワードを入れるようにしましょう。そうすると、検索順位が上がります。

関連キーワードとは

関連キーワードとは、そのキーワードで検索する人が「知りたいであろう情報を検索キーワードにしたもの」です。

具体的に説明します。

たとえば「SEO タイトル」というキーワードで検索する人がいるとします。この場合ならば、次のような情報を知りたいと考えているはずです。

  • タイトルタグとは(意味)
  • タイトルタグのSEO効果
  • タイトルタグの書き方(HTML)
  • WordPressでの設定方法

これらが関連キーワードになります。

<h2> から <h6> に関連キーワードを入れる

関連キーワードを考えた後は、それらを<h2> から <h6> に関連キーワードを入れます。

先ほど例にした「SEO タイトル」の場合なら次のような感じになります。

SEOで重要なタイトルタグの設定方法【 h1 】

  • タイトルタグとは【 h2 】
  • タイトルタグのSEO効果【 h2 】
  • タイトルタグの書き方【 h2 】
    • HTMLの書き方【 h3 】
    • WordPressでの設定方法【 h3 】

関連キーワードを入れると検索順位が上がる理由

先ほどの具体例を見ると分かるように、関連キーワードを<h2> から <h6>に入れると自然と「検索ユーザーが知りたい情報」が全て含まれているウェブページになります。

そうすると、検索エンジンからの評価も上がりウェブページの検索順位も上がります。これが、関連キーワードを入れると検索順位が上がる理由です。


おわり

以上で、当記事の内容は終了です。

当記事の内容が役にたったという方は、他の方に紹介していただけると嬉しいです。

— スポンサーリンク— 

タグ:

これからブログを始めたい人にオススメの記事

トップへ戻るボタン