Webサイトのタイトル/ロゴおよびSEOのH1対H2対その他
フロントエンド開発者は、WebサイトのタイトルまたはロゴをH1タグに、タイトルをH2に配置するのが一般的です。しかし、ほとんどの場合、ページ/記事のタイトルはコンテンツの価値を伝えるため、より重要です。したがって、私の質問は、セマンティックおよびSEOの観点からの最善のアプローチは何かということです。例：
- ロゴ-H1、タイトル-H1
- ロゴ-H1、タイトル-H2
- ロゴ-H2、タイトル-H1
- ロゴ-その他のタグ、タイトル-H1
他のバリアントがより大きな効果があると思われる場合に提供します。
通常、ロゴやサイトタイトルをH1に入れません。私が見たいのは、各ページがドキュメントであることです。このドキュメントは、ページタイトルとメインヘッダーに反映されている特定の主題に関するものです。 Webサイト自体は、ドキュメントの単なる発行者です。したがって、セマンティック上、サイトのロゴまたは名前を各ページの主要な見出しとして使用することは正しくありません。ロゴは目立つように表示され、ユーザーがどこにいるのか、ブランド化の目的でユーザーに思い出させますが、実際にはコンテンツやドキュメントの一部ではありません。
つまり、ニュースストーリーを見ると、コーナーに小さなニュースチャンネルのロゴが表示される場合がありますが、ニュースストーリーのタイトルは「CNN」や「BBCニュース」ではありません。見出しは、ストーリーを公開するネットワークではなく、ストーリーに関するものです。同様に、雑誌を読むとき、見出しでは記事のタイトルのみが使用され、出版物の名前は使用されません。
また、ロゴ/サイト名にH1タグを使用し、ドキュメントのタイトルに1つを使用することは、意味的に正しくありません。見出しは、ページ上のコンテンツの階層構造を定義します。サイト名に1つ、ドキュメントタイトルにもう1つを使用すると、このページには2つのメインセクションがあります：「mydomain.com」と「contact us」。
Googleのページ＃37を参照してください SEOレポートカード ドキュメント：
ほとんどの製品メインページには、上記の例のように1つの
<h1>タグを使用する機会がありますが、現在は他の見出しタグ（この場合は<h3>）またはより大きなフォントスタイルのみを使用しています。より大きく見えるようにテキストをスタイリングすると、同じ視覚的表現が得られる可能性がありますが、<h1>タグと同じ意味を検索エンジンに提供しません。製品の名前および/またはその機能に関するいくつかの単語は、製品のメインページの<h1>タグに含めると便利です。
Googleが提供するサービスを分析したところ、GoogleはH1に固有のページ固有の値が表示されると予想しているという結論に達しました（図リンクされたドキュメントではこれを示しています）。
ここに良い根拠があります： あなたのロゴは<h1>ではなく画像です
意味的に、<h1>はページタイトルに使用する必要があり、ページタイトルはページごとに一意である必要があります。ロゴまたはサイト名は、notページタイトル（ホームページを除く）です。
ロゴ/サイト名は、おそらく「heading」のIDを持つプレーンなdivにある必要があります。または、HTML5を使用している場合は<header>タグ。
IMOは、ページに1つのH1のみが存在する必要があります。また、H1は常にH2の前に配置する必要があります-コンテンツの正しい階層を維持するためです。
ロゴはすべてのページに繰り返し表示されることが多く、あなたが言うように、ほとんどのページではほとんどの場合タイトルがより重要です。
ホームページでは、次の使用を検討します。
ロゴ/タイトル-H1 [、タイトル-H2]
ホームページでは、ロゴがタイトルになっている可能性があります。
ただし、後続のすべてのページでは
ロゴ-他のタグ、タイトル-H1
ロゴが背景画像として適切な場合でも。
H1タグで本当に探しているのは、ページタイトルまたはこのページをユニークにするものです。その中に画像を使用している場合、分解性のためにフォールバックメソッドを使用する必要があります。
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
この方法で、H1（多くの場合、ロゴ領域として誤用される）に表示されるように画像を設定し、劣化したインターネットエクスペリエンスを使用する人々のために、その中にまだ良いコンテンツを保持できます。また、SEOの価値も高くなります。
これは、実際に行われているプラクティス（およびテンプレート）のために、すばらしい質問です。
個人的には、次の点を考慮して、「101の概要」ロジックを参照します。
H1はタイトルのようなものであり（HTMLタイトルを補完したいことは確かです）、ページに1つのタイトルしかないのと同様に、ページごとに1つだけにする必要があります
H2は、I.、II。、III。などのアウトラインのローマ数字のようなものです。
H3は、A.、B.、Cに相当するアウトラインです。
多くの場合、このロジックの実際の使用をWebページに正確に適用するのは困難です。非常に多くの偶発的な情報があり、その階層にロールアップしません。しかし、あなたが座ってその論理でそれを壊そうとするなら、私は規律に利益があると感じます。
私はh1メインタイトルの男です。そしてメインタイトルは装飾されたサイト名、またはあなたがそれを呼ぶように、ロゴです。ここにポイントがあります-ウェブサイトのヘッダーでは、ロゴは実際にはロゴではなく、イラスト付きサイトのヘッダーです。デザイナーはロゴとしてデザインしたいだけです。
ロゴ-> H1の何が問題になっていますか？
<div>Google</div>
<h1>About Us</h1>
さて、h1は訪問者にその内容を伝える最も重要なセクションであるため、h1はあまりにも具体的であるため、訪問者はページを理解できません。誰について？
<h1>Google</h1>
<h2>About Us</h2>
このページはGoogleに関するものです。ここに私たちについてのセクションがあります。参照してください-質問はありませんか？すべてが明確です。
第二のポイント。
ページ構造。サイトのメインの見出しをdivまたはpに入れると、それに関連付けるものは何もありません。
<p>Google</p>
<h1>About us</h1>
h1が後に続く場合、「About U」をGoogleに関連付けるにはどうすればよいですか？ H1の後に来るものはすべてそれに関連付けられているので、前のものではありません。
<h1>Google</h1>
<h2>About Us</h2>
「About Us」はGoogleに属します。質問無し。
第三のポイント。
HTMLはDESCRIBE情報の言語です。したがって、情報を表示せずに説明します。そして、各ページは独立しています。したがって、ページ間に関連がないため、1つのページを記述します。個々のページをリンクするだけのリンク。
<p>Google</p>
<h1>About us</h1>
このページは当社についてです。誰/何ですか？不明。 「About us」と呼ばれるものを記述しているだけです。
<h1>Google</h1>
<h2>About Us</h2>
このサイトはグーグルについて説明しています。そして、私たちについてのセクションがあります。 Us =おそらくgoogle。構造がそのように記述しているためです。
私は私のポイントをしたことを望む:)
PS！ h2-h1-h3は非論理的であるため使用できません。したがって、大きな失敗になります。 w3cが許可されていないと言ったからといって、それを有効にしません。それは非論理的です、考えてみてください。
ロゴを見出しにネストする必要はありません。header内の単純なリンク画像で十分です。ただし、サイトのタイトルとページ/記事のタイトルは両方とも<h1>でなければなりません。この記事は有益です： HTML5時代の複数のH1タグについての真実 。
h2タグとしてのロゴ？
SitePoint（www.sitepoint.com）をブラウジングしていました。これは、通常のページとブログが混在するWordPressブログです。一般に、ページタイトルはh1タグとして、ロゴはh2として設定されていることがわかりました。これは、www.blogs.sitepoint.com/category/design /のようなブログページで確認できます。サイトを巡回すると、さまざまなセットアップが見つかります。メインの製品ページ（http://products.sitepoint.com/）の例として、私はh1タグを見つけることができませんでした。そのページから、特定の製品をクリックして詳細情報www.sitepoint.com/books/design2/を表示すると、h1がページタイトル、h2がロゴであることがわかります。典型的なWebページはブログに似ています（www.sitepoint.com/help/を参照）。この場合、FAQの主題はすべてh2タグです。
トム・ロジャース