Hタグの使用、特にH1の使用は常に物議を醸す問題であり、私たちの研究に値する問題でもあります。私の前任者の経験に基づいて、私はHタグの理解に基づいてこの記事を書き、それがすべての人に役立つことを望んでいます。 Hタグとは何ですか？
W3Cは、H1-H6タグがタイトルを定義できることを指摘しています。 H1は最大のタイトルを定義します。 H6は最小のタイトルを定義します。
タイトルタグとしてH1、H2、H3、H4、H5、H6は、重要性に応じて減少します。このような原則に従って、ページの階層的な関係をより明確にし、検索エンジンがページのトピックコンテンツなどをより適切にクロールして分析できるようにする必要があると思います。理解を深めるには、次のコードを参照してください。
<body> <h1>第1レベルのタイトル</h1> <p>段落</p> <div> <h2>セカンドレベルのタイトル</h2> <p> ... </p> <div> <h3>セカンドレベルタイトル</h3> <p> ...
ブラウザのデフォルトスタイルも重要性に基づいて減少し、フォントサイズはH1からH1からH6に大幅に変化します。さまざまなブラウザのスタイルにはいくつかの違いがあります。この違いのため、通常、CSSを使用してレイアウトでそれらを統合します。
どのように使用しますか？現在、写真に示すように、ロゴでH1を使用することを好む多くのWebサイト（Taobao、Sina、Sohuなどの有名なWebサイトを含む）
誰もがこれを使用する理由がないわけではありませんが、実際には非常に多くの利点があります。ページ全体の内容を要約しており、ロゴはボディに非常に近いため、検索エンジンがトピックを最速で獲得するのが便利になり、セマンティックの観点からも正確です。
もちろん、すべてのWebサイトがロゴでH1を使用しているわけではありません。 Neteaseの使用は、より特別な例です。
NetEaseはディスプレイを設定します。それを隠すスタイルなし。これは、H1を置く場所を知らないという矛盾を解決するだけでなく、SEO最適化の役割を果たします。
そして、TencentのホームページH1は、写真に示されているように、見出しのニュースです。
上記の例から、H1の使用は主要なWebサイトで異なることがわかります。 H1のどこに置くのですか？それは常に物議を醸す問題でしたが、私はそれをどこに置くべきかについて絶対的な答えがあるとは思いません。 Webページのポジショニング、タイプ、ユーザーの検索習慣などの要因に基づいて考慮すべきだと思います。たとえば、ニュースWebサイトの場合、H1を見出しのニュースに載せることができます。包括的なポータルWebサイトについては、H1をロゴに載せることができます。ユーザーは通常、会社の名前を検索したいので、会社のウェブサイトがH1をロゴに載せることができる場合。ウェブサイトのスローガンがある場合は、H1をスローガンに載せることもできます。これも良い選択です。要するに、最高に合ったものを選ぶことが最高です。
H2に関しては、写真に示すように、私は通常、ホームページの大きな列でそれを使用するのが好きです。
コンテンツページの場合、私は記事のタイトルにH2を与えることに慣れており、列のタイトルは図に示すようにH3で表されます。
図に示すように、H3は主に列のタイトルに使用されます。
R＆F製品のホームページで使用されるHタグは、明確な階層的関係を持っているだけでなく、製品コンテンツの重要性も強調しています。これは、検索エンジンにとっても非常に有益です。
図に示すように、次の例も非常に興味深いものです。
コラムタイトルはH2を使用し、ニュースタイトルはH1を使用します。階層的な関係に従って注文が逆転した場合、それは間違っていません。実際にHタグを使用する場合、コンテンツの重要性に基づいて定義することもできます。したがって、基本的な理論を柔軟に適用することによってのみ、その効果を最大化できます。
上記の例からは、Hタグの使用が非常に柔軟であり、これらの使用法に限定されないことを確認することは難しくありません。当社のアプリケーションでは、重要性を低下させるという原則に従い、1つの例から学び、それを他の側面に適用する必要があります。同じことがH4-H6にも当てはまります。
いくつかを合計しました参照資料、フロントエンド制作の専門家、よく知られたウェブサイトなどによるHタグの理解とアプリケーションに基づいて、私はあなたにいくつかの参照値をもたらすことを望んで、以下の仕様を要約しました。
H1ファーストレベルのタイトル
これは最優先事項を表し、その位置はページ内のキーワードの位置と同じくらい重要です。通常、ウェブサイトのタイトルや見出しで使用されており、一部の大きなWebサイトもロゴで使用されています。 H1コードは複数で記述できますが、実際には意味的に一意です。ページに1回だけ表示されるかどうかが最善です。
H2レベル2タイトル
主に、ページのメインコンテンツの記事タイトルと列のタイトルに表示されます。 3列構造は一般に中央にあり、2列構造は一般に重要な側面にあります。 H3で使用できます。
H3レベル3タイトル
一般的に、メインページのサイドバー。 H4は補助的であり、あまり頻繁に表示されません。
ページレベルの関係は深すぎることはないため、H4、H5、H6は一般に少ないように見えます。