- 公開日： 最終更新日：
hタグとは？メリットや種類と役割、設定法、FAQを紹介
hタグを適切に利用すれば、SEO効果やホームページのコンバージョン率を高めることが可能です。
昨今では、サイト内にブログを作成して、ブログに自分で記事を書くことが一般的になったので、Webマスターはhタグとは何かや利用法を理解していくことが大切です。
当ページでは、hタグとは何かや、メリット、種類と役割、設定法、FAQを紹介します。
目次
hタグとは
hタグとは、headingタグ（日本語では見出しタグ）の略になり、ホームページの見出しに利用するHTMLタグのことを言います。
hタグには、h1からh6までがあり、数字が小さくなるほど階層が高く、h1タグが最上位の階層に位置して、そこから数字が上がり、h1タグの下にh2タグ、h2タグの下にh3タグを利用します。
hタグの記述ルールを間違えると、人間であればデザイン性を整えていれば、読みづらさは感じませんが、GoogleはデザインよりもHTMLタグでページの内容を把握しているので、内容がよく分からないページとなるので注意しなくてはなりません。
hタグのメリット
hタグを利用する2つのメリットを解説します。
適切なhタグはSEO効果が高まる
Googleは、hタグで利用されている文章は、そのページで重要な文言であると認識し、通常のテキストよりもhタグで利用されているキーワードを高く評価し、SEO効果を高めています。
hタグのSEO効果を紹介しているホームページの中には、Googleがhタグ内のキーワードを重視しているので、キーワードを利用した方が良いと説明しているページを見かけることがあります。
ただ、Googleが重視しているのは、hタグを利用した結果、ページの構造が把握しやすくなるという点になっており、適切なhタグでなければ、キーワードを含めても、SEO効果を得ることができないと理解しましょう。
Google検索セントラルにもhタグの利用法が記載されているので、hタグとSEOについて詳しく知りたい方は、Googleサイトもご覧ください。
ページが読みやすくなる
hタグは通常のテキストよりも強調されることが一般的です。
つまり、hタグを適切に利用したページは、ユーザーにとってコンテンツが読みやすいページへと成長させることができ、Webユーザビリティを高めることが可能です。
ただし、見出しの上下の文章との整合性がないhタグの利用や、SEOのためだけに無理にキーワードを利用したhタグはユーザーの読みづらさを損なってしまいます。
そのため、SEOキーワードを利用することは大切ですが、ユーザーの読みやすさを意識したhタグの設定が大切になります。
スタッフブログであれば目次を付けることができる
最近多くのサイト内にあるスタッフブログコンテンツには目次が付いています。
目次は、一般的にh2やh3タグ内にあるテキストが利用されていて、WordPressを実装したホームページであれば、Table of Contents Plusというプラグインを実装するだけで目次を追加することができます。
もちろん、当サイトのようにプラグインを実装しなくても対応することが可能です。
このように、hタグを利用しているスタッフブログであれば、目次を追加することがスムーズに行えるので、よりユーザーが読みやすいページへと成長させることができます。
hタグの種類と役割
hタグの種類と役割を解説します。
hタグの種類
hタグの種類は、h1とh2、h3、h4、h5、h6があります。
これ以外はhタグに含まれず、例えば、h0やh7タグを記述したとしても、SEO効果はありません。
さらに、見出しが多いページというのは、ユーザーにとって読みづらさを与えるだけなので、Webユーザビリティとしても、良い状態ではないと理解しましょう。
hタグの役割
hタグの役割を解説します。
h1タグ
h1タグは、ページで最重要な見出しに利用することが一般的で、すなわちページのタイトルをh1として設定し、例えば、当ページなら、「hタグとは？メリットや種類と役割、設定法、FAQを紹介」の箇所になります。
そうすることで、Googleは、そのページに何が書かれているのか、どんな内容が書かれているのかを想定しやすくなるので、SEO効果を発揮できる可能性があります。
h2タグ
h2タグは、そのページの見出しを設定しましょう。
例えば、当ページなら、hタグとは、hタグのメリットなどになり、大見出しがh2タグになっています。
h2タグの役割は、ページのタイトルと、h2タグだけを見れば、そのページにどんな内容が書かれているかの予測ができるようにすることで、訪問者にとって読みやすいページになったり、Googleもそのページの内容をより深く理解することができるので、高いSEO効果を実現しやすくなります。
h3からh6タグ
h3タグからh6タグは、h2の下の見出しのことを言います。
先述した通り、h2の下にh3が、h3の下にh4を設置することで、ユーザーがページを読みやすくなるので、ホームページのコンバージョン率を高めたり、Googleがより深くページの内容を理解することができるのでSEO効果が高まる可能性があります。
hタグの設定法
これからhタグを設定する方に向けて、設定法を解説します。
h1タグとタイトルタグの違いを理解する
h1タグとタイトルタグは、どちらもページ全体の内容を示すタグです。
さらに、h1タグとページのタイトルは同じ箇所に設定しているので、h1タグとタイトルタグは完全に一致はしませんが、似た文言となってしまいます。
では、h1タグとタイトルタグの違いは何になるかですが、ターゲットがまったく異なってきます。
| h1タグ | ユーザーにページの内容を伝えるために重要なタグ |
| タイトルタグ | ページ内には表示されず、検索結果やSNSでリンクが張られた際に表示される |
例えば、当ページなら、h1タグは、「hタグとは？メリットや種類と役割、設定法、FAQを紹介」になります。
ただ、タイトルタグは、「hタグとは？メリットや種類と役割、設定法、FAQを紹介｜大阪のホームページ制作会社セブンデザイン」となり、Google検索でセブンデザインが運営するスタッフブログのページであることを加えています。
このように、h1タグとタイトルタグは似ていますが、ターゲットが異なってくると理解しましょう。
hタグの記述法
hタグの記述法は、以下になります。
<h1>テキスト</h1>
<h2>テキスト</h2>
<h3>テキスト</h3>
<h4>テキスト</h4>
<h5>テキスト</h5>
<h6>テキスト</h6>
記述の順番
hタグは数字が小さいほど大見出しになるので、h1から順番に利用するのですが、実際の記述例としては以下になります。
<h1>見出し1</h1>
<p>テキスト</p>
<h2>見出し2</h2>
<p>テキスト</p>
<h3>見出し3</h3>
<p>テキスト</p>
<h3>見出し3</h3>
<p>テキスト</p>
<h4>見出し4</h4>
<p>テキスト</p>
<h4>見出し4</h4>
<p>テキスト</p>
<h2>見出し2</h2>
<p>テキスト</p>
記述の順番を守ることで、Googleにより深くページの内容を理解してもらうことができます。
内容を簡潔に伝える
hタグに記載するテキストは内容を簡潔に伝えましょう。
訪問者は、hタグを見ることで、hタグの下にある文章の内容をスムーズに理解することができるのですが、長いhタグを利用してしまうと、hタグ自体を読むのに時間がかかってしまうので、本末転倒になってしまいます。
そのため、hタグには、hタグの下部にある内容を、簡潔に要約した文章と理解しましょう。
SEOキーワードを含める
hタグは、SEOで重要になるので、SEOキーワードを含めるようにしましょう。
例えば、当ページで言えば、「hタグ」というキーワードがSEOで重要になるので、h2タグのすべてに「hタグ」というキーワードを含めています。
ただ、これが正解であるとは言えず、文章を読む方が自然に感じることができ、「hタグ」と関連したキーワードであっても問題ありません。
hタグ内に適切にSEOキーワードを含めることで、ページが上位表示を狙っているキーワードで上位表示が実現できる可能性が高まったり、関連したさまざまなSEOキーワードで上位表示を実現できます。
CSSを使って見栄えを整える
hタグはCSSを使って見栄えを整えましょう。
hタグはSEOのためだけではなく、ユーザビリティを高めることで、訪問者がそのページの内容をよりスムーズに深く理解することが可能になります。
そのため、CSSを使って適切なhタグのデザインを作成することで、ホームページのコンバージョン率を高められる可能性があります。
h3までしか使わないホームページが多い
hタグを設定する際に、Webマスターが知っておきたいポイントは、昨今のホームページではh3までしか利用しないケースが多いです。
また、当サイトでは、h4まで利用していますが、制作実績のホームページでは、h3までしか設定していないケースが大半です。
その理由は、SEOになっており、h4やh5、h6までを利用してしまうと、ページのタイトルに対して関係がないコンテンツを加えてしまい、GoogleからのSEO評価を落とされてしまう可能性があるからです。
ただ、ルール上はh6まで利用することができるので、Webマスターがどのような文章を作成するかを検討したうえで判断しましょう。
hタグに関するFAQ
hタグに関するFAQを紹介します。
1ページにh1タグは何個あっても良い？
html5以降、1ページに対して、複数のh1を設定しても問題がなくなり、Googleのジョン・ミューラー氏がページに複数のh1タグがあってもSEOで問題にはならないと発言をしています。
そのため、理論上はh1タグが複数あるページを作成しても問題はないのですが、先述している通り、h1タグはGoogleが重視しているタグになります。
例えば、ヘッダーにh1タグを実装して、ページのタイトルをh1タグにしてしまうと、ページによっては、Googleがページの内容を理解しづらくなることがあります。
そのため、原則としては、1ページに1つのh1タグを作成した方が良いですが、すでに1ページに複数のh1タグがあるホームページであれば無理に改善する必要はありません。
Web担当者フォーラムのh1とh2でSEO向けのA/Bテストだ！を見ると、h1やh2を改善するくらいではSEO効果が変わらないそうなので、気になる方は、ホームページ制作会社に何か修正を依頼するついでに依頼すると良いでしょう。
hタグの順番を間違えるとSEOにマイナス？
hタグの順番を間違えるとSEOでマイナス評価を受ける可能性があります。
hタグの順番を間違えていることがSEOで減点になるのではなく、Googleがページの内容を間違えて認識してしまった結果、SEOでマイナス評価を受けてしまいます。
hタグを使わないとSEO効果が出ない？
hタグを使わなくてもSEO効果を発揮することが可能です。
例えば、制作実績になる大阪の外壁・屋根塗装会社が公開する大阪府守口市 高圧洗浄作業のページではhタグを利用しておらず、スタッフブログの他のページもhタグを利用していません。
ただ、SEOとしては高い効果を実現しており、狙った複数のキーワードで上位表示を実現しています。
そのため、SEOのためにhタグを無理に利用する必要はなく、ユーザーを考えたページ作成であれば、Googleから高い評価をしてもらえることが可能です。
hタグに画像を使っても良い？
hタグに画像を利用しても問題はありませんが、画像を利用する場合には、alt属性を記載しましょう。
alt属性を記載した画像であれば、alt属性のテキストがhタグとして評価されるので、適切なSEO効果を得ることができます。
hタグの文字数は何文字でも良いの？
hタグの文字数は何文字でも構いませんが、先述した通り、簡潔な文章を作成することが大切で、例えば100文字や200文字のhタグだとユーザーが読みづらいと感じてしまいます。
Webユーザビリティ的にもSEO的にも過剰に長い場合はあまり良い結果を生まないので、ブラウザ上でhタグに折り返しが発生しないくらいの文字数と考えると良いでしょう。
hタグのまとめ
hタグについて解説しました。
hタグを適切に利用することで、SEO効果やWebユーザビリティの向上を実現することができるので、ホームページのコンバージョン数を増やすことが可能です。
hタグって何？とお思いの方の参考になれば幸いです。
