ブロクにおける「見出し」には、情報を整理して、ユーザーの理解を助ける役割があります。
また、SEO的に有効、というのもよく言われることです。
ただこの見出し、適当につければ良いという訳ではなくルールが存在するのですが、いろんなブログを読んでいると、間違った使い方をしてる人が少なくありません。
特にブログ初心者の人はその傾向が顕著。
なので今日は、初心者向けに「見出し」活用の基本についてお伝えしたいと思います。
[ad#co-1]見出しタグの役割
記事中で使われる見出しには、ユーザー向け、検索エンジン向けの2つの側面があります。
ユーザー向け：情報の理解を助ける
単調な長分は読む気にならないので、見出しを入れることでメリハリを作ります。これにより文章全体にリズムができ、長文でも読みやすくなります。
また、見出しを拾えば何が書いてあるかが伝わるので、流し読みしやすくなるというメリットも。
検索エンジン向け：SEO対策
見出しに含むキーワードは重要キーワードとして認識してくれるので、うまく活用すると記事が検索上位に上がりやすくなります。
タイトルにキーワードを入れていないのに流入がある場合は、見出しにキーワードが入っていることが少なくありません。
見出しタグの付け方
見出しの役割は理解していただけたでしょうか？
ここからは、実際にどうやって見出しを付ければよいのか説明していきますね。
見出しのソースを理解する
見出しのタグとして用意されているのはh1～h6タグ。
h1→h2→h3→h4→h5→h6の順番につけていきます。（実際に使うのはh4くらいまで）
htmlのソースで表すと、例えば
<h2>中見出し</h2>
のようになります。
「ｈ◎」の文字が大きくなればなるほど、大見出し→中見出し→小見出しというように、階層が深くなっていくのが基本。
そして数字が小さいほど、重要度は高くなります。
例えば雑誌でいうなら、表紙がh1、各特集（着まわし特集とか、メイク特集）の見出しがh2、特集内の見出し（着まわしのポイント１、２、３）がh3という感じになりますね。
SEO対策をするのであれば、見た目だけ文字を大きくしたり装飾するのではなく、「これが大見出しで、これが中見出しです！」
ということを検索エンジン側に伝えなければいけません。
どんなに見た目を整えても、検索エンジンのロボットは見た目でページの構造は認知できないので、htmlソースで教えてあげる必要があるんですね。
なので、見出しタグを正しく使用し、ページの構造を伝えます。
WordPressや無料のブログサービスでは、プルダウンメニューから「見出し」を選択すれば自動的にソースが挿入される仕組みになっていることも多いです。
WordPressテーマでは、記事タイトルにh1が割り振られていることが多いので、その場合はh2からつけていきます。
見出しのデザインを整える
次に、見出しのデザインをカスタマイズするときの注意点。
h1→h6にいくにしたがって情報の階層が深くなりますが、これをデザインにも反映させます。
例えば、大見出し、中見出し、小見出しを使うのであれば、大→中→小見出しの順に文字を小さくする、装飾を減らすなどすることで、重要な情報の順番や階層が一目で分かるようになります。
よくある見出しの失敗例
見出しを間違って使っている人は多いので、その代表的な失敗例をいくつか挙げていきたいと思います。
見出しの順番が守られていない
h1から順につけるのが見出しの基本ですが、h3のあとにh2が来ていたり、h1の次にh3が来ているのをよく見かけます。
デザイン重視で見出しを選んでいる人が陥りやすい失敗ですね。
「h2タグよりもh3タグの見出しの方がかっこいいからこっちを使おう。」
なんて思って使っていませんか？
ページの構造が正しく検索エンジンに伝わらないため、この使い方は優しくありません。
見出しタグは正しい順序で付けましょう。
見出しタグを使わずにフォントを装飾している
見た目は見出しっぽいのに、ソースを見ると見出しじゃなかった、というのもよくあります。
<h2>中見出し</h2>とするべきところを、<strong>中見出し</strong>にして、太字にしているような例。
上でも述べましたが、hタグを使わないと検索エンジンはそれが見出しだと認識できないので、必ずhタグを使うようにしてください。
ページによってデザインが異なる
カスタマイズ好きな人がやりがちなのが、同じタグなのに、ページによってデザインが違うというパターン。
ページの性質が異なる場合はデザインを変えても別にいいのですが、そうではないのに、ページによってむやみに見出しのデザインを変えてしまっている人がいます。
これはユーザーにとってストレスの元です。
同じ性質のものはデザインを共通のものにするようしてください。
見出しの下にすぐ見出し
見出しというのは、後に続く文章の内容を端的に表したものです。
例えば、おすすめの花粉症対策グッズについて書くなら、
<h2>おすすめの花粉症対策グッズ</h2>
<h3>マスク</h3>
花粉症の必須アイテムはまず、マスクですよね…（省略）
<h3>メガネ</h3>
最近は、おしゃれに付けられる花粉症対策メガネも増えてきました…（省略）
<h2>おすすめの花粉症対策グッズ</h2>
わたしが色々使ってみて効果があると感じたグッズをアイテム別に紹介していきますね。
<h3>マスク</h3>
花粉症の必須アイテムはまず、マスクですよね…（省略）
<h3>メガネ</h3>
最近は、おしゃれに付けられる花粉症対策メガネも増えてきました…（省略）
OK例のように、h2の見出しに対する本文が必要になります。
たまに、ブログタイトル直下に見出しを置いている人がいますが、ユーザーからしても唐突感が否めません。
見出しと本文はセットと心得ましょう。
見出しの役割まとめ
以上、見出しの役割から使い方、注意点までお伝えしました。
・正しい順序とルールで見出しタグを使う
・見出しタグのカスタマイズは情報の構造が分かりやすいようにデザインに差をつける
正しく見出しを付けることで、ユーザーにも検索エンジンにも優しいサイトになるので、間違った使い方をしていた人はぜひ一度見直してみてください。
[sp]
[ad#co-2]
[/sp]
