HTMLの見出しタグ(h1〜h6)を上手に使ってSEO対策をする方法

サイト構築

見出しタグの重要性

私達は普段から、インターネットで様々なものを検索し、沢山の文字を読んでいます。そしてその文章が書かれたページを見るときは、無意識に読みやすさを判断し、読み続けるか離脱するかの行動を取っています。

この読みやすさを決める一つの手段として見出しタグが使われます。そして上手に見出しタグを使うことは、SEO対策としても評価を受けやすくなるのです。

では見出しタグが無いとどうなるのか、悪い例を挙げてみましょう。

以下はある昔話を書いているのですが、見出しが無く、書き連ねただけの、とてもよみにくい文章です。これではいったいどこからどこまでが区切りになるのか分かりませんよね。

昔々あるところにお爺さんとお婆さんがいました。ある日お婆さんが川で洗濯をしていると、川上から大きな桃が流れてくるのです。お婆さんは驚きましたが、お爺さんと一緒に桃を食べようと家に持ち帰りました。家に帰って桃を割ると、なんと中から男の子の赤ちゃんが。子供のいなかったお爺さんとお婆さんは、その男の子に「桃太郎」と名付けて、大事に育てました。大事に育てられた桃太郎は、みるみると大きくなり、誰よりも強い男の子に成長します。桃太郎はお爺さんお婆さんに恩返しをしようと、村を苦しめる鬼を退治することを決意します。旅立ちの日、お爺さんお婆さんに分かれを告げると、お婆さんの手作りきび団子を持って、鬼の住む鬼ヶ島へ向かいました。道中に出会った犬・猿・キジは、桃太郎の持つきび団子を食べたいと言います。大事なきび団子を貰った3匹は、お礼に、一緒に鬼退治に行くことを誓います。鬼ヶ島に付いた桃太郎達は、一斉に鬼に飛びかかり、あっという間に退治してしまいました。鬼は泣きながら盗んだ宝を返し、桃太郎は仲間の3匹と共に村へ帰り、お爺さんお婆さんと幸せに暮らしました。

では次に、上の文章に見出しを入れて、物語の内容を分けてみます。すると、見出しを見ただけでもどんな内容で進んでいくのかが、ぱっと見ても分かるようになりました。

物語の始まり
昔々あるところにお爺さんとお婆さんがいました。ある日お婆さんが川で洗濯をしていると、川上から大きな桃が流れてくるのです。お婆さんは驚きましたが、お爺さんと一緒に桃を食べようと家に持ち帰りした。

桃太郎との出会い
家に帰って桃を割ると、なんと中から男の子の赤ちゃんが。子供のいなかったお爺さんとお婆さんは、その男の子に「桃太郎」と名付けて、大事に育てました。大事に育てられた桃太郎は、みるみると大きくなり、誰よりも強い男の子に成長します。

桃太郎が旅立つとき
桃太郎はお爺さんお婆さんに恩返しをしようと、村を苦しめる鬼を退治することを決意します。旅立ちの日、お爺さんお婆さんに分かれを告げると、お婆さんの手作りきび団子を持って、鬼の住む鬼ヶ島へ向かいました。

仲間との出会い
道中に出会った犬・猿・キジは、桃太郎の持つきび団子を食べたいと言います。大事なきび団子を貰った3匹は、そのお礼に、一緒に鬼退治に行くことを誓います。

鬼が退治されるまで
鬼ヶ島に付いた桃太郎達は、一斉に鬼に飛びかかり、あっという間に退治してしまいました。鬼は泣きながら盗んだ宝を返し、桃太郎は仲間の3匹と共に村へ帰り、お爺さんお婆さんと幸せに暮らしました。

このように、見出しは文章を読み進める上で、とても大事な役割を果たします。また、検索エンジンがページの構成を判断する上でも欠かせないものなのです。

ではどのようにして使うと、読みやすく、SEO対策としても正しい見出しになるのでしょうか。これから紹介していきます。

見出しタグの正しい使い方

見出しタグの書き方

見出しタグにはh1~h6までの種類があります。数字が若いほどに重要度は高くなり、デザインにおいても、重要なものほど大きくなります。

書き方は以下のように、テキストをタグで挟み、HTML上に記述するだけ。とても簡単に使うことができます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

h1タグの使い方

h1タグで記述するテキストは、見出しタグの中でも一番重要なテキストを意味します。そのためh1が使用される場所はサイト名と記事のタイトルのみが適切です。

WordPressでは、ほとんどのテーマでサイト名とタイトルがh1となるように設定されています。そのやめ、記事を書く時に、重要度を上げたいからと、タイトル以外にh1タグを入れ込むのは避けましょう。

注)はてなブログの場合は特殊で、サイト名はh1、そしてタイトルはh2で始まっています。そのため記事を書くときはh3から書き始めるのが正解です。誤ってh2から書き始めないようにしましょう。

h2~h6タグの使い方

ここからはh2~h6までの見出しタグの使い方について説明していきます。上で述べた通り、h1タグを記事内で使うのはタイトルのみとなります。

h2~h6のタグは1記事内で何度でも使用して良いのですが、使用のルールがあります。それは数字が若い順に使用すること。

それぞれのタグは重要度の階層であると思って下さい。重要度が同じであれば、下記のようにh2だけで構成する場合もあります。

[ h1 ]目玉焼きの作り方
 ┗[ h2 ]フライパンを熱する
 ┗[ h2 ]卵を割る
 ┗[ h2 ]塩コショウする
 ┗[ h2 ]水を少々入れる

しかし記事を書くときは、全ての項目が同じ重要度とならない場合も多々あります。項目の重要性が変化する毎に、タグをグループでまとめて階層分けしましょう。

例えばh2とh3で構成する場合は、下記のようになります。

[ h1 ]目玉焼きの作り方
 ┗[ h2 ]材料
   ┗[ h3 ]食材
   ┗[ h3 ]道具
 ┗[ h2 ]作り方
   ┗[ h3 ]フライパンを熱する
   ┗[ h3 ]卵を割る
   ┗[ h3 ]塩コショウする
   ┗[ h3 ]水を少々入れる

見出しタグの下には文章を入れる

見出しを入れる際、基本的には見出しの後に文章を入れなければなりません。本(書籍)で考えるとよく分かります。

本を読んでいたとき、見出しの次のページがまた見出しだったら「あれ!?」ってなりますよね。ブログであってもその考え方は同じなのです。

見出しはあくまでも見出しでしかなく、記事の内容を伝える文章の”区切り”にしかなりません。見出しの後には必ず文章を差し込むようにしましょう。

見出しタグには自然にキーワードを入れる

見出しタグの中でも特に重要度の高いh2タグとh3タグには、自然にキーワードを入れるようにしましょう。ここはSEO対策としてもとても評価を受けやすいタグであり、キーワードの使い方がSEOに大きく関係してきます。

注意してほしいのは、自然な文章にならない入れ方はしないことです。不自然にキーワードを詰め込んでしまうと、逆にマイナスのSEO対策になってしまいますよ。

まとめ

見出しタグは付けることが大事なのではありません。ユーザーが読み勧めやすくするにはどうすれば良いのか、Googleがサイト構造を判断しやすくなるにはどういった構成にするのが良いのかを意識することで、SEO対策としても完璧な見出しの入れ方ができるようになりますよ。

サイト構築

Posted by nishida