SEO

2020.10.29

hタグはなぜSEOに重要なの?hタグのメリットと正しい使用方法を解説!

hタグはなぜSEOに重要なの?hタグのメリットと正しい使用方法を解説!

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

hタグとは?

hタグとは?

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

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

hタグを使用する理由、メリットは?

hタグを使用する理由、メリットは?

hタグを使う1番のメリットは、ユーザーと検索エンジンの両方の利便性を向上し、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対策のうえでも有効な方法です。

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

関連記事:クローラーって?検索エンジンにインデックスされる仕組みを解説

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

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

WordPressのプラグインや、一部のブログサービスでは、hタグをつけた見出しをそのまま「目次」としてページの導入部分に提示することが可能です。

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

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

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」タグは、ページ(記事)タイトルと同じテキストを設定しておくのが無難でしょう。

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タグを適切に使うことで、長文でも読みやすいコンテンツを作ることは可能ですし、重要なキーワードを目立たせることでSEO対策上も有利になります。

関連リンク:売れるECサイト制作ならIT導入補助金にも対応可能なニュートラルワークスへ
関連リンク:見込み客を獲得できるBtoBのサイト制作ならニュートラルワークス!
関連リンク:コーポレートサイト制作をコンセプト作りからお手伝いできます
関連リンク:選ばれる採用サイトの制作ならニュートラルワークスへ
関連リンク:効果の出る、効率的なリスティング広告運用をニュートラルワークスがお手伝いします

著者紹介

三木 五月

三木 五月

代表取締役社長

神奈川県の湘南でWeb制作会社を経営しています。湘南をシリコンバレーみたいにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」