記述ルールとか、注意するポイントと合わせて、上手な見出しの使い方を教えてほしい。
こんな疑問に答えます。
本記事では<h>タグについて、基礎から網羅的に解説しつつ、上手な見出しの使い方や注意すべきポイントをまとめています。
<h>タグはHTML言語のひとつですが、しっかりマスターして、きちんとしたページ設計ができれば、人間にも検索エンジンにも評価されるウェブサイトに一歩近づきます。
プログラミングを勉強している人以外でも、ブロガーや会社のウェブ担当として知っていて損はない知識をまとめたので、ぜひご参照あれ。
スポンサードサーチ
本記事のもくじ
【hタグとは】見出しを作るためのタグ
<h>タグは「見出しタグ」とも呼ばれます。
そう、その名の通り、見出しを作るために使用するのが<h>タグということですね。
【見出しは目次】情報整理を心がけよう
いったん、HTMLとかプログラミングとかは置いといて、見出しについて考えてみましょう。
世の中で見出しが使われているところってどんなところがありますかね？
一番分かりやすいのは本だと思います。
では、本の見出しは、どんな目的で付けられているのでしょう？
見出しの目的
① 情報を整理し、
② 章立てし、
③ 読者が迷わない設計にする
こんなところじゃないでしょうか。
HTMLでも見出しの存在意義は変わりません。変わるのは読者だけ。
本の読者は人間だけですが、ウェブサイトの読者は人間+検索エンジンです。
「なんで、検索エンジンが読者なの？」という疑問については、ここで解説すると長くなるので「検索エンジンの仕組みを知ってサイトを最適化しよう【SEOの基礎知識】」をご覧ください。
つまり、<h>タグとは、ページ内の情報を整理をしつつ、人間にも検索エンジンにも分かりやすいページ設計にするために使うためのHTMLタグと言えます。
【h1〜h6】見出しタグは6種類あります
前置きが長くなりましたが、ここから<h>タグをHTMLの視点で解説していきます。
<h>タグには、<h1>〜<h6>まで、6つの種類がありまして、それぞれ異なる大きさの見出しを作ることが可能です。
<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>
始まりと終わりをタグで囲むだけでして、基本的なHTMLの書き方通りなので、覚えるのは難しくありませんね。
ブラウザでの表示（h1〜h6まで）
上記、<h>タグで囲っただけのHTMLをブラウザで表示するとこんな感じになります。
CSSでデザインを一切指定していなくても、文字の大きさが<h1>〜<h6>で異なって表示されるのが見出しです。
スポンサードサーチ
【hタグの使い方】正しい見出しの作り方と注意点
続いて、<h>タグの正しい使い方と注意点を解説します。
繰り返しになりますが、見出しは情報整理のためにあるので、読者にも検索エンジンにもしっかりした情報を伝えるために、<h>タグは正しく使いましょう。
特に検索エンジンは、ページの見た目だけではなく、HTMLの構造もチェックしています。
誤った見出しの使い方をすると、せっかくの情報が正しく読み取ってもらえない恐れもあるので、正しい<h>タグの使い方は割と重要です。
1. hタグが使える回数を覚えよう
<h>タグには、それぞれ理想の使用回数があります。
<h1>：1ページに1回だけが理想<h2>〜<h6>：何度でも使える
原則として、これだけは覚えておいてください。
h1タグは1ページに1回が理想
<h1>タグは、1ページにつき1回の使用が理想です。そのページの内容を表すのに最適な内容を記載しつつ、2回以上は使わないように心がけましょう。
ただし、厳密に言えば、論理的に正しく繰り返して<h1>を使うなら、SEOに大きな影響はないとも言われています。実際にGoogleのウェブマスタートレンドアナリスト、John Mullerさんが解説している動画があるので下記に貼っておきます。
参考：Multiple H1 Headings: How to Handle Them for SEO & Accessibility?
Ask GoogleWebmastersの別のエピソードへようこそ。今日の質問はマーカス・シャッペリからです。
“見出しとアクセシビリティの取り扱い方について明確な答えはありますか？
複数の<h1>が使われているウェブサイトをたくさん目にするし、みんなの意見がバラバラでよく分かりません。”
よくある質問ですね。答えは簡単です。
1ページに複数の<h1>見出しがあったとしても、Googleのシステム上は問題はありません。
Googleは、<h>タグを読み取ってページの内容を理解しているので、明確で意味のある見出しがあると、そのページを理解するのに役立つのは確かですが、世の中に存在するウェプページの多くは、見出しが最適に構造化されていません（笑）
ネットユーザーにとって、見出しが最適に使われているかどうかはそれほど重要ではなく、彼らの疑問に対してに関連している情報がどうかの方が重要な意味を持ちます。
それと同様に、Googleのシステムも<h>タグに関しては、それほどうるさくはありません。
1つのh1見出し、複数のh1見出し、またはセマンティックHTMLをまったく含まないテキストなど、状況に合わせた判断と作業を行っています。
要するに、<h>タグの使い方はSEO観点から見ても、主目的であるべきではありません。それよりも、ユーザーのことを思いましょう。
複数のh1見出しやその他の標準的なHTML構造を使用してコンテンツを描かなくてはいけない場合でも、それがSEOの邪魔になることはありませんよ。
上記の通りですが、とはいえ、<h1>の見出しを使いすぎると、Mullerさんの言う“明確で意味のある見出し”ではなくなります。
<h1>は、そのページ全体の内容を示すものなので、乱用は避けたほうが無難です。
h2〜h6は何度使ってもOK
<h2>以下の見出しタグは、1ページに何度使用しても問題ありません。
よって、基本的なページ構造は<h2>〜<h6>で作られることになると思います。
ただし、h2〜h4に止めるのが理想
<h2>〜<h6>は、何度でも使えますが、個人的には<h2>〜<h4>で完結させるのが理想だと考えています。
というのも、小見出しが増えすぎても、読みづらい文章になってしまうので…。
普通にウェブサイトやブログを作っているだけなら、<h2>〜<h4>の3階層でも、キレイかつ論理的に章分けされた内容になるはずです。
当ブログも、ほぼ全ての記事が<h2>〜<h4>で構成されていまして、ごく稀に<h5>を使っている程度です。<h6>は「ナニソレオイシイノ？」くらい使っていません。
2. 見出しレベルは飛ばさない
原則として、<h1>〜<h6>は順番に使います。
<h2>のあとすぐに<h6>が来たり、その後に<h3>が続いたりするのはNGです。
<h1>WordPressとは</h1>
<p>〜...</p>
<h2>WordPressでできること</h2>
<p>〜...</p>
<h3>ブログ</h3>
<p>〜...</p>
<h4>ブログにおすすめのテーマ</h4>
<p>〜...</p>
<h3>企業サイト</h3>
<p>〜...</p>
<h4>企業サイトにおすすめのテーマ</h4>
<p>〜...</p>
<h3>ECサイト</h3>
<p>〜...</p>
<h4>ECサイトにおすすめのテーマ</h4>
<p>〜...</p>
<h2>WordPressの始め方</h2>
<p>〜...</p>
<h3>必要なもの</h3>
<p>〜...</p>
<h4>サーバー</h4>
<p>〜...</p>
<h4>ドメイン</h4>
<p>〜...</p>
こんな感じで順番に使いましょう。
ただし、こちらもSEO的に絶対マイナスになるかと言われれば、そうでもありません。
またまたミューラーさんの登場ですが、この動画の17’40”あたりで見出しについてこのような質疑応答があります。
チャット参加者
また、h1タグやh2タグを使用せず、h3タグばかりだったらSEOに悪影響ですか？
Googleがページの内容を理解するために見出しタグを使っていることは確かですが、それらはわずかな要素に過ぎず、見出しが厳密に順番通りである必要はありません。
ミューラーさん
ただ、こちらも、あまり無視して<h>タグをごちゃ混ぜにすると良くないのは確かなので、基本はきれいな入れ子状態をキープしつつ、どうしても対応できないときに限り、見出しの順番を変えるくらいに考えておいた方がいいかもしれません。
3. 見出しだけで章を作らない
見出しの下には、基本的に文章を入れます。
どんなに短くても良いので、見出しだけで章を完結するようなことは避けましょう。
大切なので何度も言いますが、見出しは目次です。目次はあるのにコンテンツがない本はありません。
4. 見出しは完結に（+α：キーワードを入れる）
見出しには、その章の内容がひと目でわかるようなキーワードを入れつつ、完結にまとめましょう。
とはいえ、キーワードの詰め込み過ぎは禁物。
不自然にキーワードを詰め込みすぎると、ページのユーザビリティが低下し、Googleからもペナルティ対象になりかねません。
もちろん、見出しとその章の内容の整合性を取ることも大切です。
<h1>美味しいカレーの作り方</h1>
<p>美味しいカレーの作り方を紹介します。</p>
<h2>美味しいカレーに必要な材料</h2>
<p>美味しいカレーに必要な材料はこちらです。</p>
<h3>美味しいカレーを作るための材料：その①ルー</h3>
<p>美味しいカレーに必要不可欠なカレールウ</p>
<h3>美味しいカレーを作るための材料：その②野菜</h3>
<p>美味しいカレーに良く合うジャガイモ、にんじん、玉ねぎ</p>
<h3>美味しいカレーを作るための材料：その③お肉</h3>
<p>美味しいカレーをさらに美味しくする豚肉</p>
<h2>美味しいカレーの作り方</h2>
<p>美味しいカレーの作り方はこちらです。</p>
<h3>美味しいカレーの作り方手順：その①玉ねぎを炒める</h3>
<p>美味しいカレーに合う玉ねぎが飴色になるまで炒めましょう。</p>
...
..
.
上記は、不自然すぎるほどに [美味しいカレー] というキーワードを詰め込んだダメな例です。
確かに、[美味しいカレー]で検索1位を獲得できれば、めちゃくちゃアクセスが稼げるとは思いますが、見出しにキーワードを詰め込みまくればSEOに効果的だったのは過去の話。
現代のSEOでは、全くもって意味なしなので、あくまでも自然かつ有効的にキーワードを盛り込んで見出しを作ることが大切です。
5. デザイン目的で見出しを使わない
よくありがちなのが、見出しのデザインが可愛いからという理由で、装飾として見出しを使ってしまっているケースです。
「この部分だけ大きくしたいから」「ここに、h4っぽい背景をつけたいから」などのデザイン的理由で<h>タグを使うのはやめた方がいいです。
文字を装飾したければ、新たにCSSで指定すること
文字を装飾したければ、新たにCSSで指定しましょう。
<div>や<span>で囲って、指定したCSSを反映させるだけです。
<p><span class="under-blue">ここ</span>に青い下線をひきます。</p>.under-blue {
border-bottom: solid 2px #87CEFA;
}
こんな感じで、必要に応じてCSSに追記していきます。
6. 見出しに画像を使いたいときは
個人的にあまりおすすめはしませんが、画像を見出しに使うことも可能です。
見出しに画像を入れたい場合は、必ず<img>タグのalt属性を記入してください。そうしないと、検索エンジンが画像の示す内容を読み取れないので。
<h1><img src="猫の画像.png" alt="可愛い猫" /></h1>
alt属性に関しては「【altタグをSEO最適化する方法】書き方を覚えればaltから被リンクが発生します」で詳しく解説しています。合わせてどうぞ。
見出し＋画像のおすすめ表示方法
個人的におすすめの方法は“<h>タグで見出しを作り画像を並列させる”です。
これなら<h>タグ内には文章を入れつつ、ロゴなどの画像を並列させることで、一つのまとまりを作ることができます。
こちらはピタットハウスのホームページですが、ロゴ画像を見せつつ、何のサイトであるかを<h>タグ内に明記できていますね。
【補足】SEOと見出しの関係性
最後に<h>タグとSEOの関係性についてですが、ミューラーさんの言葉を引用して解説した通り、正しく使えていない見出しでも、SEOで大きくマイナス評価につながる可能性は低いです。
とはいえ、<h>タグを正しく使えている見出しがあると、読者（人間＋検索エンジン）にとってスムーズで読みやすいページになることは間違い無いので、どうせやるなら適当にせず基本はきっちり覚えておくほうがよさそうです。
スポンサードサーチ
まとめ：hタグは目次、読みやすい構造を意識しよう
ということで、本記事のまとめです。
<h>タグは目次であり、ページ内容を端的に表すものです。
hタグとは…
- 見出しを作るためのHTMLタグである
- 見出しは
<h1>〜<h6>まで <h1>タグ：理想の使用頻度は、1ページ1回まで- 見出しは大きい方から順番に使う
- デザイン目的での見出し利用はNG
- 画像＋
<h>タグを上手に活用する
こんな感じですね。
記事の中身をわかりやすく、読みやすいものにすることを心がけつつ、上手な<h>タグ活用術を身につけましょう。
おわり。
