アメブロでもライブドアブログでもWordPressでも、絶対知っておくべきHTMLタグがいくつかありまして、そのうちの一つが「h」タグ。
これは見出しを表すタグでh1～h6までの6段階のタグがあります。
h1が不在だったり、h1の次がh3になってる人などは要注意です。
見出しをつけるとどうなるか
ブログを書いてる人でHTMLに疎い人の場合「記事書いてるだけだから見出しとかめんどくせ」っていう人も多いです。
でも、見出しを付けることで得られるメリットは、SEO対策だけでなくて、単純に読みやすくなるというユーザーに対するメリットがあるので、文章をただ書いてるだけという方も是非意識していただきたいです。
また、覚えることはほんのちょっとのことなので、なるべく早くに正しく使っていた方が修正がめんどうじゃなくて済みます(笑)
基本的なhタグの使い方に関してはこちらの記事をご覧ください。
hタグの使い方
見出しを表す箇所に使う
hタグは「見出し」という意味のHTMLタグです。
記事のタイトルにはh1を使ったり、記事中に使う見出しにh2を使ったりという具合で使います。
僕のブログの記事ページの例を挙げると、記事タイトルがh1で、ブログの本文内ではh2タグから使い始め、h3タグまでは良く使います。それよりさらに下層の見出しを使いたいときにh4はたまに使います。h5,h6は使ったことがありません。
先日たまたま記事タイトルをpタグにしてるブログを見かけたのですが、すぐにやめてhタグ使いましょう。
h1→h2→h3と順番に使う
hタグは順番に使う必要があります。
h1の次にh2を使わずh3を使う、という使い方はやめましょう。
時々見かけますが、記事内でh2,h3を使わずにh4,h5を使ってる人がいます。構造的に間違ってるだけでなく、RSSリーダーで見たときに見づらいというデメリットも出ますのでやめましょう。
デザインはCSSで行う
hタグに限ったことではありませんが敢えて言っておきます。
デザインはCSSで行います。HTMLに直接書かないようにしましょう。
<!--良い例--> <h2>見出し</h2> <!--悪い例--> <h2><span style="color:#111111;">見出し</span></h2>
理由はいくつかありますが、もっとも理解していただきやすい理由を挙げると修正を簡単にするためです。
CSSに書いておけば1つ修正するだけですべてのページに反映されますが、HTMLに直接書くとページ数分修正しないといけなくなります。
CSSの書き方の例
.entry-content h2 {
border-left: 5px solid #ff9900;
color: #111111;
font-size: 18px;
font-weight: bold;
padding-left: 10px;
}
こんな具合に「記事を囲ってる枠のclass名＋h2」というような書き方(子孫セレクタ)をしてあげて、あとはフォントのサイズや色、余白などを書いてあげればおっけーです。
記事内のhタグにclass名を付けるのもありですが、記事を書くのがめんどうになるのでやめておいた方がいいと思います。CSSは子孫セレクタで指定しましょう。
h1タグが1ページに複数あっても良い
HTML4やXHTML主流の時代はh1タグは1ページに1つだけというルールだったためHTML5になったばかりの頃は混乱しましたが、HTML5では1つのページにh1タグが複数あっても大丈夫です。
例えば、サイトのロゴをh1にした上で、記事タイトルをh1にしてもいいのです。
ただし、原則としてsectionタグの中に置く必要があり、問答無用に使いまくっていいという訳ではないので、詳しく分からない方は一番大事なところ1つに留めておいた方が無難かと思います。
例としては、トップページはタイトルロゴ、その他のページはそのページのタイトルとなる見出し部分にh1を使う、という具合にマークアップするとスマートだと思います。
最後に
以前にSEOの専門家の方から、タイトルなどを工夫するよりHTMLの構造を最適化することを優先的にやったほうがSEO効果は高まるという話を聞きました。
その中でもさくっと手を付けられて効果が高いのがhタグですので、知らなかった方はこの機会に覚えていってください。
もちろん、ブログを誰かに読んでもらわなくてもいいっていう方は別ですが。