要注意！見出しを指定する”hタグ”の使い方とやりがちな2の間違い+SEO対策

 

やぁ、朝型、夜型というよりは夕方型のユトピ(@yutopi60pa)だよ。
 

さぁーーーて、今回の60%ぶろぐは？

 
 

 

 
 

来週にはいかないです。
ということで今回はHTMLタグの「hタグ」について解説していきます。

 
 

hタグとは？

 

hタグとは、Headeingの略で、HTML上で見出しを意味します。
見出しとは本などで、記事よりも大きな文字で目を引かせる目的で書かれたタイトルのことです。目次に書かれる「章」や「節」の一覧などで使用されていますよね。他にも新聞の見出しとかも同じです。
 

 
 

HTMLでその見出しの意味を持ってせたい時にhタグを使用します。
 

hタグは見出しという性質から、最初から文字が大きくなったり、太文字になって目がひくようなデザインになっていることが多いです。
 
 

他にもhタグには「h1」から「h6」まで、全部で6種類あります。
 

使い方としてはhタグが階層構造になるように使っていきます。
 

例えばh1タグは一番大きな見出しで、その下にh2タグがいくつか並び、h2タグに下にh3タグが来るなど、必要に応じてhタグを使って階層化していくのが役割です。
 

実際にやってみましょう。
 
 

このようにhタグを使って記事を見やすくまとめることができます。
今回のデモではデザインは特に入っていませんが、CSSでもっと見やすくするようなデザインを作ってもいいですね。
 

このブログですと吹き出しのデザインをCSS作って、h2タグ適用させています。
 

 

他のサイトのhタグを参考にしてみるのも勉強になりますよ！
 
 

hタグの2つの注意点

 

ここでhタグの注意点をまとめていきます。
どれも最初のうちはやりがちなミスの代表なのでしっかりと目を通しておきましょう。
 
 

hタグの数字の順序を守ろう

 

 

この間違いはうっかりしているとやりがちです。
例えば、
 

h1 → h2 → h4 → h3
h2 → h3 → h5 → h2
 

などなど、一つの記事に対してこのように数字の順序がバラバラになるような書き方はしてはいけません。
しかしこの場合はOKです。
 

h1 → h2 → h3 → h4 → h2

 
h4からh2と数字の順番がおかしくなっているように見えますが、これは大丈夫です。
この場合はh4が所属している最初のh2タグの章が終わり、新しい章に移動したので、h4からh2に行っても問題ありません。
 

要するカウントアップの際は数字の順番(1 → 2 → 3 → ・・・)は守らなければいけませんが、カウントダウンの際は数字の順場(6 → 5 → 4 → ・・・)は守らなくても大丈夫です。

 
 

誤用に気を付けよう

 
次はhタグの特徴の間違った使い方について。
 

まだHTMLでのコーディングになれていない人で、hタグを太文字や大きな文字にするためだけに使ったり、改行をさせるために使ったりする人がたまにいます。
こんな風にね。
 
 

当然ながらこれは間違い。
 

hタグが太文字になったり、大きくなったりするのは「見出し」としての機能を果たすためです。見出しは目立たせなければいけないので、文字にデザインを入れています。改行をするのはhタグがブロック要素だから。
 

もし太文字にしたい場合はbタグやstrongタグ、文字を大きくする場合はfontタグやCSSを使いましょう。

 
 

SEO効果について

 

hタグはしばしばSEO対策には欠かせないタグの1つだと言われてきました。
※SEOとはあるキーワードで、googleやyahooの検索順位上位を目指すために行われる対策のこと。
 

特に大事なのが「h1タグ」。
h1タグは本で言う表紙に書かれたタイトル。
その文章の最も重要な部分に使うタグです。
 

以前はh1タグは1ページに1個が絶対！なんて言われていました。
 

しかしHTML5ではh1タグを複数使うことは文法上間違っていないんです。
加えて、Googleの偉い方は「あまり気にする必要はない」と発言しています。
 

Googleのマット・カッツさんは「気にする必要はない」と言っている

youtubeの動画でも公開されているのですが、Googleのマット・カッツさんは

「WEBサイトを作っていてh1タグがh2タグの次に来てしまうのですが問題ありますか？」という質問に対して「順番は気にする必要はない」と発言しています。

この見解には納得です。WEBサイトの運用にあまり慣れてない管理者だった場合は、特にhタグの順序など気にせずにサイトを展開してしまうことがほとんどだと思います。

しかし、順序がいくらバラバラだとはいえど、ユーザーに閲覧されるべき情報が眠っている可能性があるのは明白で検索エンジンは有益な情報を検索結果に表示させるために、そういったサイトも評価することが考えられます。

現に僕が様々なキーワードで検索しhタグの順序がバラバラになっているサイトに行きついているところを考えても、検索結果に多大な影響を与える部分とは考えにくいといえるからです。

出典：h1 h2 h3などの見出しタグの重要性と正しい順序

 

このようなGoogle先生の見解を見ると、先ほどの大きな誤用みたいなことでなければ、あまり気にしすぎることはないんじゃないかと僕は思います。
実際hタグが全くないページでも検索順位上位に表示されることありますから。
 

もちろんユーザーが第1なので、わかりやすく読みやすくするためにhタグを正しく使うのは当たり前なのですがね。

 
 

まとめ

 
いかがでしたかな？
hタグ自体はただ囲むだけなので難しくはないですよね。
 

ただそれをどこに使うかは、最初の文章を考える段階で決めていかなければなりません。
そっちの方が難しく、大変だと思います。
 

やっぱり基本は理解しやすい文章を作ることなので、hタグはあくまで手助けとしての役割しかないです。
 

そこをしっかりと理解してhタグを使っていってくださいね。

よく使うHTMLタグ, ブロック要素, 見出し