hnタグ（h1〜h6）の正しい考え方と使用方法
１．はじめに
hnタグ（h1〜h6）はSEOの観点において現在重要ではなくなったといわれています。
これは本当でしょうか？
SEOの黎明期の頃はh1タグは重要で、その後h1タグがSEO目的で乱用されるようになったために、通常のテキストと同程度しか評価されなくなりました。そしてその後はまた評価がある程度なされるようになって、今日に至っているという感じです。
まるっきり評価されないというわけではなく、多少は順位上昇に寄与するというぐらいです。でもhnタグはまるっきり無視してもいいのか？というとそういうわけでもありません。正しく設定する必要があります。その理由についても説明します。
２．hnタグ（h1〜h6）
２−１．hnタグ（h1〜h6）とは
hはheadingの頭文字で文章中の見出しを表します。
見出しを表現するHTMLタグなのですが、h1、h2、h3、h4、h5、h6の６つがあります。h1が最も重要度が高く、h6が最も低い見出しとなります。
こう書くとわかりにくいので例を挙げてみます。
<h1>カレーライスの知識</h1>
<h2>カレーライスの歴史</h2>
<h3>発祥の地</h3>
<p>カレーライスはもともとインドで発祥した料理であり･･･</p>
<h3>日本への伝来の経路</h3>
<p>カレーラースをはじめて紹介したのは福沢諭吉で･･･</p>
<h3>日本での発展</h3>
<h4>カレー粉の発明</h4>
<p>･･･</p>
<h2>カレーライスのレシピ</h2>
このように見出しに記載された話題同士の上下関係を表すタグなのです。
２−２．hnタグ（h1〜h6）の役割
前述のように話題の上下関係（階層構造）を表現するために使います。
このページを見に来たユーザーにとっては、ページ内の話題のくくりがわかって読みやすくなります。
例にあげたカレーライスの知識ですが、このページに来たユーザーの主に知りたいことが日本でのカレーライスの歴史であったならば、
「この部分に知りたい内容が書いてあるのだな。」
ということがひと目で分かります。また、
「これについても書いてあるのか。なるほど面白そうだ、読んでみよう。」
というように「欲しい知識」が手に入り、想定していなかった「新たな気付き」を与えることができるのです。
もし、見出しがなく、ダラダラ書いてあったら、必要な情報がごく一部だったとしても、全て読まなくてはならなくなります。該当の情報が書いてある箇所を見つける前に、このページから去ってしまう可能性があります。
書籍を読む読者と、Webサイトのページを見ているユーザーは、基本的に異なることに留意しなければなりません。
書籍を読む読者は読む前から、情報に金を払う価値があると考えているためかなり丁寧に読んでくれます。
しかし、Webサイトの読者は、個々のページそのものにあまり期待をしていません。知りたいことだけ見たらもう用はないと思ってます。だから、まずは自分が最も欲しい情報の部分だけを拾い読みしようとします。その拾い読みのニーズにたえないページはその時点でダメです。だから、情報のくくりを章立てに入れ込んで、どこの部分だけ読めばいいかをはっきりさせなければなりません。
その上で、全て読んでもらいたいならば更に関連情報としてどのような情報があるかを章立てで示すことで、
「なるほど、このような情報もためになる、もっと知りたい」
とユーザーから思ってもらえるので全文を読んでもらえる率を高めることができるのです。ユーザーの利便性のためにhnタグを正しく設定するのです。
これはSEOにも結果的に良い影響を与えます。
- hnタグの中にその章に何が書かれているかを端的に言い表す語句を入れることによって、その語句での検索順位の上昇がある程度期待できます。
ユーザーが判断するのと同様に、検索エンジンもその章の中に何が書かれているかをhnタグから判断しようとします。その結果、hnタグの文章は、普通の文章よりも優先度が高いと検索エンジンは認識するのです。 - 章立てを意識することで、一つの章立ての中に一つの話題についての記述が集中します。
例えばページ全体の話題はタラバガニについてだったとします。
１）という章にはタラバガニの産地の話題
２）という章にはタラバガニの生物学的特徴
３）という章にはタラバガニの加工法
といったような章立てになっていたとします。
そうすると、生物学的特徴の話題は２）という章立てに集中します。
２）という章立ての中にタラバガニの生物学的な特徴についての記述が凝縮されることになります。これによって２）の章立て部分は生物学的な特徴について知りたい人にとって有用な情報が凝縮されることになります。タラバガニの生物学的特徴を調べたい人にとっては有用な一節になるでしょう。
検索エンジンも同様に判断し、タラバガニの生物学的な特徴を知りたいといった検索ニーズに対して、この一節は有用であろうと判断するわけです。結果として、その種の検索キーワードでの検索順位の上昇が起きるわけです。
２−３．hnタグ（h1〜h6）の使用方法
２−３−１．話題の上下関係（階層構造）を正しく表現する
hnタグの役割はすでに説明しました。
その役割に従うのであれば、見出しのレベルは高い順から順番に利用されるべきであることがわかるでしょう。当然ながら、h2要素の次にh4要素を書いたりしてはいけないのです。これはSEO云々の話ではなくそもそものhnタグの意味がそういうものだからです。
h1要素の次の見出しはh2要素を、h2要素の次の見出しにはh3要素を使うようにしなければなりません。
「大きい文字を使いたいから～」などスタイルを整える目的で見出し要素を使ってはいけません。文字の大きさ、太さ等の装飾はスタイルシートを利用すべきです。文章の構造や情報はHTML、装飾（見た目）はCSSという役割を忘れてはいけません。
WordPressを使っている方の中には、文字を大きくしたり装飾したりする目的のためにhnタグを使っている方がいらっしゃるでしょう。hnタグは文章の章立てを認識させるために使うものであり、間違いであることがお分かりいただけるでしょう。このような誤った使い方をすると、検索エンジンが文章の論理的な構造を把握することができなくなってしまいます。
２−３−２．h1要素の利用方法の原則
２−３−２−１．h1要素は１ページに１回の使用とする
h1要素はページの中で一番重要な見出しです。
階層構造の点からもh1は1ページに1つだけ記述するようにするべきなのです。しかし少々話がややこしいことには、HTML5ではh1を複数設置することができるとされており推奨されています。
W3Cの公式文書では、
■従来の記述方法
<body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body>
■新しい記述方法
<body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body>
この２つのHTMLは意味として同じであるとしています。しかし、検索エンジンは全く同じに解釈するとも限りませんので、従来通りの記述方法をしておくのが無難です。
２−３−２−２．h1には何を記述すべきか
そのページに書いてあることを端的に３秒で表現すると何か？
と自問してみてください。それが答えです。
一般的にはtitleタグと一緒にすればいいともいわれますが、これは正しいのでしょうか？
h1がtitleタグと一緒になることもあるでしょう。
でも、titleタグには28文字程度しか検索結果に表示されないという特徴があります。titleタグは決められた文字数で表現せねばならないという制限があります。その制約の中で考えられた文章とh1が必ずしも一致はしないのではないでしょうか。
あと、よく尋ねられるのが、
「ロゴをh1に入れてもいいのでしょうか？」
という質問です。これに対しては、
「そのページに書いてあることを端的に３秒で表現しようとするとそのロゴになるの？」
と問い返すことにしています。
たいてい違うと思うのです。もし本当にロゴで表現できるのであるならば、ロゴをh1にすべきかもしれません。でもそのようなケースはまれではないでしょうか。
この件について付記しておくのですが、検索エンジンは画像の内容そのものを認識しません。画像のalt属性がh1に限らずhnの記述と検索エンジンからは認識されます。だからこのようなケースでは必ずalt属性を付与しておく必要があります。
また、alt属性の記述は通常の文字と比べて検索エンジンからは低めに評価されることは覚えておいてください。ここから導かれる結論としては、hnに相当する部分は画像ではなく、文字にしたほうがいいということです。デザインの観点から画像化した文字を使いたい場合には困ったことになりますが、出来る限りデザインそのものを工夫して画像ではなく文字にするべきです。
ちなみに、この種の問題の解決方法としては、文字を画像にしてHTML内には普通に文字を入れ、cssを使って画面外にtext-indent: -9999px;といったように飛ばす裏ワザがあります。しかし、これはGoogleの非推奨の方法なので避けましょう。
２−３−２−２．h1要素をcssを使って目立たなくしても大丈夫か
h1に表示される文字は小さくして目立たなくしてもSEOの観点からは別に問題ありません。
また、原則から判断すればおかしな話ですがh2のあとにh1が来てもGoogleからペナルティを受けるといったことはありません。
とはいえ、一番表現したい文言がそれでいいのか？と思うわけです。Googleからネガティブな評価を下されなければいいんだという考え方は正しくありません。
２−３−３．hnタグを使うべきかliタグを使うべきか
liタグはあくまで箇条書きにするために使うものです。
意味合いが全く違うのです。ひとかたまりの情報の見出しを表現するためにはhnタグ、文章や語句を箇条書きに列挙する場合にはliタグを使いましょう。
２−３−４．文字が大きくなりすぎたり目立ちすぎるためhnタグを使いたくない場合
WordPressのテンプレートによってはhnタグを使うと目立ち過ぎたりして、使いたくないといったケースがあるかもしれません。
その場合はcssを調整して対処するべきです。
この種のcssの調整は簡単です。
下記は当ブログのh3の書式設定です。
h3 {margin:50px 0 20px 0; padding:20px 0; border-top:1px solid #EA4609; border-bottom:1px solid #EA4609; font-size:21px; line-height: 1.8em;}
こういったところの数値、色を調整して直しましょう。
cssの修正の方法そのものには立ち入りませんが、Wordpressであればこの種の情報は多数ありますので、難しくはないでしょう。
３．終わりに
SEOの観点からhnは重要性として非常に低くなったといわれていますが、それは一面的な見かたであるということがおわかりいただけたかと思います。
ユーザーにとって文章の構造のわかりやすさを提供するためにはhnは正しく設定しなくてはならず、またその結果として検索エンジンからも評価されるということなのです。
