ヘッダータグ：それらが何であるか、そしてそれらを使用する方法

私が最初にブログを始めたとき、検索エンジンのランク付けのために自分の投稿をどのように構成するか、あるいはなぜそれが重要なのかさえわかりませんでした。

見栄えがよく、検索エンジンの結果ページ（SERP）にランダムに選択されることを期待して、太字の単語やフレーズを入力しました。

今、私は科学があることを知っています ブログの最適化、そしてブログの投稿に投げ込んでプロフェッショナルに見せるために、ヘッダー/ヘッダータグと呼ばれていました。これは理解のための重要なツールです。 & SEO。

ヘッダータグとその使用目的に関するクイックガイドは次のとおりです。

• H1 —投稿のタイトル。 それらは通常キーワード中心であり、ページまたは投稿の「大きなアイデア」に焦点を合わせ、読者の注意を引くように作成されています。
• H2 —これらは、段落の要点と個別のセクションを分類するサブヘッダーです。 読者が読みたいセクションを簡単に見つけられるようにしながら、H1の「大きなアイデア」に関連するセマンティックキーワードの使用を検討してください。
• H3 —これらは、H2でのポイントをさらに明確にするサブセクションです。 または、リストや箇条書きの書式設定に使用することもできます。
• H4 -これらは、H3でのポイントをさらに明確にするサブセクションです。 または、リストや箇条書きの書式設定に使用することもできます。

H1、H2などの「H」は正式には「見出し要素」を表しますが、SEOコミュニティでは一般的にこれらのタグを「ヘッダータグ」と呼んでいます。

上記のガイドから推測できるように、数字はそれぞれの間の階層関係を示しています（H1が最も重要で、H2がそれほど重要ではないなど）。

この階層構造がブログの概要にどのように現れるかの例を次に示します。

ヘッダータグがページに構造を提供することを理解したので、H1タグから始めて、より具体的にそれらについて話しましょう。 

ヘッダータグを単なる文体要素として使用することを間違えないでください。 結局のところ、それらは本質的に構造的です。 H1は、本のタイトルと同じように考えてください。 通常、本のタイトルはXNUMXつだけなので、ページまたは投稿のタイトルはXNUMXつだけにする必要があります。 

さらに、H1タグは、本のタイトルが表紙の外側にあり、テキストの内側に飛び込むのと同じように、他のコンテンツの前に常にページの上部に配置する必要があります。

説明のために、以下の例のヘッダータグはタイトルです。2021年の製品マーケティングの究極のガイドに設立された地域オフィスに加えて、さらにローカルカスタマーサポートを提供できるようになります。」

タイトルは、HTMLコードを使用してページのH1として指定されます。 このコードは、次のようにWebページのソースコードに現れる可能性があります。

ペンを見る H1例1 クリスティーナ・ペリコーネ（@ハブスポット）上 コードペン.

ただし、前に触れたように、ページの構造を作成するのに役立つ他の見出しタグがあります。

HTMLでサポートされているヘッダータグはいくつですか？

HTMLは、必要に応じてページを構造化するために使用できる最大1つのヘッダータグ（H6〜H1）をサポートしています。 それらはあなたのブランドに従って視覚的に様式化することができます、そしてHXNUMXを除いて、あなたはあなたが望むだけページにこれらのタグをいくつでも持つことができます。 

ヘッダーは、読者（および検索エンジン）がコンテンツ内の要点を見つけてページの流れをガイドするのに役立つため、書いている内容のテーマに固執する必要があります。 フォーマットするときは、セクションを分割するときに最善の判断を下してください。

以下は、矢印で示されたヘッダータグの例を含むHubSpotブログ投稿のスクリーンショットです。

ご覧のとおり、すべてのヘッダータグは視覚的に異なって見え、各ヘッダータグは新しいアイデアに使用されます。

ヘッダータグとは何かについてもう少し理解できたので、SEOでのヘッダータグの使用方法について見ていきましょう。

ヘッダータグとSEO

あなたはヘッダータグがウェブサイト関連のものの壮大な計画において重要ではないと思うかもしれません。 ただし、ヘッダータグは、コンテンツの一部に構造を提供し、最も重要なアイデア、テーマ、および（事実上）に注意を喚起するのに役立ちます。 キーワード そのコンテンツで。 その結果、ヘッダータグは、キーワードの関連性と読みやすさで重要性を保持します。 

これを考慮してください：Googleはユーザーに提供するコンテンツを次のように見つけます Webページをクロールする。 その際、テキスト、画像、その他の要素を分析します。 そのページが何であるかを理解する.

ヘッダータグにテキストを挿入すると、このテキストが重要であることを通知します。Googleはこれらを使用してページのコンテキストを決定します。これにより、Googleは検索者のクエリに関連する結果を提供できます。

そのため、ヘッダータグを使用する場合は、ヘッダータグが正しく一致していることを確認することが重要です。 キーワードの意図。 投稿のH1タグにキーワードがない場合、またはH2タグとH3タグに無関係なテキストを入力すると、Googleはページを理解するのに苦労します。 その結果、そのページはランク付けされたほどにはランク付けされません。 

説明のために、キーワードが「eコマース」であるとしましょう。 これをH1タグに反映させたいので、「eコマースビジネスを始めるためのガイド」のようなタイトルが理想的です。 それはあなたの投稿にウェブブラウザを送る方法をグーグルに正確に伝えるでしょう。

検索エンジンは投稿内のヘッダータグも調べるので、それらのキーワード中心を維持するのも良いことです。 たとえば、「eコマースビジネスを作成するための2つのステップ」や「eコマースに最適なソーシャルメディアツール」など、eコマースに関連する人気のロングテールキーワードを囲むHXNUMXセクションを作成できます。

キーワードを自分で考える必要もありません。実際、簡単に行うことができます。 キーワードの研究 あなたを助けたり、次のようなキーワード調査ツールを調べたりするために SEMRush or Ahrefs。 ヘッダータグが人間と検索エンジンロボットの両方にとって使いやすいことを確認してください。

ヘッダーはまた、ページを読みやすくします。 Webページのさまざまな部分を分割することで、情報をわかりやすく整理および分割できます。 これは、読者が探している情報だけでなく、スキャンしている検索エンジンも見つけるのに役立ちます。

セクションが意味をなさない場合は、ページがランク付けされない可能性があります。 この投稿のセクションについて考えてみてください—読みやすい方法で分割されていると思いますか？

HTMLでヘッダータグを追加する方法

HTMLでヘッダータグを追加するのはかなり簡単なプロセスです。 H1を表記する場合は、次のように入力しますと、これら1つのタグの間にH1テキストを配置します。 これは、どのタイプのヘッダータグでも同じ方法です。

たとえば、h1が「eコマースを開始するためのガイド、」次のようになります。

ペンを見る H1例2 クリスティーナ・ペリコーネ（@ハブスポット）上 コードペン.

これはHTML4以前で機能します。 HTML5を使用している場合、同じ結果を得るには、わずかに異なる行を使用する必要がある場合があります。 変更は、H1が何であるかについてGoogleに頭を上げることです：

ペンを見る H1例3 クリスティーナ・ペリコーネ（@ハブスポット）上 コードペン.

XNUMXつのタグの間に句読点を含めることもできます。 たとえば、次のようになります。

ペンを見る H3例1 クリスティーナ・ペリコーネ（@ハブスポット）上 コードペン.

GoogleはヘッダータグのHTMLをスキャンして、ページの内容をWebブラウザーに通知するため、ヘッダータグを調べて、HTMLのヘッダーが正しくフォーマットされているかどうかを確認することが重要です。

WordPressやHubSpotなどの一部のブログプラットフォームには、ツールバーにヘッダータグを作成するオプションがあるため、ヘッダータグを追加するたびに、ソースコードやHTMLを掘り下げる必要はありません。

次回Webサイトの投稿を作成するときは、関連するヘッダータグを追加すると、SEOに影響するかどうか、および読者が情報をどのように理解しているかを確認してください。

私が使用するのが好きな良いテストは、ブログやマーケティングについてあまり知らない親しい家族に投稿を送ることです。 部外者のフィードバックを使用し、公開する前に私の文章を理解できるかどうかを尋ねることで、投稿をわかりやすくフォーマットすることができます。

ヘッダーを使用すると、ユーザーの読みやすさや検索エンジンのクロール性に役立つため、ページや投稿を作成するときにヘッダーを使用しない理由はありません。 検索エンジンのランキング、トラフィック、ページの時間にジャンプが見られることもあります。

編集者注：この投稿は元々2020年XNUMX月に公開され、包括的に更新されています。

ソース：https：//blog.hubspot.com/marketing/header-tags