hタグ（見出しタグ）とは？役割やメリット・設定方法・注意点など詳しく解説

hタグとは、Webサイトの情報をユーザーや検索エンジンに簡潔に伝える見出しを作成するときに用いられるHTMLです。hタグを設定するメリットを知りたいという方もいるのではないでしょうか。

この記事では、hタグの役割や設定することで得られるメリットなどを解説します。hタグの設定方法や使用する際の注意点にも触れているため、企業のWeb担当者の方やWebマーケティングの情報収集をしている方は、ぜひ参考にしてください。

▼SEO会社でお悩みの方必見！東京エリアのSEO会社比較表はこちら

ダウンロード【東京エリア】SEO会社のサービス比較表

hタグとは

hタグとは見出しを設定する際に使用するHTMLタグの一つです。hタグのhはheadingを表しており、見出しという意味です。hタグは階層別にh1〜h6の6種類まで使い分けられます。中でもh1タグは最上位の階層に位置し、h2、h3というように階層が低くなっていくのが基本ルールです。原則に従って使用しなかった場合、階層が崩れてしまうため注意しなければなりません。

そこでh1〜h6のhタグにはそれぞれどのような役割があるのか、設定する際に意識したいポイントや気を付けるべき注意点などを解説していきます。

h1タグの役割

Webサイトのコンテンツのテーマを表す際に使用されるhタグがh1タグです。h1タグは検索エンジンがWebサイトのコンテンツの内容を把握したり階層の深さを理解したりするための重要な役割を担っています。したがって、検索エンジンの検索結果ページ上位にコンテンツを表示させるにはh1タグに対策キーワードを含めることがポイントです。

なお、h1タグを指定するテキストの文字数に制限はありませんが、長くなりすぎると読みにくくなりコンテンツの内容がユーザーに伝わりにくいため、30〜35文字に収めることが推奨されています。検索結果には30〜35文字程度までしか表示されないことも理由の一つです。またh1タグは1記事に対して一つ設定することが望ましいでしょう。なぜなら記事コンテンツのテーマを表す役目があるh1タグを複数回使用している記事では、キーワードが分かりづらく伝えるべき内容が曖昧になるからです。

h2～h6タグの役割

h2～h6タグにはコンテンツ本文の内容を階層ごとに分ける役割があります。h2タグはh1タグに次ぐ重要なテキストに使用されるのが一般的です。h3タグはh2タグよりも一つ階層が低く、h2の中で重要な情報を目立たせる際に使用されています。h4〜h6タグはh3タグよりも階層が低くなり、h3タグの内容を掘り下げる際に使われます。

h2タグは大見出し、h3タグは中見出しと呼ばれており、h4以降の呼び方は小見出しです。h2～h6タグの使用回数にルールは定められていませんが、hタグを使用する順序がバラバラになると見出しの構造が崩れてしまうため、h2タグの下にh3タグ、h3タグの下にh4～h6タグという順番を守りながら使用してください。

h1タグとtitleタグの違いとは？

h1タグとtitleタグはいずれもページ全体のテーマを伝えるタグであり、似た役割を持っていますが多少の違いが存在します。基本的に、h1タグとtitleタグの役割は同じですが、表示する場所やターゲットに合わせて使い分けることが大切です。h1タグとtitleタグを表示する場所とターゲットとなる対象について下記の表にまとめたので、それぞれの違いを確認しておきましょう。

タグ名	表示する場所	ターゲット
h1タグ	コンテンツページ	コンテンツを閲覧中のユーザー
titleタグ	検索結果ページSNSにシェアする際の表示	コンテンツにアクセスしようとしているユーザー

h1タグはコンテンツを読んでいる人をターゲットにしており、コンテンツの各ページに表示します。一方のtitleタグはこれからコンテンツを閲覧しようとしている人を対象にしており、検索結果ページやSNSにシェアされる際に表示される仕組みです。

hタグを設定するメリット

hタグを設定することでSEO対策につながったり、コンテンツ内の見出しを活用して目次を作成しやすくしたりするなど、さまざまなメリットが得られます。hタグを設定するメリットを理解してhタグの重要性の理解を深めましょう。

読みやすい文章が作成できる

コンテンツのテーマによっては見出しを設定すると文章が読みやすくなります。hタグを設定せずに文章のみのコンテンツを作成した場合、どこに何が書かれているのか把握しづらくなるため、ユーザーが自分に必要な情報を見つけづらくなってしまいます。ユーザーが読みづらいと感じれば、すぐに離脱される可能性が高まるでしょう。

hタグは見出しを記事内で際立たせることができるため、ユーザーは見出しをヒントに自分に必要な情報を素早く探せるようになります。読みやすいコンテンツにするには、本文の内容を押さえたテキストをhタグで囲む工夫が必要です。見出しと本文の内容に違いがあると要点がつかみづらいコンテンツになってしまうため、ユーザーが読みやすく分かりやすい見出しを設定しましょう。

ダウンロードユーザーにとって読みやすく役に立つ 記事コンテンツの書き方

SEO対策になる

対策キーワードを含めたhタグを設定するメリットは、SEO対策に有効なことです。hタグから情報を得るのはコンテンツを読むユーザーだけではありません。hタグは検索エンジンロボットがWebサイトを巡回してユーザーにとって有益な情報を発信しているか評価する際に重要な役割を担っています。具体的には、コンテンツの階層構造を正しく検索エンジンロボットに伝えるためにhタグを適切に設定しなければなりません。

対策キーワードとコンテンツの内容の関連性が低いと、検索エンジンロボットに正しい情報を伝えられなくなるためコンテンツやWebサイトの評価が下がってしまいます。SEO対策に有効なキーワードをhタグに含めることで検索エンジンロボットから良い評価を得やすくなり、結果的によいSEOにつながるでしょう。

また、hタグを設定してコンテンツの構造が分かりやすくなるとユーザーの利便性が高まります。コンテンツを最後まで読んでもらえたり頻繁にWebサイトへ訪れてくれたりするユーザーが増えることでWebサイトの評価を間接的に高めることが可能です。

目次を作成しやすい

hタグを見出しに設定するメリットは目次が作成しやすくなることです。例えばWordPressでWebサイトを構築する場合、プラグインを追加すればhタグを設定するだけで目次を自動生成できるようになります。

ユーザーは目次の項目を見て自分に必要な情報を探して読めるようになるため、Webサイトのユーザビリティの向上につなげられることもメリットの一つです。Webサイトのユーザビリティが向上すれば検索エンジンによる評価を高めることが期待できます。

例えばユーザーが一度Webサイトから離れても目次を見ることでどこまで読み終わったのかを把握しやすいため、読みたい場所から読み進められます。さらに、コンテンツ全体を簡潔にまとめた内容を見出しに設定すれば、本文を読む前に目次に目を通すことで記事の概要を素早く理解してもらえるでしょう。

hタグの設定方法

hタグの基本的な記述方法を把握しておくと、実際にWebサイトのコンテンツ作成をスムーズに行えます。h1～h6タグの書き方は以下のとおりです。

• h1：<h1>テキスト</h1>
• h2：テキスト
• h3：テキスト
• h4：<h4>テキスト</h4>
• h5：<h5>テキスト</h5>
• h6：<h6>テキスト</h6>

hタグは<h〇>の開始タグで始まり、</h〇>の終了タグで終えるのが原則です。〇には見出しの階層を示す数字を入れます。上記の「テキスト」の部分に見出しを入力すれば、hタグの設定は完了です。終了タグを記述する際は「h」の前に「/（スラッシュ）」を付けるのを忘れないようにしましょう。

hタグを使用する場所を決める

hタグの設定はコンテンツの構成内容を作成する際にhタグの使用場所を決めることから始めます。本文を書き進める前にhタグを使用する場所を決めておく理由は、記事のテーマから外れた内容になるのを避けるためです。

hタグの使用場所を決めることでテーマを基に一貫した内容の記事を作成できるようになり、不要なコンテンツを作ったり作成に無駄な時間をかけたりせずに済みます。例えば記事作成を外部に委託する場合でもhタグを設定していればテーマや見出しの意図から外れた文章になることを防げるでしょう。

hタグに対策キーワードを含める

hタグにはSEO対策として対策キーワードを適切に含めましょう。hタグの中でもh1タグは検索結果に影響を及ぼす可能性があるといわれていることから、対策キーワードを含めることがポイントです。

ただし、不自然なテキストになるほど対策キーワードを多く詰め込みすぎると、記事が読みづらくなり可読性が低下してしまいます。読みづらいコンテンツはユーザーにストレスを与えやすく、Webサイトのユーザビリティを低下させかねません。hタグに対策キーワードを含める際は、ユーザーの目線に立って読みやすさを意識しながら、優先度の高いキーワードを盛り込みましょう。

色やフォントサイズを調整する

hタグの色やフォントの大きさを調整して目立たせることで見出しを強調できます。hタグの色やフォントサイズはCSSを活用して調整すると良いでしょう。CSSとは、Webサイトのデザインを細かく設定できるプログラミング言語の一つです。色を調整する際は「color」を指定し、フォントサイズは「font-size」で変更できます。例えば、h2タグを濃いグレーで「28px」にフォントサイズを大きくしたい場合は、以下のように記載します。

h2 {font-size: 28px;color:#696969}

26pxの数値に変更することで文字の大きさを変えることが可能です。hタグの色やフォントサイズは好きな色を適当に決めるのではなく、Webサイトの雰囲気に合わせて調整しましょう。

見出しにページリンクを設定する

目次を作成する場合は見出しにページ内リンクを設定します。見出しにページ内リンクを設定すれば目次の中から読みたい見出しをクリックまたはタップするだけで、その見出しに移動できるようになります。

ユーザーは知りたい情報がある部分までスクロールする手間を省けるためWebサイトの利便性が高まり、ユーザビリティの向上につなげられるでしょう。ユーザーにとって読みやすいコンテンツを多く作成することで検索エンジンロボットからもよい評価を得られる可能性が高まります。ただし、見出しのテキストが長くなると内容を把握しづらくなるためできるだけ簡潔にまとめましょう。

hタグ設定の注意点

hタグを設定する際にいくつか気を付けるべき注意点があります。主な注意点は以下のとおりです。

• 内容が伝わりやすい見出しを作成する
• hタグとWebデザインの記述は分ける
• hタグに画像を使用する場合はalt属性を設定する
• 見出しを改行する際は長さに注意
• hタグを強調しすぎない

内容が伝わりやすい見出しを作成する

hタグのテキストは誰が読んでも内容が伝わる見出しを設定する必要があります。本文に書かれている内容が分からない見出しを作成すると、ユーザーは本文を読む前にWebサイトから離脱してしまうでしょう。見出しはサイトを訪れたユーザーや巡回する検索エンジンロボットが一度見ただけで記事や本文の内容が伝わるように、簡潔かつ分かりやすいテキストを設定することが大切です。

hタグのテキストはターゲットが普段使っている言葉を選んでください。例えば、就職・転職がテーマの記事を作成する場合、求職者と一括りにするのではなく、大学卒業見込み者をターゲットにするなら新卒者、転職する人を対象にする際は転職者と使い分けるのも一つの方法です。

hタグとWebデザインの記述は分ける

本文テキストのフォントサイズや装飾を施したい場合はhタグとWebサイト全体のデザインを分けて記載することが大切です。hタグは検索エンジンロボットにWebページの階層やコンテンツの内容を伝えることが本来の役割です。

本文で重要な箇所を目立たせるためにhタグで囲ってしまうと不要なhタグが増えて検索エンジンロボットに正しく情報を伝えられなくなる恐れがあります。検索エンジンロボットにコンテンツの内容を伝えることができないと、検索結果が低くなるかもしれません。

本文のテキストのデザインを変更したい場合は先述したCSSで設定することをおすすめします。

hタグに画像を使用する場合はalt属性を設定する

hタグはテキスト以外に画像を設定する方法があります。

ただし、hタグはテキストを設定するのが一般的なため画像を挿入することはおすすめできません。また、hタグに画像を設定すると検索エンジンロボットが情報を読み取ることができず、hタグは何も情報がない空白として認識されます。hタグを設定しても検索エンジンロボットに正しく認識されないため、SEO対策にはならないでしょう。

hタグに画像を入れたい場合はalt属性を活用してみてください。alt属性とは画像をWebサイトに表示させる際に画像の代わりになるテキストを指定するためのHTMLです。記述の例は次のとおりです。

<img src=”〇〇.jpg” alt=”画像の代替テキスト””>

上記のように記載することで、画像の情報を検索エンジンロボットに正しく伝えられるようになります。

見出しを改行する際は長さに注意

hタグのテキストが長くなる場合は見出しを改行しても支障ありません。

ただしGoogleの公式ガイドでは文字数が多すぎる見出しを避けることを推奨しています。長い見出しがSEO対策に悪影響を及ぼすといった記載はありませんが、ユーザーにとって読みづらい記事になりやすく、結果的に検索エンジンロボットの評価が低くなるかもしれません。

一般的に人が一目で見て理解できる文字数の目安は13文字とされている一方で、正確な内容を理解するためには15文字以上必要ともいわれています。

対策キーワードが長く、どうしても見出しの文字数が長くなってしまう場合は<br>タグの使用がおすすめです。hタグ内に<br>タグを挿入することで見出しの途中で改行を入れられます。

hタグを強調しすぎない

hタグ内では<strong>タグや<em>タグのようなテキストを強調させるタグの使用は避けることをおすすめします。

<strong>タグや<em>タグは文章で重要なポイントを強調させたいときに用いる強調タグです。hタグを設定する時点で見出しを目立たせることは可能なため、強調タグをあえて使用する意味はありません。

先述したとおりhタグは記事内で使用できる回数に制限がありませんが、多く使用しすぎるとかえって読みづらいコンテンツになってしまいます。本文で強調させたい箇所がある場合はhタグを強調して使用するのではなく、箇条書きを用いたり表にまとめたりして見せ方を工夫すると良いでしょう。

ダウンロードユーザーにとって読みやすく役に立つ 記事コンテンツの書き方

hタグを適切に設定しユーザビリティを高めよう

hタグを適切に設定すればユーザーや検索エンジンロボットにコンテンツの情報を伝えやすくなります。hタグを設定する際は注意点もあるため、SEO対策やWebサイト作成に精通する人材がいない場合は外部サービスの利用を検討すると良いでしょう。

ジオコードは17年以上の間、SEOサービスを提供し続けているWebマーケティング会社です。コンテンツ作成やSEO対策でお困りの場合はジオコードにご相談ください。ジオコードではこれまでの業績を紹介する記事として「SEO成功事例5選」も公開しています。

適切にhタグを設定しユーザーが読みやすく、SEOに効果的なサイト運営を目指しましょう。