HTML見出しタグを正しく使用する方法

公開: 2020-06-25

すべてのWebサイトは独自のモンスターであり、開発者とデザイナーが独自の署名の声をコードに組み込んでいます。しかし、すべてのWebサイトに共通する要素の1つは、HTMLの見出しタグです。これらの見出しは、コンテンツをより読みやすいセクションに分割するだけでなく、サイトのセマンティックアウトラインを作成するため、検索エンジンとアクセシビリティソフトウェアは、サイトを構成するコンテンツを正確に知ることができます。 HTML見出しタグの適切な使用と機能に関して混乱が生じることがあるため、6つの層すべてを調べて、それらを正しく使用する方法とタイミングについて説明します。

私たちのYoutubeチャンネルを購読する

HTML見出しタグを使用する理由

上で述べたように、これらのタグはサイトのスケルトンを作成します。それらがないと、サイトのタイトルと目的が明確でなくなるだけでなく、段落を使用して分割したとしても、コンテンツはユーザーとボットに1つの巨大なテキストの壁であるかのように見えます。

さらに、スクリーンリーダーとユーザー補助ソフトウェアは、それらを使用してコンテンツをナビゲートします（文字通りの場合もあります）。したがって、HTML見出しタグを含めないと、ページやコンテンツ内を移動できないため、多くの人がサイトにアクセスできなくなります。

さらに、サイトにアクセスする検索エンジンやその他のWebクローラーも、見出しを介してナビゲートします。最近、Googleはランキングでコードのセマンティクスを検討しています。つまり、検索の意図が非常に重要視されています。 HTML見出しタグはこれの主要な部分であり、階層的な重要度別に整理された特定の情報を見つけるためにページ上のどこにGoogleと訪問者に通知します。

また、ページ内の各タグは、これらすべてを独自の方法で支援します。

タグの階層は重要です

HTML見出しタグの階層が重要です。これらのタグを使用する順序は、サイトのSEOを作成または中断する可能性があります。 CSSを使用してスタイルを設定し、H6タグをH2よりも大きく、太く、明るくすることはできますが、クローラー（およびリーダー）を混乱させないように、それらを維持するようにしてください。

投稿の概要の見出しであるかのように、タグを昇順で考えてください。あなたは（一般的に）その直前の前任者の下にもっと大きな数字を置くべきです。それらは必要なだけ深くネストできますが、毎回次のものだけを順番に配置するようにしてください。

次に例を示します。

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

H4の上に単一のH6がある特定のケースがあるかもしれませんが、ほとんどの場合、Googleや他の検索エンジンは、見出しを使用してコンテンツをナビゲートすることにより、トピックの優先度を決定し、コンテンツの有効性を測定します。

H1タグ

H1タグは、HTML見出しタグの中で最も単純なものであると同時に、最も誤解されているものの1つである可能性があります。ほとんどの場合、H1の見出しは特定のページまたは投稿のタイトルとして表示されます。それは検索エンジンが（おそらく）結果に表示するものです。多くのSEOプラグインや同様のアプリではそれらに合わせて変更できますが、ブラウザのタイトルバーにもこれが表示される可能性があります。そのため、H1タグにターゲットのキーフレーズを含めることは重要ですが、100％必要というわけではありません。 HTMLの見出しタグにキーワードを詰め込む代わりに、訪問者の検索意図をカバーするように見出しとタイトルを意味的に記述します。

h1の例

上の画像は、ElegantThemesブログの記事のエントリタイトルとして使用されているH1タグを示しています。これもページ上の唯一のH1タグです。これは、それがページのコンテンツのトピックであることを示しています。

何年もの間、標準的な方法は、ページごとに1つ（そして1つだけ）のH1タグを持つことでした。ほとんどの場合、これはまだ良いアドバイスです。 Googleや他の検索エンジンがあなたのページをクロールし、H1タグを探します。次に、それを使用してトピック、タイトル、および構造を決定します。

ただし、Googleは、サイトに複数のH1 HTML見出しタグを設定しても、SEOペナルティはまったく発生しないと明示的に述べています。これは、サイトのいたるところでそれらを使用することを意味するわけではありませんが、必要に応じて1ページに複数を使用できることを意味します。

複数のH1見出しを使用する場合

H1の唯一の目的は、単一のトピックに関するセクション全体を示すことです。つまり、複数のトピックを含む単一のページがある場合、そのページの新しいトピックごとにH1を使用する必要があります。そうすることで、あなたのページはタイトルのトピックだけではないことがGoogleに伝えられます。しかし、まったく異なる（まだ関連している）トピックに関するセクションが下にある場合もあります。

単一ページのWebサイトでは、その1ページに[概要]、[価格設定]、[連絡先]、および[ポートフォリオ]セクションがある場合があるため、これも重要です。では、各セクションに含まれるコンテンツが独自の自律ユニットであることをGoogleにどのように知らせますか？

H1タグ、その方法です。上記で説明した階層を使用して、各セクションを独自のミニWebページであるかのように扱います。このようにして、Googleはページをナビゲートするときに見出しを確認し、検索者の質問に答えるために、それらのセクションのどれから注目スニペットをプルするか（など）を決定できます。

サイトでセクションタグを使用するたびにH1タグを使用することもできますが、それがページのタイトルと並行して重要なセクションであり、下位のセクションではない場合にのみ使用することをお勧めします。

H2タグ

現在、H2タグは、ページで最も使用されているHTML見出しタグになる可能性があります。そして、正当な理由があります。インターネット上のほとんどの投稿とページは、いくつかの小見出しのみを持つ単一のトピックで構成されています。作成するすべてのコンテンツに、少なくとも1つのH2タグを含めることをお勧めします。 Yoastおよびその他のSEOプラグインは、およそ300語ごとに見出しを提案します。コンテンツによっては、それがH2タグの目的です。

それらは読みやすくするためにサブトピック（またはステップ）を分離します。たとえば、ほとんどの投稿は主にH2の見出しで構成されています（該当する場合はH3を使用）。これは、私たちの記事が単一のトピックに関するものであり、単一の問題を解決しようとしているためです。 H1としてOBSStudioを使用してライブストリーミングする方法などのタイトルがありますが、「OBSStudioの使用を開始する方法」などの小見出しはH2にあります。

h2の例

H2タグは、H1トピックに直接関係する個々のステップを表します。その特定の投稿では、次の構造を使用しました。

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

この投稿のH2見出しタグは、開始とダウンロード、実際のソフトウェアのセットアップ、視聴者への画面の表示方法の調整など、主要なアイデアを説明しています。 H3のステップの下にもステップがありますが、H2の見出しは記事の大規模な全体像を示しています。これらは、クローラーとリーダーがスキャンして、検索している情報が記事に含まれているかどうかを確認できる高レベルのビューです。

一般に、記事ごとに複数のH2タグがありますが、その下に小見出しがネストされていない場合があります。上記の例のようにサブセクションのあるセクションに分割されていない単一のトピックに関するページまたは投稿の場合は、ネストされたH2-> H3-> H4よりも複数のH2タグを使用することをお勧めします。これは、クローラーに次のことを示しているためです。投稿の主要な主題を拡大するよりも、suptopicについて深く掘り下げます。

H3タグ

一方、H3タグは、記事がトピックの詳細を実際に掘り下げることができる場所です。これらのH3タグをH1の直下で使用しないでください。 Googlebotと検索エンジンは、それらを絶対的に小見出しと見なします。 H2は、単一の記事内のセクションの主要な見出しとして受け入れられますが（H1はメイントピックをタイトルとして宣言しているので、覚えておいてください）。

h3の例

上の画像をよく見ると、H2タグとH3タグの実際のスタイルとサイズに大きな違いはないことがわかります。理由は、H3で作成したポイントはH2よりも重要ではないとスキャンして推測したくないからです。そうではないからです。

トピック全体に直接結びつくのではなく、H2の下位ポイントであることを示すためにサイズが小さいだけです。これは、記事のSEOに関する構造的な観点から最も重要です。ロボットではなく人間の読者にとって、視覚的な区別は単に彼らをページの下に移動させ、情報を分解してより簡単に解析するのに役立ちます。

H4、H5、H6タグ

これらをまとめたのには理由があります。一般に、HTML見出しタグのH1からH6の範囲を最大限に活用しているサイトを見つけるのは難しいでしょう。断然、最も人気のある構造はH1からH3です。 2番目のネストされたレベルを超えるコンテンツのアウトラインがめったに表示されないように。

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

ほとんどの場合、H4タグはH3と同じ目的を果たします。これらを使用して手順と例の詳細を説明しますが、常にメインの見出しの下にネストします。デザイナーは通常、H3よりも小さいCSSでスタイルを設定します。通常のコンテンツ作成では使用が制限される傾向があります。 H4見出しタグが必要になるようにアイデアを分解する必要がある場合、トピックは非常に詳細になる傾向があります。

H5とH6

H5とH6の見出しは、いくつかの異なる方法で使用できます。

最初の方法

（ほんの一例として、この特定のセクションを見出しでさまざまな部分に分割しました。メイン記事のサブサブトピックであるため、現在H4になっています。）

これらの見出しは、目次や同様のリストでよく使用されますが、主な機能は技術的には他の見出しと同じであり、ページ全体で重要度の低いトピックを示しています。 H6までの見出しの完全な配列を含むドキュメントを見つけることは非常にまれです。

2番目の方法

一部の人々は、H5およびH6タグを「特殊な」フォーマット見出しとして使用します。これらは、H1からH4とは完全に異なるこれら2つのHTML見出しタグに特別なCSSを適用します。次に、それらを使用して、見落とされる可能性のあるトピックやアイデアに注意を喚起することができます。

見出しは階層的であるため、これは技術的にはベストプラクティスではありません。ただし、サイトが全体的に適切に構成されており、特定の個々のページまたは投稿でH5およびH6を特殊なスタイルとして控えめに使用している場合、ほぼ確実にSEOヒットは発生しません。

それらを特別なフォーマットに使用している場合でも、階層から抜け出さないことを覚えておいてください。それらを整理してください。したがって、H6を使用して小見出しのスタイルを設定する場合は、次に使用するのがH1またはH2であることを確認して、標準構造に戻ったことを示します。

HTML見出しタグを使用してはいけないこと

見出しの階層全体を下に向けて単一のページを構成しないでください。連続する各見出しをネストするよりも、タイトルにH1を使用し、すべてのH2を使用することをお勧めします。

はい：

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

番号：

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

さらに、見出しを無計画に使用したくありません。順番にのみ使用してください。そうしないと、クローラーはページをナビゲートする方法も、アクセシビリティソフトウェアもわかりません。

番号：

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

一般に、クローラーは、次のH1またはH2を見つけたときに、サブセクションから移動したことを認識していると想定できます。上記のコードスニペットでは、クローラーとボットは情報の構造を解析するのに苦労します。

HTML見出しタグでまとめる

ほら？まとめとして、H2の見出しに戻ります。見出しタグは、そこにあるすべてのWebサイトの重要な要素です。それらを適切に使用すると、訪問者がコンテンツで探している情報をより簡単に見つけることができるため、検索エンジンのランキングとサイトのUXを向上させることができます。見出しの多くにキーワードを付けすぎないように注意してください。話し合っているキーワードやフレーズを含めて、アイデアが明確であることを確認することをお勧めしますが、Googlebotやその他のユーザーは非常に賢く、トピックを交換したときや同じトピックにいるときを知ることができます。全体として、HTML見出しタグを使用することは非常に重要ですが、いくつかのことを念頭に置いておくと、サイトはすぐに輝きます。

HTML見出しタグを正しく使用していますか？

VectorV /shutterstock.comによる記事特集画像