見出しタグの意味・書き方・SEO効果を上げるポイントを徹底解説！

当記事は、SEO初心者向けに見出しタグの基礎知識をわかりやすく説明したものです。

当記事を読めば、SEO対策に必要な見出しタグの知識を「ひととおり」身につけることができます

見出しタグはウェブページの見出しを伝えるためのHTMLタグ

見出しタグは、ウェブページをみる人と検索エンジンに対して、ウェブページの見出し部分を伝えるために設定するHTMLタグです。

もう少しいうと、ウェブページをみる人と検索エンジンにウェブページの見出し部分を伝えて、ページ内容を理解しやすくするためのHTMLタグです。

以下、Google公式サイトにある見出しタグの説明です。

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

一般に、見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。（後略）

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

見出しタグの役割を具体例で説明

見出しタグの役割である「ページ内容を理解しやすくする」の意味を具体例を使って説明します。

下画像は、見出しタグを設定しているウェブページです。

このページを見ると、見出しタグを設定するとページ内容が理解しやすい、という意味が分かるかと思います。

参考までに、上記ウェブページに見出しタグを設定しない場合を紹介すると、以下のとおりです。

このページを見ると、先述した「見出しタグを設定するとページ内容が理解しやすい」という意味が、より分かるかと思います。

以上で、見出しタグはウェブページの見出しを伝えるためのHTMLタグ、は終了です。

↑ 目次にもどる

SEO対策で重要と言われる理由は検索順位に影響するから

見出しタグがSEO対策で重要と言われる理由は、ウェブページの検索順位に影響するからです。もう少しいうと、見出しタグを最適化するとウェブページの検索順位が上がるからです。

ちなみに、見出しタグを最適化するとウェブページの検索順位が上がる理由は、以下の2つです。

ここからは、上記二つについて詳しく説明していきます。

1.検索エンジンは、ページ内容の理解に見出しタグを使用している

見出しタグを最適化するとウェブページの検索順位が上がる一つ目の理由は、検索エンジンがページ内容の理解に見出しタグを使用していることです。

別の言い方をすると、見出しタグを最適化するとウェブページの内容を検索エンジンにしっかりと理解してもらうことが出来ます。

どんなに素晴らしい記事を書いても、その内容が検索エンジンにきちんと伝わらなければ正しい評価をしてもらえません。
そして、それが原因で検索結果の上位に表示してもらえません。

逆にいうと、素晴らしい記事を書いて、その内容を検索エンジンにしっかりと理解してもらえば、検索結果の上位に表示されます。そして、そのために必要なのが見出しタグの最適化です。

これが、見出しタグを最適化するとウェブページの検索順位が上がる一つ目の理由です。

検索エンジンが見出しタグを使用している根拠

検索エンジンが見出しタグを使用している根拠は、Google のジョン・ミューラー氏が出演している次の動画です。

以下の文章は、上記動画の日本語訳です。

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

2.閲覧者にとってページ内容が理解しやすくなり被リンクが増える

次に、見出しタグを最適化するとウェブページの検索順位が上がる二つ目の理由を説明します。それは、以下のものです。

念のため説明しておくと、Googleは、被リンクが多いウェブページほど検索結果の上位に表示します。

»»» 被リンクの意味・SEO効果をやさしく説明！

以上が、見出しタグを最適化するとウェブページの検索順位が上がる二つ目の理由です。

以上で、SEO対策で重要と言われる理由は検索順位に影響するから、は終了です。

↑ 目次にもどる

見出しタグの書き方【HTML】

ここからは、HTMLの書き方について説明していきます。

まず、見出しタグの種類は下記6種類です。

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

見出しタグに設定する文章は、上記コードの黄色い文字部分に記述。

そして、見出しタグは次の順番で記述していくというルールがあります。

        良い例：<h1> → <h2> → <h3> →<h4> →<h5> →<h6>
                                悪い例：<h1> → <h3> → <h2> … <h3>と<h2>が逆
                            

見出しタグが6種類ある理由：見出しの重要度を検索エンジンに伝えるため

見出しタグが 6種類ある理由は、見出しの重要度を検索エンジンに伝えるためです。具体的には、以下のとおりです。

次の画像は、見出しタグの重要度について分かりやすく説明したものです。

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

<h1>を使用するのは 1ページに 1回だけです。

そして、ウェブページの主題に使用します。具体的に説明すると、以下のとおりです。

通常はタイトルタグと同じ内容になる

通常、<h1>の内容はタイトルタグと同じになります。

なぜかというと、2つのタグの役割はどちらもウェブページの主題を表すことだからです。分かりやすく説明すると、以下のとおり。

»»» 関連：【SEOで最も重要】なタイトルタグについて初心者向けに徹底解説！

HTML5の仕様を理解しているならば、1ページに複数使用してもOK

なお、HTML5の仕様を理解している場合は、1ページに<h1>を複数使っても問題ありません。

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

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

たとえば、次のウェブページの場合ならば、<h1>、<h2>、<h3>の3つだけでOKです。

以上で、見出しタグの書き方【HTML】は、終了です。

↑ 目次にもどる

WordPressでの見出しタグ設定方法

ここからは、WordPressを使用する場合の見出しタグ設定方法を紹介します。

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

ビジュアルエディターを使用する場合の見出しタグの設定方法は、以下のとおりです。

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

コードエディターを使用する場合の見出しタグの設定方法は、以下のとおりです

以上で、WordPressでの見出しタグ設定方法、は終了です。

↑ 目次にもどる

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

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

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

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

上記ルールに違反すると、Googleからペナルティを受けてウェブページの検索順位が下がることがあるので注意してください。

↑ 目次にもどる

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

最後に、見出しタグのSEO効果を上げるポイントを説明します。それは、次の2つです。

ここからは、上記2つについて簡単に説明していきます。

検索結果での上位表示を狙っているキーワードを入れる

一つ目のポイントは、検索結果での上位表示を狙っているキーワードを、見出しタグに入れることです。

なぜかというと、そのキーワードで検索された際に、ウェブページの検索順位が上がるからです。

なお、キーワードは<h1>だけに入れるのはではなく、<h2>や<h3>にも入れた方がSEO効果は高くなります。

テキストを使用する

二つ目のポイントは、見出しタグは画像ではなくテキストで設定することです

理由は、検索エンジンは画像よりもテキストの方が理解しやすいからです（下記参照）。

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

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

先述したように、ウェブページの検索順位を上げるためには、ウェブページの内容を検索エンジンにしっかりと理解してもらう必要があります。

その観点に立つと、見出しタグは画像ではなくテキストで設定すべき、といえます

画像を使用する場合は、必ず、alt属性に代替テキストを設定する

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

そういった場合は、その画像を設定している<img>のalt属性に代替テキスト（説明文）必ず設定するようにしてください。

参考：<img>のalt属性属性

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

おわり

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

↑ 目次にもどる

当記事の内容が役にたったという方は、ぜひ、他の方に紹介してください。