hタグおさらい

簡単にchat GPTさんにおさらいしてもらい、Google、その他参考サイトの調査結果も追記しておきます。もっと極める方はご自身で調査してくださいね!

Hの意味は??

hタグとは、ユーザーや検索エンジンに対して文章の中で重要な文章を伝えるために、HTMLでマークアップを行う見出しタグです。見出しタグのhはheadを表し、見出しタグの種類は<h1>から<h6>まで6種類あり、

ウェブサイトの構造におけるH1、H2、H3、H4タグの適切な使用について簡単に説明します。これらのタグは、HTMLで見出しをマークアップする際に使用され、ページの構造を整理し、コンテンツの階層を明確にするのに役立ちます。SEO(検索エンジン最適化)においても重要な役割を果たします。

検索に必要な「hタグ」のおさらい

H1タグ

  • 用途: ページの主要なタイトルや最も重要な見出しに使用されます。
  • 推奨: 各ページに1つのH1タグを含めることが推奨されています。これは通常、ページの最も重要なトピックやコンテンツの焦点を示します。サイト名よりも、そのページ固有の内容を反映したタイトルの方が望ましい場合が多いです。

HTML5の場合、<h1>を複数回使用することが認められています。しかし、一方でGoogleは、<h1>タグが複数あることに関して、「どの<h1>要素が本来重要なのかが判断できなくなり、本来の大見出しとしての重要度や価値が薄まる。」と公式に発言しています。つまり、検索エンジンの中でもトップシェアのGoogleに適切にページを認識してもらい、多くのユーザーに情報を発信したいのであれば、大見出しとなる<h1>タグの使用回数は、1ページ毎にひとつに絞る必要があるのです。<h2>以下に関しては複数回使用しても問題はありませんが、階層を意識して、適切に使用するようにしましょう。

titleタグの内容と併せて<h1>タグでも対策キーワードを使用することで、キーワードの重要度もクローラーへ伝わりやすくなります。titleタグは検索結果<h1>タグはページ内で表示されるものですので、その点に留意して設定する。

<h1>に画像を使用することは基本的に問題ありません。ですが、なるべくテキストで記述するほうがベター

<h1>に設定するテキストは全角30~60文字程度

H2タグ

  • 用途: セクションの見出しやページ内の主要なポイントを分けるために使用されます。
  • 推奨: H1タグの下にあるメインのセクションタイトルに使用します。ページの主要なサブトピックや、大きなセクションを導入する際に役立ちます。

H3タグ

  • 用途: H2タグで導入されたセクション内のサブセクションのタイトルに使用されます。
  • 推奨: より詳細なポイントやサブトピックを区別するために使用します。H2タグの内容をさらに細かく分ける際に有効です。

H4タグ(およびそれ以下のH5、H6)

  • 用途: より細かいコンテンツの階層や、H3タグで導入されたセクションの中のさらに細かいポイントに使用されます。
  • 推奨: 非常に詳細な情報や追加のサブポイントを整理するために使用します。必要に応じて、より深い階層の情報を整理するためにH5やH6タグも使用できますが、過度に深い階層は避け、コンテンツを分かりやすく保つことが重要です。

一般的なヒント

  • 階層の整合性: H1からH6までのタグは、論理的かつ階層的な順序で使用することが重要です。つまり、H2タグはH1タグの下、H3タグはH2タグの下の階層にあるべきです。
  • キーワードの使用: 見出しには、そのセクションの内容を正確に反映し、必要に応じて重要なキーワードを含めることが重要です。これはSEOにおいても役立ちます。

見出しタグの使用は、ウェブサイトのアクセシビリティとSEOにとって非常に重要です。正しい階層と明確な構造を持つことで、ユーザーにとっても検索エンジンにとっても、コンテンツを理解しやすくなります。

hタグに強調タグを使用すること

hタグはコンテンツの見出しタグなので、コンテンツの本文に使用するタグを併用するのは不適切と言われています。

タグの併用例

<h2>冬は<strong>とても</strong>寒い<h2>このようにテキストを強調するタグ<strong>や、同様に<em>をhタグのテキスト内に使用するのは避けましょう。
また、<strong>タグや<em>タグは使い過ぎるとGoogleからスパム行為と見なされ、ペナルティを受ける場合がありますので、なるべく使用しないように気を付けましょう。

hタグの順番

2018年4月13日のGoogleオフィスアワーで「h1、h2、h3などのhタグの順番が間違っていた場合、問題になるのか?」という質問ができました。それに対してGoogleのジョン・ミュラー氏は「問題にならない。検索エンジンはページの内容を理解するためにhタグを多少は使っているが、必ずしも正しい順番である必要はない。」と答えました。これに対して元Google社員のペドロ・ディアス氏は「GoogleにとってH1, H2, H○などの順番は重要なのか?重要ではない。でもユーザビリティやアクセシビリティにとっては重要だ。なのにどうして修正しないのか?」と述べています。つまり、2人の意見から考えるとユーザーを考慮したサイトを設計することが重要であると言えます。hタグを正しい順番で使うことはSEOの観点からは良いことです。しかし、正しい順番で利用した際にユーザビリティが下がってしまう場合、サイトに訪れるユーザーのことを考えて順番を変更する必要もあります。そのため、ユーザビリティも考慮して設定を行うようにしましょう。

Googleの推奨する適切な<h1>タグ

Googleは検索エンジンスターターガイド内で適切な見出しタグの使い方について説明しています。
Googleの示す<h1>(見出しタグ)についての記述ポイントは下記のとおりです。

  1. ページの構成と関係なく見出しタグでテキストを囲わない
  2. <em>や<strong>が適切な箇所で見出しタグを使用しない
  3. 見出しタグのサイズの使い分けを不規則にしない
  4. ページ内で見出しタグの乱用はしない
  5. ページ内のすべてのテキストを見出しタグで囲わない
  6. 見出しタグをスタイル変更のためだけに使用しない

ブログでの適切なhタグの使用例

<h1>ブログの記事タイトル</h1>
<h2>ブログの記事内で使用する中見出しタグ</h2>
<h3>~<h6>ブログの記事内で使用する小見出し

AIを導入しリーズナブルで確実と信頼があるホームページ制作はアピステクノロジーへ

アピステクノロジーでは、特注システム開発をはじめ、AIを導入したHPの制作にも力を入れています。

WordPressはもちろん、ShopifyのECサイトもご要望に応じて制作いたします。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら

システムの入ったパッケージ「ITツール」紹介ページはこちら

アピステクノロジーでは、IT専門家としておすすめPCの販売も行っています!