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

見出しタグって何？

SEOに効果があるの？

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

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

見出しタグとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

引用：検索エンジン最適化（SEO）スターター ガイド

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

引用：ウェブマスター向けガイドライン（品質に関するガイドライン）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

見出しタグが 6種類ある理由は、見出しごとの重要度を検索エンジンに伝えるためです。重要度は <h1> タグが一番高く <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つです。

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

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

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

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

理由は、次の2つです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連キーワードとは

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

具体的に説明します。

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

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

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

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

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

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

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

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

おわり

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

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

— スポンサーリンク—