2016.11.08SEO記事一覧

<h1>とは?SEOを意識した正しい見出しタグの使い方

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

14_correct-usage-of-heading-tag

<h1>はSEOで重要とよく聞くけど、そもそもhタグって何?具体的にどうするのが正解なの?と疑問に思われている方も多いのではないでしょうか。

今回は、SEOにとって重要な要素のひとつである見出しタグ(hタグ)について、概要から正しい記述方法まで、まるっとご紹介したいと思います。

hタグとは

文章がズラーッと書かれていると読みづらいのは、人間も検索エンジンも同じです。

見出しタグは、文章にメリハリをつけ、読みやすくするためのタグで、<h1>から<h6>まで6種類あり、ページの構成に合わせて使用します。きちんと記述することで、人間にも検索エンジンにも、ページの内容を伝えやすくなります。

特に見出しの中で最も高い階層にある<h1>タグは、検索エンジンがページの内容を理解する上で非常に重要なタグです。<h1>タグは別名、大見出しとも呼ばれ、サイトの内容(コンテンツ)を検索エンジンや、訪問してきた検索ユーザーに対して、適切に伝える役割を担っています。

多くのサイトでは、階層の高い見出しほど、大きくしたり派手に装飾したりしています。デジ研でも、下記のように装飾を設定しています。

correct-usage-of-heading-tag-01

hタグの基本的な使い方

hタグを使用するにあたってはいくつかの重要なポイントがあります。
ここではhタグの正しい使い方や使用上の注意点を紹介します。

hタグの順番

hタグの記述は順序を守ることが大切と言われています。

ダメな記述例①

<h2>これでもう、迷わない!お弁当のおかずレシピ10選</h2>
<p>お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)</p>

<h3>長期保存OKなおかず</h3>
<p>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</p>

<h4>冷凍保存で楽ちん♪ミニハンバーグ</h4>
<p>ひき肉200g…(コンテンツテキスト本文)</p>

このように、いきなり<h2>から記述を始めるのは良くありません。hタグは、本の目次のようなものです。<h1>がないのは、タイトルのない本のようなものです。

階層を意識して、必ず<h1>から記述をするようにしましょう。

ダメな記述例②

<h1>これでもう、迷わない!お弁当のおかずレシピ10選</h1>
<p>お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)</p>

<h3>長期保存OKなおかず</h3>
<p>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</p>

<h2>冷凍保存で楽ちん♪ミニハンバーグ</h2>
<p>ひき肉200g…(コンテンツテキスト本文)</p>

このような順序の入れ変わりや、<h1>→<h2>→<h4>のような歯抜け状態の記述は避けましょう。

正しい記述例

<h1>これでもう、迷わない!お弁当のおかずレシピ10選 …(コンテンツの大見出し)</h1>

お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)

<h2>長期保存OKなおかず…(コンテンツの中見出し)</h2>
<p>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</p>

<h3>冷凍保存で楽ちん♪ミニハンバーグ…(コンテンツの小見出し)</h3>
<p>ひき肉200g…(コンテンツテキスト本文)</p>

このように正しく順番を守り、使用するのが適切なhタグの使い方です。

Webデザイン上でのhタグ

Webデザインをする上で、<h1>や<h2>タグの文字の大きさが、テキスト装飾やテキストサイズに合っているからと、安易に使用するのは避けましょう。なるべくhタグはテキストで記述し、デザインやサイズは、CSSなどで調整を行うようにしましょう。

SEO対策におけるhタグの記述方法

<h1>タグはページの大見出しタグという役割のほかに、正しく使うことで、SEOにおいても重要なタグです。国内の検索エンジン利用者シェアの60%を超えるGoogleは、<h1>タグについて適切に使用することを呼び掛けています。

Googleと<h1>タグの関係

Googleの検索エンジンロボット、通称クローラーにとっても<h1>タグは、ページ内容を理解するための重要な判断要素です。

見出しタグを乱用してしまうと、「どのようなページなのか」「何が重要なの情報なのか」などがクローラーにうまく伝わらず、情報の整理が出来なくなってしまう可能性があります。

クローラーは、<h1><h2><h3>…の順番で重要度を区別し、hタグで囲まれたテキストを見出しとして捉え、本文とは別のものと判断します。つまりは、数字が小さければ小さいほど、タグに囲まれた部分のテキスト内容がそのページにとって重要なものだと、クローラーが認識するということになります。

Googleの推奨する適切な<h1>タグ

Googleは検索エンジンスターターガイド内で適切な見出しタグの使い方について説明しています。
Googleの示す<h1>(見出しタグ)についての記述ポイントは下記のとおりです。

  1. ページの構成と関係なく見出しタグでテキストを囲わない
  2. <em>や<strong>が適切な箇所で見出しタグを使用しない
  3. 見出しタグのサイズの使い分けを不規則にしない
  4. ページ内で見出しタグの乱用はしない
  5. ページ内のすべてのテキストを見出しタグで囲わない
  6. 見出しタグをスタイル変更のためだけに使用しない

<h1>タグの適切な使用回数は1ページにひとつ

HTML5の場合、<h1>を複数回使用することが認められています。一方でGoogleは、<h1>タグが複数あることに関して、「どの<h1>要素が本来重要なのかが判断できなくなり、本来の大見出しとしての重要度や価値が薄まる。」と公式に発言しています。

そのため、Googleにページの内容を適切に伝えたいと考えるならば、大見出しとなる<h1>タグの使用回数は、1ページ毎にひとつに絞ることをおすすめします。

<h2>以下に関しては複数回使用しても問題はありませんが、階層を意識して、適切に使用するようにしましょう。

<h1>タグにはキーワードを含める

<h1>タグには必ずターゲットキーワードを含めることが重要です。キーワードを含みながらページの内容を簡潔に表すテキストを設定することをおすすめします。

また、titleタグの内容と併せて<h1>タグでも対策キーワードを使用することで、キーワードの重要度もクローラーへ伝わりやすくなります。ここで気になるのはtitleタグのテキストと<h1>タグの内容が同一でもいいのか?ということです。

基本的に問題はありませんが、titleタグと<h1>タグにはそれぞれ適切な文字数があります。titleタグは検索結果、<h1>タグはページ内で表示されるものですので、その点に留意して設定すると良いでしょう。

また、あなたのサイトが<h1>を全ページにわたって企業ロゴなどの画像に使用しているのであれば、それは検索エンジンに対して対策キーワードをアピールするチャンスを逃しているという事になります。

<h1>は各ページにおいてターゲットキーワードを含ませ、ページを簡潔に説明する適切な内容を設定しましょう。

しかし、いくら検索エンジンに対して重要な対策キーワードが伝わりやすくなるからと言って、<h2>やその他の見出しタグに対しても過剰に使用するのはやめましょう。大切なのは、コンテンツの質と、情報量、そしてコンテンツの文章構造がきちんと整っている事ですので、過剰に見出しタグへキーワードを含めることが無いよう気をつけましょう。

<h1>タグに画像を使用するには

<h1>に画像を使用することは基本的に問題ありません。ですが、なるべくテキストで記述するほうがベターだと思われます。

どうしても<h1>を画像に設定する場合、気を付けるべきポイントは、画像のイメージタグにalt属性をきちんと設定することです。

クローラーは画像に含まれるテキストを読むことはできません。例えばimg画像内に「デジ研」というテキストが書かれていても、alt属性になにも記述していなければクローラーは<h1>の内容を空白だと認識してしまいます。

alt属性には対策キーワードを含めた文章を記述しましょう。

<h1><img src=”画像URL” width=”●●●” height=”●●●” alt=”画像の説明(h1テキスト)”></h1>

キーワードを意識しすぎて、画像の内容に関係のないテキストをalt属性に設定することは避けましょう。キーワードを過剰に使用することはGoogleのウェブマスター向けガイドライン(品質に関するガイドライン)に反する可能性があります。

また、下記のように<h1>のテキストをCSSを使用し、text-indentなどで画面外に飛ばしたり、隠すことはスパム行為になります。

HTML

<h1>h1テキストh1テキストh1テキスト</h1>

CSS

h1 {
text-indent: -9999px;
background: url(“画像URL”) no-repeat center top;
}

<h1>タグの文字数

<h1>タグの文字数には特に制限などは設けられていません。しかし、長くなればなるほど、キーワードの重要度が薄まってしまいます。<h1>に設定するテキストは全角30~60文字程度に収めることをおすすめします。

<h1>タグの配置箇所

<h1>タグの配置箇所は、メインコンテンツにしましょう。そのページの内容の主題はメインコンテンツ部分となるので、ページの主題を表す<h1>タグの配置箇所はその部分にするのが適切です。

先ほども述べたように、ヘッダーに会社のロゴや、キャッチコピーなどを共通して<h1>と指定している場合は、ページのコンテンツと、大見出しである<h1>タグの内容が合致していないことになってしまいますので、その場合は変更した方が良いでしょう。

また、最初から見出しタグの設定をされているブログやCMSなどを使用する場合、ブログのタイトルが<h1>に設定されていたり、投稿日時が<h2>に設定されていたり、意図せず適切ではない記述になってしまうケースも多いため、注意が必要です。

ダメな記述例①

<h1>ブログのタイトル</h1>
<h2>ブログの記事タイトル</h2>
<h3>~<h6>ブログの本文中で使用するタグ

ダメな記述例②

<h1>ブログのタイトル</h1>
<h2>ブログの記事投稿日付</h2>
<h3>ブログの記事タイトル</h1>

正しい記述例

<h1>ブログの記事タイトル</h1>
<h2>ブログの記事内で使用する中見出しタグ</h2>
<h3>~<h6>ブログの記事内で使用する小見出し

いま一度、自身のブログやCMSの見出しタグ設定がどのようになっているのかを確認してみるのも良いかもしれません。ブログ・CMSによっては設定変更が出来ないものもあるかもしれませんが、変更が可能な際には、設定を変更しておくのがおすすめです。

hタグに強調タグを使用すること

hタグはコンテンツの見出しタグなので、コンテンツの本文に使用するタグを併用するのは不適切と言われています。

タグの併用例

<h2>冬は<strong>とても</strong>寒い<h2>

このようにテキストを強調するタグ<strong>や、同様に<em>をhタグのテキスト内に使用するのは避けましょう。
また、<strong>タグや<em>タグは使い過ぎるとGoogleからスパム行為と見なされ、ペナルティを受ける場合がありますので、なるべく使用しないように気を付けましょう。

さいごに

見出しタグを適切に使うという事は、検索エンジンにそのページのコンテンツや文章構造が伝わりやすくなる事、SEO的にはキーワードの重要性をアピールすることが出来ること、また、訪問したユーザーにとっては、文章構造が視覚的に見やすくなり、読みやすくなるという点があるという事をお伝えしました。

これまでのまとめとして、重要な点を以下にまとめます。

  • hタグは数字が小さいほど重要度が高く、<h1>タグは大見出しタグと呼ばれる。
  • hタグは、<h2>から始まるなど、数字を飛ばしての使用や、<h1>→<h3>といった歯抜け状態での記述を避けて、順番を守り適切に使用する。
  • hタグを大きく表示されるからなどの理由で、装飾目的で使わない。また、見出しタグの装飾はCSS内で指定する。
  • hタグの中でも大見出しである<h1>タグは各ページに1つ。<h2>や<h3>に関しても数回にとどめる。
  • hタグには対策キーワードを含める。タイトルと同様の内容でもいいが、文字数に配慮して多少工夫しても構わない。(含めすぎないよう注意!)なるべく共通部分のヘッダーロゴなどでの使用は避ける。
  • hタグに画像を指定する際は、必ずalt属性を設定する。またCSSを使用しての隠しテキストは使用しない。
  • hタグの文字数は30~60文字以内にする。
  • hタグの設置個所はページのメインコンテンツ部分に設置にする。
  • hタグ内に<strong>や<em>タグなどの強調タグは使用しない。

見出しタグは適切に使用することでSEOでも効果があると言われているタグです。以上の事項を気を付けながら、検索エンジンや、訪問ユーザーにとって内容が伝わりやすいコンテンツを目指して、見出しタグの最適化をしましょう!
 

【SEOコンサルタント監修】
2017年 最新版 SEOセルフチェックリスト 無料プレゼント!

年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。
内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。

本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
阿部 円佳

阿部 円佳

ディーエムソリューションズ株式会社 デジタルマーケティング事業部 WEBコンサルティング部 シニアコンサルタントグループ SEOコンサルタント。 キーワードプランニングや内部施策の施策仕様書作成など、シニアコンサルタントグループを支える縁の下の力持ち。