HTMLの見出しタグとは、ホームページの文章の中に見出しを入れるためのタグです。hタグとも言います。
見出しタグは、ホームページの文章を読みやすく理解しやすいものにするだけでなく、SEO対策にも関係があります。
見出しタグのSEO対策は、ホームページのSEO対策をする上で、大事な要素の一つです。
このコラムでは、HTMLの見出しタグの使い方をご説明しつつ、SEO対策との関係もご説明いたします。
見出しタグとは？
冒頭での述べたように、見出しタグとは、ホームページの文章の中に見出しを入れるためのタグです。
ホームページの文章が、ダラダラと文章が書いてあったら、読者は読むのに疲れてしまいます。そこで、文章の内容毎に分けて、その先頭に見出しを入れます。
そのために用いるタグが、見出しタグです。
ホームページは、書籍と同じように見出しが適度に入っているために、本文を理解しやすくなります。
見出しタグ（hタグ）の種類
見出しタグは、h1タグ、h2タグ・・・h6タグの6種類あります。この数字の違いは、見出しの大きさの違いです。見出しタグのhは、「headline」の略と思われます。
一番大きな見出しは、h1タグです。二番目に大きな見出しタグがh2タグという具合です。
見出しタグは、別名「hタグ」や「hnタグ」とも言われます。hnの「n」は、1から6までの自然数が入るので、nで表現されます。つまり、次の6種類あります。
- h1
- h2
- h3
- h4
- h5
- h6
このパラグラフ（節）では、見出しに「見出しタグの種類」とあります。ここにh2タグを用いています。
見出しタグの書き方
見出しタグは、当たり前ですが、文章の見出しに当たる部分に使用します。
見出しタグの書き方は、他のHTMLタグと同様に、h1やh2などの要素名を、「<」と「>」（ブラケット）で挟みます。もちろん、終了タグも存在します。
見出しタグの例文
h2タグで記述した例をご紹介いたします。
HTMLの例文
<h2>ここに見出しが入ります</h2>
「ここに見出しが入ります」という文が、h2開始タグとh2終了タグで挟まれています。この一文をコンピュータが読み取ると、「『見出しが入ります』という文は、h2の見出しだな」と認識してくれます。
ID属性やCLASS属性が入った見出しタグの例文
見出しタグは、ID属性とCLASS属性を用いることができます。CLASS属性を用いた文例をご紹介いたします。
HTMLの例文
<h2 class=”headline”>ここに見出しが入ります</h2>
ID属性が入った見出しタグは、それが用いられているページ内で、「オンリーワンの見出し」という特別な使い方ができます。また、CLASS属性を設置し、CSSを設定することで、見出しタグの装飾を変えることができます。
見出しタグの分にフレージングコンテンツを用いる
また、h2の中にはaタグやspanタグ、emタグなどのフレージングコンテンツ（HTML4のインライン要素タグに近いもの）を用いることができます。spanタグを用いた文例をご紹介いたします。
HTMLの例文
<h2 class=”headline”>ここに<span>見出し</span>が入ります</h2>
見出しタグの中には、divタグやpタグなどのフレージングコンテンツに属さないタグを入れることはできません。
見出しの使い方
見出しは、長文にならないようにし、適度で読みやすい長さにしてください。そして、見出しの下側に来る説明文を完結に短く説明した見出しを入れてください。
見出しタグ（h1～h6）の順番
見出しタグは、h1からh6までありますが、それらの数値は見出しの大きさを表します。h1が一番大きな見出しで、h6が一番小さな見出しです。通常はh6まで使用されることはありません。
初心者で勘違いしそうなこととして、「h1を最初に使って、次に出てくる見出しがh2を使って・・・。あれ？ 見出しは6個しか使えないから、7個以上見出しを入れたい場合はどうしたらいいのだろうか？」ということがあります。これは勘違いです。
このページでは、最上部の見出しにh1を使用しています。この見出しを最も大きな見出しとして、h1タグを1個だけ使用しています。紺色の背景で白い文字の見出しにh2タグを使用しています。これが2番目に大きなタグとして数個使用しています。下線のある見出しがh3タグです。
このページの全体を見ると、h2タグと次のh2タグの間に、h3タグがいくつか入れ子のように入っていると思います。このように、hタグは親子関係があります。
このページを見て、「h1タグは1個のみで、h2タグから使用するようだ」と思われたかもしれません。この書き方は、HTMLのバージョンがXHTMLまでの流れで、「h1タグは1つのページ内に1個のみ」とされていました。HTML5移行は、h1タグをいくつも使用しても良いということになりました。
見出しが長くなりすぎないようにすること
以前に、SEO対策を支援させていただいたお客様のホームページで、よくある質問がありました。その質問に見出しタグが用いられていたことがありました。
質問には長文のものがあり、その返答としての本文は1行ほどのちょっとしたもので、見出しと本文の長さが逆転しているものがありました。例えば、次のような文章です。
HTMLの例文
<h3>Q. 離婚したときに子どもの親権が父親のものとなったのですが、今は生活が安定したので、子供の親権を取り戻したいと考えています。そのようなことは可能なのでしょうか？</h3> <p>場合によっては可能です。</p>
そのような、見出しと本文のバランスの崩れた文章ですと、SEO対策で悪影響があるかもしれません。
SEO対策を考慮するのであれば、見出しを入れたら、その下側にpタグを用いた本文を、2～3段落ほどは作成すべきだと思います。
本文が長い場合は小見出しとなるhタグを使用すること
見出しを入れて本文が読みやすくなったとしても、その本文が長くなってしまった場合は、読みにくいままです。そこで、本文が長くなってしまった場合は、適度に小見出しを入れてください。
では、h2タグやh3タグなどの、どの番号のhタグを用いたら良いのでしょうか？
h2タグの下側の文章が長くなってしまった場合は、次の番号のh3タグを用います。
では、本文の文章量がどの程度になったら小見出しを入れたら良いのでしょうか？
本文の見やすさを考えて、適度に小見出しを入れたら良いのですが、SEO対策の経験から述べるとするならば、500文字程度の文章になった場合、その中に2～3個の小見出しを入れると良いでしょう。
「見出しタグをいくつ入れたらいいのか？」とか、「どの見出しタグが何個ずつ入れるのか？」といったテクニックよりも、読みやすさを優先して見出しタグを入れるようにしてください。すると、500文字以内に1個程度の見出しタグを入れることが妥当だと思います。
このように、小見出しを用いての「見出しの階層構造」がSEO対策になります。
見出しと本文をsectionタグで囲む
見出しに対して本文が交互に入りますが、見出しと関連のある本文を、sectionタグで囲むと良いでしょう。すると、検索エンジンには「この見出しと本文の関係はここまで」とsection終了タグまでの本文を、見出しと本文の関連性があることを認識してくれるはずです。
sectionタグ、見出しタグ、ｐタグの例文は、次の通りです。
HTMLの例文
<section> <h2>ホットケーキの材料</h2> <p>ホットケーキの材料は、小麦粉、たまご、牛乳、砂糖、塩、バター、メープルシロップです。</p> </section>
もし、sectionタグで囲んでいなければ、どこまでが見出しと関連性のある文章なのか分かりません。sectionタグを用いると、その範囲が明確になります。
見出しタグと本文を囲んでいない状態と、sectionタグで囲まれた状態とでは、マークアップの意味に違いが出てくることにご留意ください。
sectionタグの扱い方は、「HTMLのsectionタグの正しい使い方と見出しタグとの関係」に詳しく記載しているので、ご参照ください。
h2タグの中にstrongタグを用いても良いのか？
ときどきですが、h2タグにstrongタグが入っているホームページを見かけることがあります。記述例としては、次のようなものです。
HTMLの例文
<h2><strong>ホットケーキの材料</strong></h2>
このような記述は、WordPressを利用されている企業に共通して見受けられます。
h2タグの文字列の書体が太字でない場合、「h2の文字を目立たせたい」ということで、WordPressの「B」をクリックしてボールド体にすることがあります。すると、上記のようにh2タグの中に、strongタグが入ります。
稀にですが、「h2タグの文字には、SEOキーワードで重要なものが含まれやすいので、strongタグを用いるとSEO対策としての効果が高まるのではないか」と考えて、strongタグを用いる人もいます。
私の見解としては、「h2タグにはstrongタグを用いるべきでない」と考えます。なぜなら、h2タグを太字にしたいのであれば、CSSで調整すべきです。また、h2の文字列は、もともとGoogleは重要なキーワードが含まれていると考えてくれるので、わざわざstrongタグを入れる必要がないのです。
ですので、上記の例文のように「すべてのh2タグにstrongタグを入れる」ということは、htmlの正しい使い方やSEO対策として間違っていると考えます。
もしかしたら、見出しタグの中のキーワードの一部を強調したいと考えることがあり、一部のキーワードに限定するのであれば、hnタグ内にstrongタグを用いても良いかもしれません。しかし基本的には、strongタグは、hnタグに用いるのではなく、本文中に用いるべきだと考えます。
見出しの内容とSEO対策の関係
気になる見出しの内容とSEO対策の関係ですが、もちろん関係があります。
見出しタグのSEO効果
そもそも見出しの性質は、本文を端的に述べたものです。そのため、本文の中の重要なキーワードが含まれているはずです。つまり、検索エンジンは、「見出しタグの中にあるキーワードの解説が本文に書かれている」と見なすはずです。
例えば、「見出しとは？」という文の見出しがあったとします。すると検索エンジンは、その見出しの下側に「見出しの解説が書かれている」と解釈してくれることでしょう。
もちろん、見出しの内容と、その下側に書かれている本文の内容が一致している必要があります。もし内容が一致していなければ、SEO対策にははりません。
検索順位に関係する文字数と見出しの関係について
SEO対策に効果的な見出しの付け方をご説明いたします。これまでご説明してきた、見出しタグの書き方や使い方を踏襲することは、述べるまでもありません。
まず、SEO対策では読者にとって知りたい情報が読みやすい状態で入っていることが大事です。もちろん、同じテーマのページがあったとして、文章量の多いページが好ましいことは、SEO対策の王道です。
また、同じテーマ、同じ文字数であれば、適度に見出しが入っているページの方が読みやすいと思います。つまり、適度に見出しを入れた方がSEO対策になります。
SEO対策に効果的な見出しの付け方
見出しタグの文は、その下側に書かれている本文の要約を入れるべきです。その本文のキーワードか関連するキーワードを用います。
見出しタグの文には、もちろんSEO対策をしたいキーワードが入れば、それに越したことはありませんが、無理やりキーワードを入れると、日本語として不適切な文になる可能性があり、SEO対策の効果が落ちてしまう可能性があります。
SEO対策に効果的な見出しは、本文の内容を完結に表現し、できればSEOキーワードが含まれており、日本語として正しく理解しやすいものを入れてください。
以上、ホームページのSEO対策をする上で、大事な要素の一つ「見出しタグ」について、その使い方やSEO対策との関係もご説明いたしました。ホームページ制作をされる方のご参考になれば幸いです。
当社では、集客ホームページ制作を強みとしています。ホームページでの集客に力を入れたい企業様は、ぜひご相談ください。
この記事の著者
経営・集客コンサルタント
平野 亮庵 (Hirano Ryoan)
国内でまだSEO対策やGoogleの認知度が低い時代から、検索エンジンマーケティング（SEM）に取り組む。SEO対策の実績はホームページ数が数百、SEOキーワード数なら万を超える。オリジナル理論として、2010年に「SEOコンテンツマーケティング」、2012年に「理念SEO」を発案。その後、マーケティングや営業・販売、経営コンサルティングなどの理論を取り入れ、Web集客のみならず、競合他社に負けない「集客の流れ」や「営業の仕組み」をつくる独自の戦略系コンサルティングを開発する。