回答:
通常、ロゴやサイトタイトルをH1に入れません。私が見たいのは、各ページがドキュメントであることです。このドキュメントは、ページタイトルとメインヘッダーに反映されている特定の主題に関するものです。Webサイト自体は、ドキュメントの単なる発行者です。したがって、セマンティック上、サイトのロゴまたは名前を各ページの主要な見出しとして使用することは正しくありません。ロゴは目立つように表示され、ユーザーがどこにいるのか、ブランド化の目的でユーザーに思い出させますが、実際にはコンテンツやドキュメントの一部ではありません。
つまり、ニュースストーリーを見ると、コーナーに小さなニュースチャンネルのロゴが表示される場合がありますが、ニュースストーリーのタイトルは「CNN」や「BBCニュース」ではありません。見出しは、ストーリーを公開するネットワークではなく、ストーリーに関するものです。同様に、雑誌を読むとき、見出しでは記事のタイトルのみが使用され、出版物の名前は使用されません。
また、ロゴ/サイト名にH1タグを使用し、ドキュメントのタイトルに1つを使用することも、意味的に正しくありません。見出しは、ページ上のコンテンツの階層構造を定義します。1つをサイト名に、もう1つをドキュメントタイトルに使用すると、このページには2つのメインセクションがあります:「mydomain.com」と「contact us」。
h1
のみあります。特定のリストに移動すると、リストのタイトルはになりh1
ます。
GoogleのSEOレポートカードドキュメントのページ37を参照してください。
ほとんどの製品メインページには、
<h1>
上記の例のように1つのタグを使用する機会がありますが、現在は他の見出しタグ(<h3>
この場合)またはより大きなフォントスタイルのみを使用しています。より大きく見えるようにテキストをスタイリングすると、同じ視覚的表現が得られるかもしれませんが、<h1>
タグと同じ意味を検索エンジンに提供しません。製品の名前および/またはその機能に関するいくつかの単語<h1>
は、製品のメインページのタグに含めると便利です。
Googleが提供するものを分析した結果、GoogleはH1に固有のページ固有の値が表示されることを期待しているという結論に達しました(リンクされたドキュメントの図はこれを示しています)。
正当な理由は次のとおりです。ロゴは<h1>ではなく画像です
意味的に<h1>
は、ページタイトルに使用する必要があり、ページタイトルはページごとに一意である必要があります。ロゴまたはサイト名はページのタイトルではありません(おそらく、ホームページは別として)。
ロゴ/サイト名は、おそらく「heading」のIDを持つプレーンなdivにある必要があります。または、<header>
HTML5を使用している場合はタグ。
<img>
タグである必要はありません<h1>
。タグの背景ではなく、背景にすることができます。ただし、リンクされた記事が主張しているように、ロゴはページコンテンツとして見ることができます。
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>
「Uについて」をGoogleに関連付けるにはどうすればよいh1
ですか?後に来るものはすべてそれに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が許可されていないと言ったからといって、それを有効にしません。それは非論理的です、考えてみてください。
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タグです。
トム・ロジャース
ロゴを見出しにネストする必要はありません-のシンプルなリンク画像でheader
十分です。ただし、サイトのタイトルとページ/記事のタイトルの両方はである必要があります<h1>
。この記事は有益です:HTML5時代の複数のH1タグについての真実。