コンテンツ作成するとき、見出しタグ(hタグ)を正しく使うことができていますか?見出しタグの使い方を間違えると、ユーザーにとって見にくい記事になるだけでなく、Googleの評価も下がる可能性があります。

今回は、ユーザーからもGoogleからも評価されるような見出しタグ(hタグ)の使い方を解説します

見出しタグ(hタグ)とは

見出しタグとは”見出し”を表現するタグのことで、ユーザーや検索エンジンに重要なテーマを伝える役割をしています。見出しタグを最適化できれば見違えるほど読みやすい記事になり、記事全体の構成が伝わりやすくなります。

見出しタグは”h1~h6”まで全部で6種類存在し、数字が小さいほど重要度が増します。HTML上では、下記のように表記方法します。

HTML
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

SEOに与える影響

見出しタグ(hタグ)はユーザーに対する記事の読みやすさだけでなく、SEOにも大きく影響します

Googleの公式ページでは、見出しタグについて以下のように記述されています。

見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。
引用元: Search Console ヘルプ

Googleのクローラーは、見出しタグのテキストや配置場所を参考に記事全体の構成を読み解くため、質の高い記事と評価してもらうためにも見出しタグは重要なタグですね。

見出しタグ(hタグ)の使い分け

ナイフとフォークとスプーン
ここからは、それぞれの見出しタグをどのように使い分けるかを解説していきます。この使い分けができるかどうかでサイトの質が決定すると言っても過言ではないので、しっかりと覚えましょう。

h1タグの正しい使い方

冒頭でも述べましたが、見出しタグ(hタグ)の数字が小さいものほど重要度が増します。そのため、h1タグが最も重要というわけです

h1タグには、基本的に「記事のタイトル」が入ります。ユーザーは、最初に記事のタイトルを見て、記事を読むかを決定するため、そこが一番重要であることは分かりますよね。そのため、h1タグは記事に対して1つしか設定してはいけません。

h1タグとtitleタグ

記事のタイトルを表す”titleタグ”と、h1タグは同じテキストを設定しましょう。どちらもその記事で一番重要なテキストを表すタグです。WordPressではデフォルトの状態で、タイトルにh1タグとtitleタグが付くようになっているので、安心してください。

h2~h4の正しい使い方

h2~h4を使いわける際に、最も重要なのが正しい順序で使用することです。Googleの公式ページでも、以下のように記述されています。

複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。
引用元: Search Console ヘルプ

見出しタグを階層構造にすることで、ユーザーにとって見やすい記事になるということですね。このことからも、重要な見出しをh2に、その中で重要な見出しをh3に、さらにその中で重要な見出しをh4というイメージで、正しい順序で見出しタグを設定しましょう。

以下に【HTML】リストタグとは?特徴と正しい使い方を3分で解説!の記事の見出しの例を紹介します。

見出しタグの例
<h2>リストタグとは</h2>
 <h3>リストタグは2種類存在する</h3>
  <h4>順番が関係するリスト(olタグ)</h4>
  <h4>順番が関係しないリスト(ulタグ)</h4>

<h2>リストタグの正しい使い方</h2>
 <h3>olタグの使い方</h3>
 <h3>ulタグの使い方</h3>

<h2>リストタグの応用を紹介</h2>
 <h3>olタグの応用</h3>
  <h4>ローマ字(大文字):type=”A”</h4>
  <h4>ローマ数字:type=”I”</h4>
 <h3>ulタグの応用</h3>
  <h4>白丸:type=”circle”</h4>
  <h4>四角:type=”sqare”</h4>

<h2>まとめ</h2>

h5、h6の正しい使い方

h5とh6に関しても、h2~h4と同様に使用します。しかし、h5やh6を使用する機会はほとんどありませんし、使用しているサイトに出会ったこともありませんね・・・。もちろん、使用してはいけないなんてことはありませんし、記事の構成上必要であればどんどん使っていくべきなので、ユーザーにとって読みやすいかを意識しながら使いましょう。

見出しタグ(hタグ)を使う際の注意点

STOPの標識
見出しタグの使い方を理解していただいたところで、ついやりがちな見出しタグの間違った使い方を紹介します。ユーザーの離脱につながるだけでなくSEOにも影響するレベルなので、これから紹介することは絶対に行わないでください。

デザインとして使わない

見出しタグで指定したテキストは文字サイズが大きくなったり、カラフルなアンダーラインが入りますが、デザイン的に都合がいいからという理由で見出しタグを使用することはNGです。サイトの構成や文章全体の読みやすさで使用しましょう。

順番を厳守する

先ほど見出しタグの使い方を解説しましたが、順番は厳守しましょう。いきなりh3タグを使ったり、h2タグの直下にh4タグを配置したりすると、Googleのクローラーが記事の構成を正しく判断できなくなるため厳禁です。

キーワードを詰め込まない

見出しタグのテキストは、簡潔に内容が伝わるものがベストです。SEO対策に固執しすぎて、狙いのキーワードを詰め込みすぎているサイトをよく見かけますが、逆効果になるので注意しましょう。無理にキーワード詰め込まなくても、記事の構成が伝わる見出しになっていれば自然と評価はあがります。読みやすさを大切にしましょう。

まとめ

見出しタグを正しく使うことで、記事全体が格段に読みやすくなります。反対に間違った使い方をすると離脱や低評価につながるので、この記事で紹介した内容を復習してユーザーが読みやすい記事を作成しましょう。