1. TOP
  2. html&CSS入門
  3. HTMLの見出しタグの使い方。h1~h6タグの使い分けを解説  

HTMLの見出しタグの使い方。h1~h6タグの使い分けを解説  

見出しタグとは、html文書内に見出しを挿入するためのタグです。見出しタグは重要度に応じ<h1>~<h6>までの6種類用意されています。

  • <h1>~~</h1>:1番重要な見出し
  • <h2>~~</h2>:2番目に重要な見出し
  • <h3>~~</h3>:3番目に重要な見出し
  • <h4>~~</h4>:4番目に重要な見出し
  • <h5>~~</h5>:5番目に重要な見出し
  • <h6>~~</h6>:6番目に重要な見出し

html文書内に見出しが必要な場合は、重要な順にh1から使います。文書内にh1ほど重要でない見出しが必要な場合h2を使い、それよしさらに重要でない見出しが必要であればh3を使う。という風に、重要度が下がるごとに数字を1ずつ増やして使います。

見出しタグのの効果

見出しタグを使うことで、ユーザーや検索エンジンに、文章の構造を正確にわかりやすく伝えることができます。

ユーザーに正確にわかりやすく伝える

ある程度長い文章の場合、見出しがないとメリハリがなく非常に読みづらくなります。下記の例を見てください。

Image

文字がダラーっとならんでいて、一見下だけでは何が書いてあるかわからないし、読むのがめんどくさいなと感じさせてしまいます。

一方、見出しを入れた例を見てください。

Image

見出しが入ることで何が書いてあるかがひと目で分かるようになりますし、読むことについての心理的なハードルを下げることが出来ます。

適切な見出しは、文章を読んでもらうためには必須の対応と言えます。

検索エンジンに正確にわかりやすく伝える

見出しを使うことで、googleなどの検索エンジンに対して、何についての文章なのか、何が重要なのかを正確に伝えることが出来ます。

検索エンジンに正確に文章を伝えることで、適切なキーワードでの検索順位の向上などを見込むことが出来ます。

このように見出しタグは、ユーザーに対しても、検索エンジンに対しても、文章を正確にわかりやすく伝えるために重要な効果があるんですね。

見出しタグの使い方

h1タグは1ぺージに1つだけ

h1タグは最も重要な見出しを表すタグです。そのため同じページ内にいくつも存在するべきではありません。ページ内で1度だけ使うのが理想的な使い方です。

HTML5の仕様上、複数回つかっても問題ないのですが、SEOの観点からみると、1つに絞ったほうが重要なことが伝わると考えられているからです。

SEOに関してはアルゴリズムが公表されていないので断言はできませんが、一般的には、h1が複数あると

どれがメインになるh1タグなのかがGoogleには判断できなくなる

h1タグ(主見出し)としての価値が薄まる

参照:今どきの見出しとしてのhタグの正しい使い方

という理由から1つにすることが理想とされています。どうしてもh1を2つにしたいという場合を除き(※ほとんどどないと思いますが、)h1は1つにしましょう。

h1を使うべき場所

h1タグはページ内の一番重要な場所に使います。

一般的に多いのは、トップページはサイト名をh1にし、各記事ページは記事タイトルをh1にする方法です。

現在のサイトではこの方法が主流になっているので、この方法を使っていれば問題ないでしょう。

よくあるブログサービスや、wordpresssの多くテーマではすでにこのような対応がなされている場合が多いので、あまりきにする機会はないかもしれません。

h2〜h6は何回でも使用可能

h2~h6のタグは基本的に回数制限はありません。何回でも使うことができます。

ブログや記事を書く場合は、h2~h4くらいまでを使うことが多いです。

h5、h6を使っても問題はありませんが、文章の構造があまりに複雑になりすぎても読みづらくなってしまうので、h4くらいまでにまとめられるように考えながら書くことが大切です。

見出しタグは数字の順番通りに使用

見出しは重要な順に、h1から順番どおりに使っていきます。

そして、次に重要なことが来たらh2、そのつぎに重要であればh3というふうに使っていきます。同じくらいの重要度であれば、同じ見出しを使っても構いません。

実際に見出しタグを順番どおりに使った例を見てみましょう。

<div id="demo_210">
   <h1>これは最も重要な見出し</h1>
   <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
   
   <h2>これは2番目に重要な見出しその1</h2>
   <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
   
   <h2>これは2番目に重要な見出しその2</h2>
   <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 
   <h3>これは3番目に重要な見出し</h3>
   <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 
   <h2>これは2番目に重要な見出しその3</h2>
   <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 </div>

これは最も重要な見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

これは2番目に重要な見出しその1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

これは2番目に重要な見出しその2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

これは3番目に重要な見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

これは2番目に重要な見出しその3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このように見出しタグは順番通りに使っていくことになります。

デザインを変える目的で見出しタグを使わない

見出しタグを使うと、文字が大きく表示されます。

これを利用して、「この部分は強調したいからh2を使おう」という理由で見出しタグを使うのは間違った使い方になります。

見出しタグは、あくまでの文章中の「見出し」を表すもので、それ以外の部分には使うべきではありません。

強調表示したいのであれば、strongタグなどを使い、見た目はCSSを使ってカスタマイズするようにしましょう。

見出しは、何についての文章か?が伝わるように

見出しはユーザーにとって、そのブロックが自分が読みたい情報かどうかを判断させるための重要なキーワードになります。もちろんSEOにとっても適切なキーワードである方が、正確なインデックスが期待できます。

そのためには見出しを読んだだけで、その後には何が書かれているのか?がしっかり伝わるものであることが望ましいです。

より短い言葉で一目で頭に入り、より的確に内容を言い表していることが大切になります。

例えば下記のような例を見てみましょう。

 <h1>HTMLについて</>
 <p>HTMLは19XX年に生まれ…</p>
  
 <h1>HTMLはなぜ生まれたのか?</>
 <p>HTMLは19XX年に生まれ…</p>
 
 <h1>HTMLが誕生した理由</>
 <p>HTMLは19XX年に生まれ…</p>

HTMLについて

HTMLは19XX年に生まれ…

HTMLはなぜ生まれたのか?

HTMLは19XX年に生まれ…

HTMLが誕生した理由

HTMLは19XX年に生まれ…

タイトルが3つ並んでいますが、1つ目より2つ目と3つ目の方が具体的に内容を言い表せていますね。1つ目の「HTMLについて」では漠然としすぎていて何が書いてあるのかわかりません。

2つ目と3つ目では、3つ目の方がより短く言い表せているので良いと言えるでしょう。

ただし、ターゲットが小学生のようにあえて噛み砕いた言葉を使いたい場合は2つ目を選ぶことも考えられます。

キーワードを無理して詰め込むのは逆効果

SEO的には見出しのキーワードが重要視されると言われています。確かに今でも、タイトルのキーワードで検索順位が上がることが多いです。

しかしながら、無理にキーワードを入れ込むのはやめた方が良いでしょう。今や検索エンジンの解析技術も上がり、無理やり

キーワードを入れ込みすぎると、逆に評価が下がることもあります。

あくまでもキーワードは続く文章に何が書かれているかを伝えるためのものです。不自然にキーワードを繰り返すのはやめましょう。

なるべく見出しタグに画像は使わない

見出しタグ内に画像を使うことはできますが、重要な情報の部分はなるべくテキストを使う方が良いです。なぜなら、ユーザーの環境によっては画像を表示できない場合があるからです。ネットワークの調子が悪くて画像がうまく表示できない場合もあります。

googleの公式ガイドラインでも下記のような記述があります。

重要なテキストを画像に埋め込まない: 画像にテキストを埋め込むことは避けてください。特に、ページ見出しやメニュー項目などの重要なテキスト要素は埋め込まないでください。これは、すべてのユーザーがアクセスできるわけではないためです(また、ページ翻訳ツールも画像では動作しません)。ユーザーがコンテンツに最大限アクセスできるよう、テキストは HTML 形式で作成し、画像に代替テキストを設定してください。

※引用元:画像 – Search Console ヘルプ

 

サイトのロゴなどのように、どうしても画像をh1にしたい場合は、必ずaltにテキストを設定するようにしましょう。そうすることで、検索エンジンにh1の画像が何を表しているのかを伝えることができます。

ロゴをh1にしたい場合は下記のように、altにテキストを記述するようにしましょう。

<h1><img src="logo.jpg" alt="ワンダスタンド" /></h1>