Hx 見出しタグを使用したコンテンツの階層構造

公開: 2018-01-30

Web サイトでコンテンツの見出しを使用することは、今日でも存続する多くの神話をもたらした非常に人気のあるテーマです。 では、見出しタグとは何なのか、なぜ使われるのか、ウェブサイトに見出しタグの最適な構造を実装する方法は?

1見出しとは？
2 Hx見出しタグで重要なコンテンツを使用する
3 Google は Hx 見出しタグについて何と言っていますか?
4コンテンツの見出しに関するその他の重要な情報

見出しとは

見出しタグは、コンテンツの構造をユーザー (Web ブラウザーのクローラーも) に提示するために使用されます。 H1 から H6 までの 6 つの見出しサイズがありますが、最初のサイズが最も関連性が高く (最も重要な見出しです)、H5 と H6 はめったに使用されません。

Hx 見出しタグには、コンテンツの残りの部分よりも大幅に大きい(はずの) テキストが含まれているため、ユーザーはその下にある段落が何を説明しているかを理解するための視覚的な手がかりになります。さまざまなサイズの見出しを使用して階層構造を表すことで、ユーザーがコンテンツを理解しやすくなります。

HTML 構文では、<> ブラケットでタグを使用します。

 <h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<h4>見出し 4</h4>
<h5>見出し 5</h5>
<h6>見出し 6</h6>

しかし、Web サイトでは、たとえば次のようになります (明らかに、スタイルシートによって異なります)。

使用例は、https://www.w3schools.com/html/html_headings.asp にあります。

Hx 見出しタグで重要なコンテンツを使用する

ほぼ毎日、新しいブログ投稿、ニュース、ガイド、または専門家の記事が配信される場合、素敵な写真やキャッチーなタイトルだけでなく、構造化されたコンテンツでユーザーを引き付ける価値があります。

モバイルデバイスで特定の記事を閲覧する場合、読者は主に見出しに注意を払うことがよくあります。純粋な美的側面は別として、見出しの適切な構造により、コンテンツの解釈と消化が容易になり、ユーザーが特定の Web サイトに長く留まる可能性があります。

よく構造化された Web サイトから恩恵を受けることができるのはユーザーだけではありません。クローラーも同様に見出しテキストが重要であるため、それを行うことができます。そのため、件名の観点からページのコンテンツに関連するキーワードを見出しタグに含めることが非常に重要です。特定のキーワードで特定のページをターゲットにする場合は、それらを (別の形式であっても) 見出しに入れることが望ましいです。それらは当然テキスト内に配置できますが、理由の範囲内です。

構造は明確に定義し、見出しはそれぞれ異なるサイズにする必要があります。 本文と同じスタイルにしたり、重要度で区別しないのは間違いです。

記事の Hx 見出し

ブログ記事を書いている間、私たちは創造的に見出しを使うことができます。記事を開始する前に、記事の構造を定義する必要があります。 見出しは、個々の段落を分割する見出しである場合があり(まさにこの記事のように)、そのうちの最も重要なもの <h1> を使用して主題を説明できます。多くの場合、Web サイトテンプレートで自動的に定義されるため、そうでない場合は、SEO の専門家や Web 開発者と話し合って変更を加える価値があります。

よくデザインされた記事の構造は、より魅力的に見せることができます。見出しに含まれる興味深いコンテンツは、読者 (およびクローラー) に特定の記事に何を期待すべきかを明確に伝えます。

Web サイトのホームページに配置する見出しタグはどれですか?

ホームページ (またはサービスページなどのその他のページ) にも、見出しの階層構造が必要です。 <head> セクションでは、見出しタグの最大数はありませんが、H1、H2 の下、H3 などを配置することをお勧めします。 H1 の場合でも、見出しを 1 つに限定する必要はありません (以下で詳しく説明します)。

ただし、見出しに「私たちについて」や「詳細」などのセクションを追加しても、内容はあまり追加されないことを覚えておく必要があります。また、 H5 ～ H6 などの重要度の低い見出しを使用しても、ほとんど意味がありません (記事のレイアウトの側面を除いて)。

1 ページの Web サイト = 1 つの H1 見出しタグ?

1 ページの Web サイトの場合、ブログ記事ほど明白ではありません。 HTML5 仕様(https://www.w3.org/TR/2014/REC-html5-20141028/sections.html) では、HTML ドキュメント内の個々のセクションを定義する役割を担う<section>タグを見つけることができます。通常、セクションには見出しが含まれているため、すべてのセクションが異なる階層構造を持つ場合があります。次に例を示します。

 <section id=”約”>
 <h1>私について</h1>
 <p>私についてのテキスト:)</p>
 <h2>私の名前はダウィドです...</h2>
 <p>私についての 2 番目の段落。 笑:)</p>
</セクション>

<section id="ポートフォリオ">
 <h1>私のポートフォリオ</h1>
 <p>私の最新のプロジェクト...</p>
</セクション>

<セクション>
 <h1>お客様の声</h1>
 <p>ご満足いただいたお客様の声...</p>
 <h2>最新のツイート</h2>
 <p>ツイート 1</p>
 <p>ツイート 2</p>
</セクション>

<セクション>
 <h1>お問い合わせ</h1>
</セクション>

上記のように、各セクションには異なる H1 見出しがあり、次に H2 見出しがあります。ただし、1 つまたは複数の H1 見出しタグを持ち、その後に H2、H3 などを付けることができます。

Google は Hx タグについて何と言っていますか?

Google の従業員は見出しタグについて多くのことを述べていますが、彼らの最新の意見を引用する価値があります。 1 年前、 John Meullerはウェブマスター向けの Google フォーラムで次のように書いています。

「私たちは HTML5 を別の方法で扱っていません。1 つのページに複数の H1 タグを配置しても問題ありません。 それらを使用するときは合理的であり、意味のあるところで使用してください。 H1 を使用することによるペナルティはまったくありません。」

少し後の 2017 年 4 月、John は Twitter (https://twitter.com/JohnMu/status/852131231928135680) で、1 つのページで H1 見出しをいくつ使用できるかという質問に非常に簡単に答えました。

最後に、Google ウェブマスターチャンネルの「SEO スニペット」YouTube シリーズの一環として、この問題に関する短いガイドがアップロードされました。

無料トライアルを開始する

コンテンツの見出しに関するその他の重要な情報

Google の従業員は (少なくとも公式声明では) 見出しタグに対する柔軟なアプローチを提案していますが、従う価値のあるルールがいくつかあります。

ページの見出しを使いすぎない
ユーザーが特定の段落の開始位置と終了位置を判断しやすいように、意味のある見出しと、その下のテキストを反映する見出しを使用します。
見出しに段落全体 (すべてのコンテンツ) を入れないでください
特に不自然な形で、キーワードだけを使用しないでください
見出しと本文の両方に同じフォントサイズを使用して、本文の見出しを非表示にしないでください。
構造階層の順序を維持する
おそらく、見出しタグの代わりに <strong> タグを使用することもあります????.

コンテンツを作成するときは、最適化しすぎたり、最適化しすぎたりしないでください。代わりに、記事、ガイド、その他のブログ投稿など、ウェブサイトのコンテンツを消化するユーザーの気持ちにバランスを取り、焦点を当てるように努めてください。結局のところ、見出しは Google 検索エンジンのランキング決定要因であるため、無視してはなりません。