ワードプレスで記事を書くときh1タグを使ってしまってませんか?

hタグ 使い方
おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

当ブログについての詳しい内容はこちらです。

 

ワードプレスを使ってブログで記事を書くときに、
多くの方が見出しを使って文章をブロック分けしていると思います。

 

そのときに使う見出しで、もしかしたらh1タグを使ってしまっていませんか?

 

・・・「えっ?!」(昔の自分)

もちろん、ページにはh1タグは絶対に必要になるのですが、

記事の部分にはh1タグは使わないです。

 

今回は、「hタグ」と呼ばれる見出しのオススメの使い方をまとめました。
作成するときに推奨されているものを使えるようにしていきましょう!

 


そもそもhタグとは?

まず、基本のhタグについてですが、
ブログの文章の見出しを構成してくれるものです。

たとえば、僕のブログの場合のhタグはこのようなデザインで構成しています↓

hタグサンプル

h4以降をほぼ使わないため、デザインをサボってるのがバレバレですが笑

 

ちなみに、見出しの設定は記事を書くときのこの部分で設定できますね↓

hタグ
それぞれの意味

見出し1:h1タグ
見出し2:h2タグ
見出し3:h3タグ
見出し4:h4タグ
見出し5:h5タグ
見出し6:h6タグ

このように、それぞれ振り分けられていて文章内のテキストを見出しに設定できます。

見出しには主に2つの効果があると思っています。

見出しの効果

①文章の切り替わりを読者の方に知らせることができる
②「Table of Contents Plus」などのプラグインを使っていれば、目次が自動で作成できるので、記事にどのような情報があるかを簡潔に伝えることができる

ただ、文章がダラダラ〜とあるだけだと、
どこが重要で、何を結論として伝えたいのかが読んでてわからなくなってしまい、

結果的にページを閉じてしまう可能性も高くなってしまいます。

 

おかぴー

たとえば、本を読むときがわかりやすいかなと思います。

本を買おうとしたときにタイトルを見るのはもちろんそうですが、

中身がどんな内容なのかをペラペラっとめくったときに、目次があるだけでこんな内容が書かれているのか〜とわかると思います。

そして、その本が自分にとって必要なものなのか判断する材料にもなりますよね。

視覚的に、重要なことを端的に伝える目次のような項目があるだけで、
全体が把握できて、把握した上で読む準備ができるのでより内容が入ってきやすくなります。

 

h1タグは記事内では使わない

お待たせしました、本題です。

「h1タグは記事の文章内には使わない」とはどういうことか?

それはすでに使われている箇所があるからです。

 

その場所とは・・・「タイトル」です!

 

ワードプレスでは、
タイトル部分が自動的にh1タグになるようにほとんどのテーマで設定されています。

つまり、記事を作るときにタイトルを入力するとこの部分がh1タグとして反映され、

さらに記事を書くときに文章内でh1タグを使ってしまうと、複数のh1タグがそのページに使われることになってしまいます。

 

Google的に、複数のh1タグを使うのはオススメしていません。

ページの構造上h1タグが何個もあると、
Googleがブログを訪れた際に、どこが一番重要な項目なのかを判断できなくなるとされています。

ですので、見出しを活用するときは、必ずh1タグを除いた「h2〜h6」のhタグを使うようにしましょう。

 

使う順番も大事!

使う順番も大事とされています。

上から順に、「h1→h2→h3→h4→h5→h6」と使いましょう。

※タイトルをh1だとして、記事を書くときは先ほどお話ししたようにh2以降を使いましょう。

具体例をあげて説明しますね。

直した方がいい例
  • h2→h1→h4
    →そもそもh1が使われているので、h1をなくす
    →h2とh4が残るが、この場合の理想はh2→h3。
  • h2→h4→h3
    →途中にh4が入ってしまっているので、h2→h3→h4が理想。

これらは純粋に、数字の順番がバラバラになっていますね。

ブログの構造をきちんと把握するために番号付けされたhタグがあるのに、
これではグーグルが「?」となってしまいますので気をつけましょう。

 

もちろん、全部使う必要はありません。

h6まで見出しは用意されているからといって、
全部きっちりとh6まで見出し要素を作って使う必要はありません。

ほとんどの方は、h2か、h3くらいで終わっているのがほとんどです。

 

ねこのすけ

それでも、見出しを選択するとh1が出てきてたんだもん!!

おかぴー

そうなんですよね。
見出しを設定するときに、h1タグが選択できてしまうので使ってしまう場合があるんですよね・・・。

でも、SEO的な観点からhタグを使うなら、
h2以降のタグを順序よく使って見出しを作っていきましょう。

 

「デザインがh1の方がいいから使っている」

「デザイン的にこっちの方がよかったから、h3→h2の順番で使っている」

「h3、h4だけ使ってh2は使っていない」

など、様々な理由から推奨される順番で使われていない場合があります。

 

僕も最初は順番をバラバラにして使っていたことがありましたが、実際のWEB制作現場ではSEOを意識した制作をするため、hタグの順番・使い方に気をつけて制作しています。

なので、デザインが理由で推奨される順番で使っていなかったのであれば、
CSSでデザインを逆にしてあげて対策しましょう。

 

hタグの効果的な使い方

hタグサンプル

 

「なんだなんだ!笑」

「赤ちゃんが検索順位が上がって超興奮してるw」

 

いきなりですが、一つの効果的な例として、
こんな感じでちょっと意外性のある画像を使って記事に引き込むような使い方をしたりすると、興味が湧いて次を読み進めてくれると思いますよ!

 

もちろん、必ず検索順位が上がる保証のあるものはありません( _ _ )
価値あるコンテンツを作り続けるしかないです。

 

と、興奮冷めやらぬ赤ちゃんは一旦お待ちいただいて、
hタグは視覚的に文章にメリハリをつける役割を持っていると先ほどお伝えしました。

僕も、h2タグで見出しを使って段落分けをしていくように意識して記事を作成しています。

 

その中でも、見出しの下に画像を使ってあげると読者の方が記事を読んでいく上で非常に読みやすく感じてくれます。

 

見出しとは、次に続く段落をまとめた文章なので、
その文章を補完する、体現するような画像を一緒に活用してあげると、

「次はこんな内容がくるな」

と、意識して読み進めてくれる可能性もぐっと高まります。

 

僕のプロフィール記事の一つの『好きなことを仕事にしたい!』は、絵を描く仕事に就きたいと思っていたときに「魔女の宅急便に出てくるおソノさん」そっくりの専門学校の学長さんに出会ったときのお話です↓

hタグサンプル 魔女の宅急便 おソノさん

明るい性格で、話も面白いし、
よく焼肉を食べに行くそうで、それはもうとても元気で素敵な方でした!!

 

そんな学長さんのイメージが、もうジブリの「魔女の宅急便」に出てくるおソノさんそっくりで笑

なので、そのイメージを共有したくて、画像を見出しの下に置いています。

hタグサンプル 魔女の宅急便 おソノさん

こちらが画像がないパターン。

あるのと、ないのではイメージのしやすさが変わるんじゃないかなと思います。

読者の方の記憶に残るような使い方ができたらベストですね!

 

まとめ

最後に、hタグの使い方をまとめますと、

hタグまとめ
  • h1タグは一つだけ。
    ワードプレスで記事を作成する場合、投稿も固定ページもタイトルがh1の役割を持っているため、重複してしまうから。
  • 見出しの順番も意識する
    h2〜h6の順番に気をつけましょう。
  • 見出し下にイメージしやすい画像を使ってあげると、読みやすさが増して読んでくれる可能性が高くなる。

ということで、今違った使い方をしている方でも、
少しずつ丁寧な構造に修正していくことで、ブログの質をあげることにつながってくると思います。

細かな部分ではありますが、時間があるときに適宜自分のブログの構造を見直していきましょうね!

ブログ作り、何から始めたらいいか迷っている人へ

WordPressの設定、記事作り、収益化も・・・ブログと一言で言ってもやることいっぱい、どれから手をつけたらいいか分からない・・・

実は、デザインを整えるのも、ブログの方向性が決まってから進めるのがおすすめ!

一度自分のブログを俯瞰して(全体を上から見る)どんな方向性にすればいいかを見直す機会を作ることの重要性を解説。

同時に、あなたのブログ作りを加速させる「リサーチ」「ターゲット理解」「考える力」を鍛えよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください