hタグのSEO効果は？見出しタグの使い方と意味を解説

Webサイトを運営している方なら当たり前に使用しているhタグ（見出しタグ）ですが、間違った使い方をしていませんか？SEOに効果的なhタグですが、間違った使い方をしていると期待通りの効果が得られません。本記事では、hタグについて基本的なところから解説します。

監修者

石田 哲也

Twitter：@te2319
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社を起業。その後、株式会社オプトでWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社でゲームプロデューサーとしてスマホゲームアプリの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスに入社。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善～ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。

■経歴
2003年　ISD株式会社/起業
2009年　株式会社オプト/SEMコンサルタント
2011年　株式会社メタップス/シニアディレクター
2013年　ライブエイド株式会社/執行役
2016年　ワンダープラネット株式会社/プロデューサー・BizDev
2018年　株式会社ニュートラルワークス/取締役CMO

■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告

■保有資格
Google アナリティクス認定資格（GAIQ）
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格

執筆者

株式会社ニュートラルワークス

QUERYY(クエリー)編集部

QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

hタグ（見出しタグ）とは

Webサイトに使われる「hタグ」は見出しを設定するタグです。hとは「Heading（表題、見出し）」の略で、hタグは見出しの大きさ順にh1～h6までの6段階がありますが、h5やh6のタグが使われることはあまりありません。

hタグは文章の章ごとのタイトルやトピックを通常のテキストより大きく表示し、ユーザーにとって文章を読みやすく整理するとともに、検索エンジンのクローラーにとっても文章の構造を分かりやすく伝える効果があります。

hタグを使用する理由とメリット

hタグを使う理由は、ユーザーと検索エンジンの両方の利便性を向上させるためです。利便性を向上させることで、SEO効果が期待できるというメリットがあります。具体的にどのようなメリットがあるかみていきましょう。

1. hタグを使わないとユーザーがコンテンツを見づらい

hタグで文章をトピックごとに区切ることで、文章が読みやすくなりユーザーの利便性が向上します。例として、同じ文章をhタグなし・hタグありの状態で比較してみましょう。

hタグ無しの表示例

hタグを適切に使用する方法、ポイント

hタグは適切に使用しないとSEO評価が下がる可能性もあります。hタグを使う際のポイントを見ていきましょう。

見た目を良くするためだけにhタグを使わない

hタグを文字装飾やレイアウト調整のために使うことは避けましょう。hタグを設定すると文字が大きくなったり、文頭にアイコンがついたり、背景色がついたりと見た目上の変化が起こります。

しかしこれはデザイン要素ではなく、hタグはHTMLの中で「文章の階層構造」を設定する役割を持ったタグです。本来「見出し」ではない部分にhタグを使うと、検索エンジンのクローラーが文章の構造を理解できず、SEO評価が下がってしまう可能性も。

文字装飾やレイアウト調整には、「strong」「font size=”○○px”」といった専用のタグを使いましょう。

h1は基本1回だけ使用、titleタグと同じテキストを設定する

「h1」タグは「最も重要な見出し」を設定するタグで、基本的には1ページに1度だけ使用します。実はHTML5では、1つのページに複数の「h1」タグを設定することが可能で、GoogleのJohn Mueller（ジョン・ミューラー）氏のTwitterでも「h1タグは何度でも使っても良い」とコメントされています。

しかし検索エンジンの仕組み上、複数の「h1」タグを設定することでサイトの「最も重要な見出し」がブレてしまい、SEO対策上デメリットになることがあるため、「h1」タグは、ページ（記事）タイトルと同じテキストを設定しておくのが無難でしょう。

hタグありの表示例

hタグを適切に使用する方法、ポイント

hタグは適切に使用しないとSEO評価が下がる可能性もあります。hタグを使う際のポイントを見ていきましょう。

見た目を良くするためだけにhタグを使わない

hタグを文字装飾やレイアウト調整のために使うことは避けましょう。hタグを設定すると文字が大きくなったり、文頭にアイコンがついたり、背景色がついたりと見た目上の変化が起こります。しかしこれはデザイン要素ではなく、hタグはHTMLの中で「文章の階層構造」を設定する役割を持ったタグです。

本来「見出し」ではない部分にhタグを使うと、検索エンジンのクローラーが文章の構造を理解できず、SEO評価が下がってしまう可能性も。文字装飾やレイアウト調整には、「strong」「font size=”○○px”」といった専用のタグを使いましょう。

h1は基本1回だけ使用、titleタグと同じテキストを設定する

「h1」タグは「最も重要な見出し」を設定するタグで、基本的には1ページに1度だけ使用します。実はHTML5では、1つのページに複数の「h1」タグを設定することが可能で、GoogleのJohn Mueller（ジョン・ミューラー）氏のTwitterでも「h1タグは何度でも使っても良い」とコメントされています。

しかし検索エンジンの仕組み上、複数の「h1」タグを設定することでサイトの「最も重要な見出し」がブレてしまい、SEO対策上デメリットになることがあるため、「h1」タグは、ページ（記事）タイトルと同じテキストを設定しておくのが無難でしょう。

もしhタグがないままだと、ユーザーはどこに区切りがあるのか分からない長文を読むことになり、ストレスを感じて離脱する可能性が高まります。同じ文章量でも、見出しを設定して文章をトピックごとに区切ると、格段に読みやすさが向上し、ユーザーもストレスを感じにくくなるでしょう。

2. hタグを適切に使うとクローラーがコンテンツを理解しやすい

hタグを適切に使うことで、検索エンジンのクローラーがコンテンツの内容を把握しやすくなる効果もあります。結果としてサイトが素早く検索エンジンにインデックスされ、検索結果に登場しやすくなるのです。タイトルタグやディスクリプションタグと同様に、hタグを適切に使うことはSEO対策のうえでも有効な方法です。

ただし、見出しと本文の内容が対応していなかったり、検索キーワードを不自然に詰め込んだ見出しであったりすると、検索エンジンからの評価は下がることもあります。

クローラーとは？検索エンジンにインデックスされる仕組みや巡回頻度を上げる方法解説 Webサイトを制作、公開しても検索結果に表示されないと検索エンジン経由の集客はできません。検索エンジンがWebサイトの情報を取得するために使用しているのがクローラーです。クローラーがサイトの情報をどのように取得しているのか、基本的なところから解説します。

3. ユーザーが見出しを見ただけで内容を把握できる

WordPressのプラグインや、一部のブログサービスでは、hタグをつけた見出しをそのまま「目次」としてページの導入部分に提示することが可能です。これはGoogleサーチコンソールの「検索エンジン最適化（SEO）スターターガイド」にある目次です。

このページは非常に文章量の多いページですが、見出しタグでトピックが区切られており、さらに見出しのテキストをまとめて「目次」としてページの導入部分に提示しています。この目次によってユーザーはコンテンツの内容を大まかに把握でき、自分の求めている情報がありそうかどうかを判断する手助けにもなります。

Googleサーチコンソールとは？使い方と登録方法や設定を解説 Webサイトの集客状況を分析する際にGoogleアナリティクスと同じくらい役立つのがGoogleサーチコンソールです。サーチコンソールへの登録方法やGoogleアナリティクスとの連携方法について、わかりやすく解説します。

hタグはSEO評価に影響する？

SEO評価において、hタグを使用することがどれだけSEO順位に影響しているかは明確になっていません。そのため、正しくhタグを使用したことで劇的にSEO順位が上がるという可能性は低いです。しかし、hタグがSEO評価に間接的に影響してくることは間違いありません。その理由を説明していきます。

ユーザーファーストなページが評価される

SEO順位を決めるアルゴリズムを作るGoogleは、ユーザーファーストを重視しています。ユーザーファーストのページが上位になるアルゴリズムになっているのは間違いありません。

hタグを設置することでユーザーが理解しやすいコンテンツになります。「文章構造が分かりやすい」「要点が伝わりやすい」「欲しい情報にアクセスしやすくなる」など、ユーザーにとってのメリットが大きいです。つまり、hタグを設置したページはユーザーファーストのコンテンツとなり、SEOでプラス評価になりやすくなるといえます。

クローラーが理解しやすくなる

SEOでは、クローラーにページ内容を理解してもらうことが重要です。ページ内でどのようなトピックを扱っているか示しているhタグは、検索エンジンがページ内容を理解するのを助けています。

例えば、画像検索での表示結果などにも役立っています。画像はテキストではないため、クローラーはどのような内容かを判断することができません。画像がどのような内容なのかをhタグの見出しなどから判断し、画像検索の結果に表示するか決めています。

このように、hタグを設置することでクローラーがコンテンツ内容を理解するのを助けることで、SEOの評価を受けることができるようになります。

hタグを適切に使用する方法

hタグは適切に使用しないとSEO評価が下がる可能性もあります。hタグを使う際のポイントを見ていきましょう。

1. 見た目を良くするためだけにhタグを使わない

hタグを文字装飾やレイアウト調整のために使うことは避けましょう。hタグを設定すると文字が大きくなったり、文頭にアイコンがついたり、背景色がついたりと見た目上の変化が起こります。しかしこれはデザイン要素ではなく、hタグはHTMLの中で「文章の階層構造」を設定する役割を持ったタグです。

本来「見出し」ではない部分にhタグを使うと、検索エンジンのクローラーが文章の構造を理解できず、SEO評価が下がってしまう可能性も。文字装飾やレイアウト調整には、「strong」「font size=”○○px”」といった専用のタグを使いましょう。

2. h1は基本1回だけ使用、titleタグと同じテキストを設定する

「h1」タグは「最も重要な見出し」を設定するタグで、基本的には1ページに1度だけ使用します。実はHTML5では、1つのページに複数の「h1」タグを設定することが可能で、GoogleのJohn Mueller（ジョン・ミューラー）氏のTwitterでも「h1タグは何度でも使っても良い」とコメントしています。

しかし検索エンジンの仕組み上、複数の「h1」タグを設定することでサイトの「最も重要な見出し」がブレてしまい、SEO対策上デメリットになることがあるため、「h1」タグは、ページ（記事）タイトルと同じテキストを設定しておくのが無難でしょう。

h1タグとは？SEOに有効な設定方法や使用時の注意点を解説
SEO対策に効果的なタグの使い方！title、description、hタグを解説

3. hタグを使用するルール、順番を守る

hタグは重要度順に「h1」から「h6」までの段階があります。日本のコンテンツライティングではhタグを「大見出し」「中見出し」「小見出し」と言う場合もあり、「h1（大見出し）」の下位は「h2（中見出し）」、その下位は「h3（小見出し）」という風にhタグによってコンテンツの階層構造を設定します。

ユーザーの利便性とSEO対策の両方の観点から、この階層構造を守ることは重要です。例えば「h1（大見出し）」の下位にいきなり「h3（小見出し）」を設定してしまうと、「h2（中見出し）」がないことでコンテンツの順番が分かりにくくなり、読者もクローラーも混乱してしまうでしょう。

4. hタグの下には必ずテキストを入れる

hタグのhは「Heading（表題、見出し）」の略であり、本文ではありません。そのため、見出しタグのみで本文がないセクションが存在するとクローラーは「見出しだけで本文を書いていない記事」とみなします。ときどき「h3」や「h4」を箇条書きレイアウトのかわりに使用している記事がありますが、SEO評価が下がっている可能性は否定できません。

5. キーワードを無理に使いすぎない

SEO対策上「見出しにキーワードを入れる」手法は確かに重要です。さらに「見出しの左側に検索キーワードを配置すると良い」という説も有名ですね。しかし、あまりにも多くのWebサイトでこのSEO対策が取られ、文章として成り立たない不自然な見出しが増加したことにより、Googleも見出しの文脈や不自然さをチェックするようになったと言われています。

見出しに不自然にキーワードを詰め込みすぎることのないよう、ユーザーから見て分かりやすい見出しを心がけましょう。

6. hタグのデザインをcssやhtmlで変える

hタグを設定すると「本文より文字が大きく目立つようになる」効果があります。これに加えて、WordPressやブログサービスなどではcssやhtmlでhタグを装飾してより見やすくなるよう工夫しています。hタグの色やフォントサイズ、下線や背景色などを追加するcss・htmlは、いろいろなサイトで紹介されており、好みのデザインのcssやhtmlをコピペすれば簡単に変更できます。

hタグ（見出しタグ）のデザイン例

ここまでhタグの使用方法について解説しましたが、「QUERYY」のhタグのデザインをデザイン例としてご紹介させて頂きます。

↓h2タグ

↓h3タグ

↓h4タグ

hタグのデザインは、hタグの使い方を理解した上でデザインすることで記事が読みやすくなります。記事が読みやすくなることで、記事の滞在時間の増加など良い効果が得られますので、使い方を理解した上で最適なデザインにしましょう。

hタグのまとめ

この記事ではhタグのメリットや使い方について説明しました。hタグはユーザーにとっても検索エンジンのクローラーにとっても「コンテンツを読みやすい・理解しやすい」ことが一番大切です。hタグを適切に使うことで、長文でも読みやすいコンテンツを作ることは可能ですし、重要なキーワードを目立たせることでSEO対策上も有利になります。