見出しタグの意味・書き方・SEO効果を上げるポイントを徹底解説！
当記事は、SEO初心者向けに見出しタグの基礎知識をわかりやすく説明したものです。
当記事を読めば、SEO対策に必要な見出しタグの知識を「ひととおり」身につけることができます
筆者（タケヨシ）について
フリーランスでSEOに関する仕事をしています。SEO歴は今年で9年目。活動拠点は岐阜県です。»»» TK-CREATE岐阜（仕事用サイト）
見出しタグはウェブページの見出しを伝えるためのHTMLタグ
見出しタグは、ウェブページをみる人と検索エンジンに対して、ウェブページの見出し部分を伝えるために設定するHTMLタグです。
もう少しいうと、ウェブページをみる人と検索エンジンにウェブページの見出し部分を伝えて、ページ内容を理解しやすくするためのHTMLタグです。
以下、Google公式サイトにある見出しタグの説明です。
見出しタグを使用して重要なテキストを強調する
一般に、見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。（後略）
ちなみに、ウェブページの見出しと聞くと難しく感じるかもしれませんが、そんな事はありません。
私たちが、いつも読んでいる新聞や雑誌などの見出しと同じです。
見出しタグの役割を具体例で説明
見出しタグの役割である「ページ内容を理解しやすくする」の意味を具体例を使って説明します。
下画像は、見出しタグを設定しているウェブページです。
このページを見ると、見出しタグを設定するとページ内容が理解しやすい、という意味が分かるかと思います。
参考までに、上記ウェブページに見出しタグを設定しない場合を紹介すると、以下のとおりです。
このページを見ると、先述した「見出しタグを設定するとページ内容が理解しやすい」という意味が、より分かるかと思います。
以上で、見出しタグはウェブページの見出しを伝えるためのHTMLタグ、は終了です。
SEO対策で重要と言われる理由は検索順位に影響するから
見出しタグがSEO対策で重要と言われる理由は、ウェブページの検索順位に影響するからです。もう少しいうと、見出しタグを最適化するとウェブページの検索順位が上がるからです。
ちなみに、見出しタグを最適化するとウェブページの検索順位が上がる理由は、以下の2つです。
- 検索エンジンは、ページ内容の理解に見出しタグを使用している
- 閲覧者にとってページ内容が理解しやすくなり被リンクが増える
ここからは、上記二つについて詳しく説明していきます。
1.検索エンジンは、ページ内容の理解に見出しタグを使用している
見出しタグを最適化するとウェブページの検索順位が上がる一つ目の理由は、検索エンジンがページ内容の理解に見出しタグを使用していることです。
別の言い方をすると、見出しタグを最適化するとウェブページの内容を検索エンジンにしっかりと理解してもらうことが出来ます。
どんなに素晴らしい記事を書いても、その内容が検索エンジンにきちんと伝わらなければ正しい評価をしてもらえません。
そして、それが原因で検索結果の上位に表示してもらえません。
逆にいうと、素晴らしい記事を書いて、その内容を検索エンジンにしっかりと理解してもらえば、検索結果の上位に表示されます。そして、そのために必要なのが見出しタグの最適化です。
これが、見出しタグを最適化するとウェブページの検索順位が上がる一つ目の理由です。
検索エンジンが見出しタグを使用している根拠
検索エンジンが見出しタグを使用している根拠は、Google のジョン・ミューラー氏が出演している次の動画です。
以下の文章は、上記動画の日本語訳です。
ページの内容を理解するために見出しタグを多少は使っている（後略）
2.閲覧者にとってページ内容が理解しやすくなり被リンクが増える
次に、見出しタグを最適化するとウェブページの検索順位が上がる二つ目の理由を説明します。それは、以下のものです。
- ① 閲覧者にとって内容が理解しやすくなる
- ② ウェブページの閲覧者が、そのページを誰かに紹介してくれる機会が増える
- ③ ②が原因で、被リンクが増える確率が上がる
- ④ 被リンクが増えると検索順位が上がる
念のため説明しておくと、Googleは、被リンクが多いウェブページほど検索結果の上位に表示します。
以上が、見出しタグを最適化するとウェブページの検索順位が上がる二つ目の理由です。
以上で、SEO対策で重要と言われる理由は検索順位に影響するから、は終了です。
見出しタグの書き方【HTML】
ここからは、HTMLの書き方について説明していきます。
まず、見出しタグの種類は下記6種類です。
<h1>テキスト</h1>
<h2>テキスト</h2>
<h3>テキスト</h3>
<h4>テキスト</h4>
<h5>テキスト</h5>
<h6>テキスト</h6>
見出しタグに設定する文章は、上記コードの黄色い文字部分に記述。
そして、見出しタグは次の順番で記述していくというルールがあります。
<h1> → <h2> → <h3> → <h4> → <h5> → <h6>
良い例：<h1> → <h2> → <h3> →<h4> →<h5> →<h6>
悪い例：<h1> → <h3> → <h2> … <h3>と<h2>が逆
見出しタグが6種類ある理由：見出しの重要度を検索エンジンに伝えるため
見出しタグが 6種類ある理由は、見出しの重要度を検索エンジンに伝えるためです。具体的には、以下のとおりです。
見出しタグの重要度
<h1> の重要度が一番高く <h6> の重要度が一番低い
次の画像は、見出しタグの重要度について分かりやすく説明したものです。
見出しの重要度
大見出し… 1番重要度が高い（h1）
中見出し… 2番目に重要度が高い（h2）
小見出し… 3番目に重要度が高い（h3）
<h1>タグは 1ページに 1つ
<h1>を使用するのは 1ページに 1回だけです。
そして、ウェブページの主題に使用します。具体的に説明すると、以下のとおりです。
通常はタイトルタグと同じ内容になる
通常、<h1>の内容はタイトルタグと同じになります。
なぜかというと、2つのタグの役割はどちらもウェブページの主題を表すことだからです。分かりやすく説明すると、以下のとおり。
- タイトルタグ … 検索ユーザーに対してウェブページの主題を伝える
- <h1> … ウェブページの閲覧者に主題を伝える
»»» 関連：【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="画像の説明文" >
おわり
以上で、当記事は終了です。
当記事の内容が役にたったという方は、ぜひ、他の方に紹介してください。
