コンテンツSEOを始めて、コンテンツを作り始めたばかりの人の大半は見出しタグの使い方を間違えてしまう。しかし、見出しタグは内部SEOの面で非常に重要なものであり、使い方を間違えるとSEO的に悪影響を被ってしまう。
そこで、このページでは、そうした状況を避けて頂くために、見出しタグに関して絶対に知っておくべき次の事柄に関して詳しく解説する。
- 見出しタグとは
- 見出しタグの効果とSEO上の役割
- 見出しタグを設定する時の3つの注意点
- 効果的な見出しを作る基礎となる2つのテクニック
とても重要なものなので、じっくりと読み進めて欲しい。
1.見出しタグとは
見出しタグとは、ユーザーと検索エンジンの双方にページ内のコンテンツ構成を正しく伝えるために使用する技術のことで、HTMLでは以下のようなタグで記述する。
ご覧のように、見出しタグは1~ 6まであり数字が若いほど重要度が上がる。
1 2 3 4 5 6 7 |
//見出しタグ <h1>テキスト</h1> <h2>テキスト</h2> <h3>テキスト</h3> <h4>テキスト</h4> <h5>テキスト</h5> <h6>テキスト</h6> |
通常、見出しタグで囲まれたテキストは、普通のテキストと比べて大きく表示される。そのため、その見出しタグの下に続く文章が、どのような内容のものなのかを理解しやすくなる。
例えば、上の「1.見出しタグとは」というテキストはh2タグを設定してるから、通常のテキストより大きく表示され視覚的装飾もついている。すぐ下の「1−1.見出しタグの効果」というテキストにはh3タグを適用している。
それではなぜ見出しタグを使うことが重要なのだろうか?
それは見出しタグの適切な使用には、
- ページのユーザビリティを上げる
- ページのSEO効果を上げる
という2つのメリットがあるからだ。詳しく説明しよう。
WordPressでの見出しタグの設定方法に関しては、『TinyMCE Advanced の設定方法と使い方』で解説しているので確認しておこう。
1−1.見出しタグの効果
見出しタグには、そのページの文章構造をユーザーに正確かつ分かりやすく伝える効果がある。
参考に以下の図を見て欲しい。もし、見出しタグを使用せずにコンテンツを作成すると、そのページはこのようにメリハリのないページになり読みにくいものになってしまう。
しかし、見出しタグを適切に使用すると次の図のように、同じ文章でも格段に読みやすく理解しやすくなる。
いかがだろうか。
見出しタグを適切に使うと、そのページ内の文章の構成がはっきりとなり、ユーザーは、ページの内容をストレスなく理解できるようになるのだ。さらに複数のサイズの見出しを使い分けると、より正確に、そのコンテンツの階層構造をユーザーに伝えることができるようになる。
1−2.見出しタグのSEO効果
見出しタグの効果は、ユーザーだけに留まらない。検索エンジンロボットに対しても同じように、そのコンテンツの構造を正確に伝える効果がある。
そのため、そのコンテンツのインデックスがより適切に行われるようになる。
このように、サイトのコンテンツを作るのであれば、ユーザービリティの面から見ても、SEOの面から見ても、見出しタグの使用は必要不可欠と言える。
インデックスが何のことなのか良く分からないという方は、『検索エンジンの仕組み』に目を通しておこう。
2.見出しタグを設定する時の3つの注意点
見出しタグはSEOの面から見ても重要な意味を持つタグだ。そのため、見出しタグを使う時は以下の注意点を絶対に守るようにしよう。
- ページ構成と関係ない意図で使わないこと
- 見出し1<h1>は1ページに1つにすること
- 見出しタグの順番を守ること
これらの点を守らなければ、SEO面で悪影響が出てしまう。
一つずつ詳しく解説していこう。
2−1.ページ構成と関係ない意図で使わないこと
時々、見た目を調整することだけを目的として、見出しタグを使用してしまう人がいる。
しかし、見出しタグはテキストの見た目を調整するためのものではなく、あくまでもページ上の階層構造をユーザーや検索エンジンにとって分かりやすく示すために使うものだ。テキストの見た目を調整したい場合は、以下のタグを組み合わせて使うようにしよう。
1 2 3 4 |
<b>テキスト</b> ※太字表示にするタグ <em>テキスト</em> ※斜体表示にして強調を意味するタグ <strong>テキスト</strong> ※太字表示にして強い強調を意味するタグ <font size="○○px">テキスト</font> ※テキストのサイズを変えるタグ |
2−2.見出し1(h1)は1ページ1つにすること
h1タグは、そのページでもっとも重要なテキストに対して使用するタグだ。例えば、サイトのトップページであればサイトタイトルが、記事ページであれば記事タイトルが、そのページでもっとも重要なテキストだ。そのためh1タグは、タイトルに設定するのが自然だ。
なお、HTML5では1つのページに複数の<h1>タグも技術上は使用することができるが、私は一つのページ内に2つ以上のh1タグの使用を考慮するような状況を経験したことはない。
また、ほとんどのWordPressテーマでは、自動的にタイトルに<h1>が付くようになっている。
タイトルタグは、SEOの観点から見ると、そのページの要素の中でも最重要と言えるものだ。そしてh1タグも同じように、そのページ内で最も重要なテキストを示すためのタグだ。従って、両者には同じテキストを設定しておくことが望ましい。詳しくは、『タイトルタグの最適化方法とSEOに効果的なタイトルのつけ方』も見て確認しておこう。
2−3.見出しタグの順番を守ること
見出しタグは<h1>から始まり<h6>まであるが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らなければいけない。
繰り返しになるが、見出しタグはコンテンツの階層構造を正しく示すために使うものだ。見出しタグの順番が守られていないということは、その階層構造を正しく示せていないということになる。それでは、結果的にSEOにマイナスの影響を与えてしまう。
例えば、以下のような設定が順番を守っていない例だ。
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>タイトル</h1> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h2>テキスト</h2> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h2>テキスト</h2> <p>テキストテキストテキストテキストテキスト</p> |
黄色時の箇所を見てみると<h1>のすぐ下に<h3>がある。正しい階層構造とは、以下のようなもののことを言う。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<h1>タイトル</h1> <p>テキストテキストテキストテキストテキスト</p> <h2>テキスト</h2> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h2>テキスト</h2> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h2>テキスト</h2> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> <h3>テキスト</h3> <p>テキストテキストテキストテキストテキスト</p> |
コンテンツ作成を始めたばかりの方は、特に見出しタグの順番を無視して設定してしまいがちなので注意しよう。
3.効果的な見出しを作る基礎となる2つのテクニック
多くの人は、コンテンツ中の見出しの文言を決めることに時間を使わず、何も考えずに決めてしまう。しかし、どういう見出しにするかで、そのコンテンツの伝わりやすさも理解のしやすさも大きく変わる。
それが結果的に、そのページの平均滞在時間にも影響し、見た人に満足してもらいソーシャルボタンを押して拡散してもらえるかどうかにも影響する。
見出しに設定する文言はそれだけ重要なものだ。
そこで、最後に効果的な見出しを作るための基礎的な2つのテクニックをご紹介しよう。
3−1.見出しを見ただけで内容が分かるようにすること
WEBユーザーの中には、最初にページにアクセスした時に一度ページの一番下までスクロールして全体の内容を理解しようとする人も少なくない。そうやってスクロールした時に「おっ、これは気になるから読んでみよう」というようなひっかかりがなければ、そのユーザーはそのままページから離脱してしまう。
その状況を防ぐために有効なのが、見出しを見ただけで全体の内容が分かるようにすることだ。
例えば、以下はこのページ内の見出しタグを設定している文言を抜き出したものだ。見出しをみただけで、このページでどのような情報を得られるのかが明確に分かるようになっている。
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.まとめ
見出しタグは、あなたがせっかく作ったコンテンツをユーザーに分かりやすく伝えるために、そして検索エンジンに適切に評価してもらうために非常に重要なものだ。
ここで記している内容をしっかりと頭にいれて、コンテンツ作成を行うように徹底しよう。
はじめまして。いつも参考にさせていただいています。
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タグを反映させるにはどうしたらよいのでしょうか?
教えていただけると助かります。よろしくお願いします。
非常に参考になりました。
自分で設定しながらよりよいブログを作りたいと思います!