ワードプレスを使ってブログで記事を書くときに、
多くの方が見出しを使って文章をブロック分けしていると思います。
そのときに使う見出しで、もしかしたらh1タグを使ってしまっていませんか？
・・・「えっ？！」（昔の自分）
もちろん、ページにはh１タグは絶対に必要になるのですが、
記事の部分にはh1タグは使わないです。
今回は、「hタグ」と呼ばれる見出しのオススメの使い方をまとめました。
作成するときに推奨されているものを使えるようにしていきましょう！
そもそもhタグとは？
まず、基本のhタグについてですが、
ブログの文章の見出しを構成してくれるものです。
たとえば、僕のブログの場合のhタグはこのようなデザインで構成しています↓
h4以降をほぼ使わないため、デザインをサボってるのがバレバレですが笑
ちなみに、見出しの設定は記事を書くときのこの部分で設定できますね↓
見出し１：h１タグ
見出し２：h２タグ
見出し３：h３タグ
見出し４：h４タグ
見出し５：h５タグ
見出し６：h６タグ
このように、それぞれ振り分けられていて文章内のテキストを見出しに設定できます。
見出しには主に２つの効果があると思っています。
①文章の切り替わりを読者の方に知らせることができる
②「Table of Contents Plus」などのプラグインを使っていれば、目次が自動で作成できるので、記事にどのような情報があるかを簡潔に伝えることができる
ただ、文章がダラダラ〜とあるだけだと、
どこが重要で、何を結論として伝えたいのかが読んでてわからなくなってしまい、
結果的にページを閉じてしまう可能性も高くなってしまいます。
たとえば、本を読むときがわかりやすいかなと思います。
本を買おうとしたときにタイトルを見るのはもちろんそうですが、
中身がどんな内容なのかをペラペラっとめくったときに、目次があるだけでこんな内容が書かれているのか〜とわかると思います。
そして、その本が自分にとって必要なものなのか判断する材料にもなりますよね。
視覚的に、重要なことを端的に伝える目次のような項目があるだけで、
全体が把握できて、把握した上で読む準備ができるのでより内容が入ってきやすくなります。
h１タグは記事内では使わない
お待たせしました、本題です。
「h1タグは記事の文章内には使わない」とはどういうことか？
それはすでに使われている箇所があるからです。
その場所とは・・・「タイトル」です！
ワードプレスでは、
タイトル部分が自動的にh1タグになるようにほとんどのテーマで設定されています。
つまり、記事を作るときにタイトルを入力するとこの部分がh1タグとして反映され、
さらに記事を書くときに文章内でh1タグを使ってしまうと、複数のh１タグがそのページに使われることになってしまいます。
Google的に、複数のh１タグを使うのはオススメしていません。
ページの構造上h１タグが何個もあると、
Googleがブログを訪れた際に、どこが一番重要な項目なのかを判断できなくなるとされています。
ですので、見出しを活用するときは、必ずh1タグを除いた「h2〜h6」のhタグを使うようにしましょう。
使う順番も大事！
使う順番も大事とされています。
上から順に、「h1→h2→h3→h4→h5→h6」と使いましょう。
※タイトルをh１だとして、記事を書くときは先ほどお話ししたようにh２以降を使いましょう。
具体例をあげて説明しますね。
- h２→h１→h４
→そもそもh１が使われているので、h１をなくす
→h２とh４が残るが、この場合の理想はh２→h３。 - h２→h４→h３
→途中にh４が入ってしまっているので、h２→h３→h４が理想。
これらは純粋に、数字の順番がバラバラになっていますね。
ブログの構造をきちんと把握するために番号付けされたhタグがあるのに、
これではグーグルが「？」となってしまいますので気をつけましょう。
もちろん、全部使う必要はありません。
h６まで見出しは用意されているからといって、
全部きっちりとh６まで見出し要素を作って使う必要はありません。
ほとんどの方は、h２か、h３くらいで終わっているのがほとんどです。
それでも、見出しを選択するとh１が出てきてたんだもん！！
そうなんですよね。
見出しを設定するときに、h１タグが選択できてしまうので使ってしまう場合があるんですよね・・・。
でも、SEO的な観点からhタグを使うなら、
h２以降のタグを順序よく使って見出しを作っていきましょう。
「デザインがh１の方がいいから使っている」
「デザイン的にこっちの方がよかったから、h３→h２の順番で使っている」
「h３、h４だけ使ってh２は使っていない」
など、様々な理由から推奨される順番で使われていない場合があります。
僕も最初は順番をバラバラにして使っていたことがありましたが、実際のWEB制作現場ではSEOを意識した制作をするため、hタグの順番・使い方に気をつけて制作しています。
なので、デザインが理由で推奨される順番で使っていなかったのであれば、
CSSでデザインを逆にしてあげて対策しましょう。
hタグの効果的な使い方
「なんだなんだ！笑」
「赤ちゃんが検索順位が上がって超興奮してるw」
いきなりですが、一つの効果的な例として、
こんな感じでちょっと意外性のある画像を使って記事に引き込むような使い方をしたりすると、興味が湧いて次を読み進めてくれると思いますよ！
もちろん、必ず検索順位が上がる保証のあるものはありません（ _ _ ）
価値あるコンテンツを作り続けるしかないです。
と、興奮冷めやらぬ赤ちゃんは一旦お待ちいただいて、
hタグは視覚的に文章にメリハリをつける役割を持っていると先ほどお伝えしました。
僕も、h２タグで見出しを使って段落分けをしていくように意識して記事を作成しています。
その中でも、見出しの下に画像を使ってあげると読者の方が記事を読んでいく上で非常に読みやすく感じてくれます。
見出しとは、次に続く段落をまとめた文章なので、
その文章を補完する、体現するような画像を一緒に活用してあげると、
「次はこんな内容がくるな」
と、意識して読み進めてくれる可能性もぐっと高まります。
僕のプロフィール記事の一つの『好きなことを仕事にしたい！』は、絵を描く仕事に就きたいと思っていたときに「魔女の宅急便に出てくるおソノさん」そっくりの専門学校の学長さんに出会ったときのお話です↓
明るい性格で、話も面白いし、
よく焼肉を食べに行くそうで、それはもうとても元気で素敵な方でした！！
そんな学長さんのイメージが、もうジブリの「魔女の宅急便」に出てくるおソノさんそっくりで笑
なので、そのイメージを共有したくて、画像を見出しの下に置いています。
こちらが画像がないパターン。
あるのと、ないのではイメージのしやすさが変わるんじゃないかなと思います。
読者の方の記憶に残るような使い方ができたらベストですね！
まとめ
最後に、hタグの使い方をまとめますと、
- h１タグは一つだけ。
ワードプレスで記事を作成する場合、投稿も固定ページもタイトルがh１の役割を持っているため、重複してしまうから。 - 見出しの順番も意識する
h２〜h６の順番に気をつけましょう。 - 見出し下にイメージしやすい画像を使ってあげると、読みやすさが増して読んでくれる可能性が高くなる。
ということで、今違った使い方をしている方でも、
少しずつ丁寧な構造に修正していくことで、ブログの質をあげることにつながってくると思います。
細かな部分ではありますが、時間があるときに適宜自分のブログの構造を見直していきましょうね！
こんにちは！
WEBデザイナーのおかぴー（@blueokap）です。
当ブログについての詳しい内容はこちらです。