WordPressで記事を書くときh1タグを使ってしまってませんか?

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

 

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

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

 

みみこみみこ
えっっっ??!
どーゆーこと?h1タグって最初に設定するものじゃないの?

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

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

 

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

 

そもそもhタグとは?

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

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

hタグサンプル

※STORK時代の旧デザイン

 

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

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

hタグ

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

 

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

ちなみに、見出しには主に以下の2つの効果があります。

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

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

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

 

おかぴーおかぴー

例えば、本を読むときがわかりやすいかなと思います。本を買おうとしたときにタイトルを見るのはもちろんそうですが、

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

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

 

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

 

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

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

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

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

 

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

 

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

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

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

 

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

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

ですので、見出しを使う時には必ずh1タグ以外の「h2〜h6」をつかいましょう。

 

使う順番も大事!

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

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

 

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

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

ブログ収益化

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG