見出しタグの使い方と絶対に知っておくべき注意点

  • このエントリーをはてなブックマークに追加

コンテンツSEOを始めて、コンテンツを作り始めたばかりの人の大半は見出しタグの使い方を間違えてしまう。しかし、見出しタグは内部SEOの面で非常に重要なものであり、使い方を間違えるとSEO的に悪影響を被ってしまう。

そこで、このページでは、そうした状況を避けて頂くために、見出しタグに関して絶対に知っておくべき次の事柄に関して詳しく解説する。

  • 見出しタグとは
  • 見出しタグの効果とSEO上の役割
  • 見出しタグを設定する時の3つの注意点
  • 効果的な見出しを作る基礎となる2つのテクニック

とても重要なものなので、じっくりと読み進めて欲しい。

1.見出しタグとは

見出しタグとは、ユーザーと検索エンジンの双方にページ内のコンテンツ構成を正しく伝えるために使用する技術のことで、HTMLでは以下のようなタグで記述する。

ご覧のように、見出しタグは1~ 6まであり数字が若いほど重要度が上がる。

通常、見出しタグで囲まれたテキストは、普通のテキストと比べて大きく表示される。そのため、その見出しタグの下に続く文章が、どのような内容のものなのかを理解しやすくなる。

例えば、上の「1.見出しタグとは」というテキストはh2タグを設定してるから、通常のテキストより大きく表示され視覚的装飾もついている。すぐ下の「1−1.見出しタグの効果」というテキストにはh3タグを適用している。

それではなぜ見出しタグを使うことが重要なのだろうか?

それは見出しタグの適切な使用には、

  • ページのユーザビリティを上げる
  • ページのSEO効果を上げる

という2つのメリットがあるからだ。詳しく説明しよう。

WordPressでの見出しタグの設定方法
WordPressでの見出しタグの設定方法に関しては、『TinyMCE Advanced の設定方法と使い方』で解説しているので確認しておこう。

1−1.見出しタグの効果

見出しタグには、そのページの文章構造をユーザーに正確かつ分かりやすく伝える効果がある。

参考に以下の図を見て欲しい。もし、見出しタグを使用せずにコンテンツを作成すると、そのページはこのようにメリハリのないページになり読みにくいものになってしまう。

見出しタグのない文章

しかし、見出しタグを適切に使用すると次の図のように、同じ文章でも格段に読みやすく理解しやすくなる。

見出しタグのある文章

いかがだろうか。

見出しタグを適切に使うと、そのページ内の文章の構成がはっきりとなり、ユーザーは、ページの内容をストレスなく理解できるようになるのだ。さらに複数のサイズの見出しを使い分けると、より正確に、そのコンテンツの階層構造をユーザーに伝えることができるようになる。

1−2.見出しタグのSEO効果

見出しタグの効果は、ユーザーだけに留まらない。検索エンジンロボットに対しても同じように、そのコンテンツの構造を正確に伝える効果がある。

そのため、そのコンテンツのインデックスがより適切に行われるようになる。

このように、サイトのコンテンツを作るのであれば、ユーザービリティの面から見ても、SEOの面から見ても、見出しタグの使用は必要不可欠と言える。

※インデックスに関して
インデックスが何のことなのか良く分からないという方は、『検索エンジンの仕組み』に目を通しておこう。

2.見出しタグを設定する時の3つの注意点

見出しタグはSEOの面から見ても重要な意味を持つタグだ。そのため、見出しタグを使う時は以下の注意点を絶対に守るようにしよう。

  • ページ構成と関係ない意図で使わないこと
  • 見出し1<h1>は1ページに1つにすること
  • 見出しタグの順番を守ること

これらの点を守らなければ、SEO面で悪影響が出てしまう。

一つずつ詳しく解説していこう。

2−1.ページ構成と関係ない意図で使わないこと

時々、見た目を調整することだけを目的として、見出しタグを使用してしまう人がいる。

しかし、見出しタグはテキストの見た目を調整するためのものではなく、あくまでもページ上の階層構造をユーザーや検索エンジンにとって分かりやすく示すために使うものだ。テキストの見た目を調整したい場合は、以下のタグを組み合わせて使うようにしよう。

2−2.見出し1(h1)は1ページ1つにすること

h1タグは、そのページでもっとも重要なテキストに対して使用するタグだ。例えば、サイトのトップページであればサイトタイトルが、記事ページであれば記事タイトルが、そのページでもっとも重要なテキストだ。そのためりh1タグは、タイトルに設定するのが自然だ。

なお、HTML5では1つのページに複数の<h1>タグも技術上は使用することができるが、私は一つのページ内に2つ以上のh1タグの使用を考慮するような状況を経験したことはない。

また、ほとんどのWordPressテーマでは、自動的にタイトルに<h1>が付くようになっている。

※h1とtitleタグには同じテキストを設定しておこう。
タイトルタグは、SEOの観点から見ると、そのページの要素の中でも最重要と言えるものだ。そしてh1タグも同じように、そのページ内で最も重要なテキストを示すためのタグだ。従って、両者には同じテキストを設定しておくことが望ましい。詳しくは、『タイトルタグの最適化方法とSEOに効果的なタイトルのつけ方』も見て確認しておこう。

2−3.見出しタグの順番を守ること

見出しタグは<h1>から始まり<h6>まであるが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らなければいけない。

繰り返しになるが、見出しタグはコンテンツの階層構造を正しく示すために使うものだ。見出しタグの順番が守られていないということは、その階層構造を正しく示せていないということになる。それでは、結果的にSEOにマイナスの影響を与えてしまう。

例えば、以下のような設定が順番を守っていない例だ。

黄色時の箇所を見てみると<h1>のすぐ下に<h3>がある。正しい階層構造とは、以下のようなもののことを言う。

コンテンツ作成を始めたばかりの方は、特に見出しタグの順番を無視して設定してしまいがちなので注意しよう。

3.効果的な見出しを作る基礎となる2つのテクニック

多くの人は、コンテンツ中の見出しの文言を決めることに時間を使わず、何も考えずに決めてしまう。しかし、どういう見出しにするかで、そのコンテンツの伝わりやすさも理解のしやすさも大きく変わる。

それが結果的に、そのページの平均滞在時間にも影響し、見た人に満足してもらいソーシャルボタンを押して拡散してもらえるかどうかにも影響する。

見出しに設定する文言はそれだけ重要なものだ。

そこで、最後に効果的な見出しを作るための基礎的な2つのテクニックをご紹介しよう。

3−1.見出しを見ただけで内容が分かるようにすること 

WEBユーザーの中には、最初にページにアクセスした時に一度ページの一番下までスクロールして全体の内容を理解しようとする人も少なくない。そうやってスクロールした時に「おっ、これは気になるから読んでみよう」というようなひっかかりがなければ、そのユーザーはそのままページから離脱してしまう。

その状況を防ぐために有効なのが、見出しを見ただけで全体の内容が分かるようにすることだ。

例えば、以下はこのページ内の見出しタグを設定している文言を抜き出したものだ。見出しをみただけで、このページでどのような情報を得られるのかが明確に分かるようになっている。

1.見出しタグとは
 1−1.見出しタグの効果
 1−2.見出しタグのSEO効果
2.見出しタグを設定する時の3つの注意点
 2−1.ページ構成と関係ない意図で使わないこと
 2−2.見出し1(h1)は1ページ1つにすること
 2−3.見出しタグの順番を守ること
3.効果的な見出しを作るテクニック
 3−1.見出しを見ただけで内容が分かるようにすること
 3−2.見出しは文の形にしないこと
 3−3.基本的なコピーライティングを抑えておくこと
4.まとめ

これらの見出しのうち、どれか一つででも「おっ、これは気になる」とユーザーに思ってもらえれば、それをきっかけにして記事全体を読んでもらえるかもしれない。

このように見出しは、本の目次のように考えて設定しよう。

3−2.見出しは文の形にしないこと

上述したように、見出しは一瞬読み流した時に「おっ、これは気になる」と思って立ち止まり、読み進めてもらえるように促す役割がある。そのような場合、どれだけ魅力的な見出しだとしても、文字数が多いと、引っかかる前に読み飛ばしてしまう。

つまり、見出しは短い方が目に留まりやすいということだ。

見出しを短くするには、見出しは文の形ではなく、最後は名詞でおわる文言を考えるのが有効だ。参考までに以下の2つの文言を見比べてみてほしい。

  • なぜWordPressがSEOに強いのか?
  • WordPressがSEOに強い理由

後者の方が、具体的で興味を持ってもらいやすく、なおかつ前者より文字数も少ない。 

このように、見出しは魅力的かつ、流し読みする人が一瞬で内容を把握できる程度の短さになるように、常にこころがけよう。

※より効果的な見出しを作りたないならコピーライティングも学ぼう
見出しにどのような文言を設定したら効果的かという議論に関しては追求すればするほどキリがない。しかし、さらに多くの人に自分が作るコンテンツに触れてもらいたい場合は、コピーライティングのテクニックも有用だ。絶対に必要というものであれば興味があれば『コピーライティング初級講座』にも目を通してみよう。

4.まとめ

見出しタグは、あなたがせっかく作ったコンテンツをユーザーに分かりやすく伝えるために、そして検索エンジンに適切に評価してもらうために非常に重要なものだ。

ここで記している内容をしっかりと頭にいれて、コンテンツ作成を行うように徹底しよう。

  • このエントリーをはてなブックマークに追加

無料EBook:バズ部式マーケティング
PPC広告費を1/10にして売上を倍増させる全手法

PPCに頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているがよく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

是非、貴社のWEBマーケティングにもご活用下さい。


EBookをダウンロード

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. はじめまして。いつも参考にさせていただいています。
    FX動画.com「http://fx-douga.com/」というサイトを作っているHiroと言います。
    今後、読みやすい文字の調整や記事の構成、また見出しの装飾について改善していこうと考えています。

    そこで質問なのですが、見出しに装飾を加えるために「style.css」に以下のコードを貼り付けました。

    ———————————————————————
    h1 {
    position: relative;
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #3498db;
    }
    h1::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: ”;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
    }
    ———————————————————————
    目的としては記事のページだけにHタグが反映されてばよいのですが、
    私が使っているワードプレスのテーマはトップページにの各所にHタグが使われています。
    その為、「style.css」にコードを追加するとトップページでHタグが使われている箇所の
    全てにもHタグ装飾が入ってしまいます。

    記事のページだけにHタグを反映させるにはどうしたらよいのでしょうか?
    教えていただけると助かります。よろしくお願いします。