Webサイトのタイトル/ロゴおよびSEOのH1対H2対その他


31

フロントエンド開発者は、WebサイトのタイトルまたはロゴをH1タグに、タイトルをH2に配置するのが一般的です。しかし、ほとんどの場合、ページ/記事のタイトルはコンテンツの価値を伝えるため、より重要です。したがって、私の質問は、セマンティックおよびSEOの観点からの最善のアプローチは何かということです。例:

  • ロゴ-H1、タイトル-H1
  • ロゴ-H1、タイトル-H2
  • ロゴ-H2、タイトル-H1
  • ロゴ-その他のタグ、タイトル-H1

他のバリアントがより大きな効果があると思われる場合に提供します。

回答:


37

通常、ロゴやサイトタイトルをH1に入れません。私が見たいのは、各ページがドキュメントであることです。このドキュメントは、ページタイトルとメインヘッダーに反映されている特定の主題に関するものです。Webサイト自体は、ドキュメントの単なる発行者です。したがって、セマンティック上、サイトのロゴまたは名前を各ページの主要な見出しとして使用することは正しくありません。ロゴは目立つように表示され、ユーザーがどこにいるのか、ブランド化の目的でユーザーに思い出させますが、実際にはコンテンツやドキュメントの一部ではありません。

つまり、ニュースストーリーを見ると、コーナーに小さなニュースチャンネルのロゴが表示される場合がありますが、ニュースストーリーのタイトルは「CNN」や「BBCニュース」ではありません。見出しは、ストーリーを公開するネットワークではなく、ストーリーに関するものです。同様に、雑誌を読むとき、見出しでは記事のタイトルのみが使用され、出版物の名前は使用されません。

また、ロゴ/サイト名にH1タグを使用し、ドキュメントのタイトルに1つを使用することも、意味的に正しくありません。見出しは、ページ上のコンテンツの階層構造を定義します。1つをサイト名に、もう1つをドキュメントタイトルに使用すると、このページには2つのメインセクションがあります:「mydomain.com」と「contact us」。


Chris Conwayからの回答をサポートしたいと思います。100ページのサイトタイトルごとにH1を追加しても意味がありません。サイトタイトルではなくページタイトル内のキーワードでウェブサイトを検索する必要があります。さらに、すべての大きなウェブサイト(cnn.com、amazon.com、ebay.com)を見ると、サイトタイトルのh1タグがありません。Googleウェブマスターのブログコードもご覧ください。サイトタイトルにはH1タグがなく、ページタイトルはH2です。そのため、サイトタイトルのクラスとページタイトルのH1またはH2でdivタグまたはスパンタイトルを使用することをお勧めします。
ニコラスゲリネット16年

1
@NicolasGuérinet:投稿してから変更されたかどうかはわかりませんが、eBayのロゴは実際にはの中にありますが、メインページにh1のみあります。特定のリストに移動すると、リストのタイトルはになりh1ます。
ネルソンロザーメル

22

GoogleのSEOレポートカードドキュメントのページ37を参照してください。

ほとんどの製品メインページには、<h1>上記の例のように1つのタグを使用する機会がありますが、現在は他の見出しタグ(<h3>この場合)またはより大きなフォントスタイルのみを使用しています。より大きく見えるようにテキストをスタイリングすると、同じ視覚的表現が得られるかもしれませんが、<h1>タグと同じ意味を検索エンジンに提供しません。製品の名前および/またはその機能に関するいくつかの単語<h1>は、製品のメインページのタグに含めると便利です。

Googleが提供するものを分析した結果、GoogleはH1に固有のページ固有の値が表示されることを期待しているという結論に達しました(リンクされたドキュメントの図はこれを示しています)。


素晴らしい答えと非常に便利です。

5

正当な理由は次のとおりです。ロゴは<h1>ではなく画像です

意味的に<h1>は、ページタイトルに使用する必要があり、ページタイトルはページごとに一意である必要があります。ロゴまたはサイト名はページのタイトルではありません(おそらく、ホームページは別として)。

ロゴ/サイト名は、おそらく「heading」のIDを持つプレーンなdivにある必要があります。または、<header>HTML5を使用している場合はタグ。


1
コンテンツ用でない限り、<img />タグは使いたくありません。すべてのページのヘッダーに繰り返されるWebサイトのロゴは、コンテンツではなくレイアウトの詳細です。
-cherouvim

1
@cherouvim:画像は<img>タグである必要はありません<h1>。タグの背景ではなく、背景にすることができます。ただし、リンクされた記事が主張しているように、ロゴページコンテンツとして見ることできます。
不機嫌なヤギ

4

IMOは、ページに1つのH1のみが存在する必要があります。そして、H1は常にH2の前にあるべきです-コンテンツの正しい階層を維持するために。

ロゴは多くの場合、すべてのページに繰り返され、ほとんどのページで言うように、タイトルはほとんど常に重要です。

ホームページでは、
ロゴ/タイトル-H1 [、タイトル-H2]を使用することを検討
しますただし、ホームページではロゴがタイトルになります。

ただし、後続のすべてのページでは、
ロゴ-その他のタグ、タイトル-H1
必要に応じてロゴを背景画像として使用します。


1
ほとんどのサイトは、家庭と内側のページに同じレイアウトを使用しているという事実によると、私は個人的には第二の溶液好む
イリアン・イリーブ

@llianはい、すべてのページでどちらか一方を選択する必要がある場合、2番目の解決策が望ましいでしょう。ただし、ホームページのタイトルにウェブサイトのタイトル/ロゴを組み込むことは一般的です-誰かがウェブサイトのタイトル/会社/ロゴを具体的に検索したときにどのページが見つかるべきでしょうか?ホームページ?
MrWhite

3

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の価値も高くなります。


2

これは、実際に行われているプラ​​クティス(およびテンプレート)のため、非常に大きな質問です。

個人的には、次の点を考慮して、「101の概要」ロジックを参照します。

H1はタイトルのようなものです(HTMLタイトルを補完したいことは確かです)。ページに1つのタイトルしかないのと同様に、ページごとに1つしかありません。

H2は、アウトラインのローマ数字のようなものです。I。、II。、III。など。

H3は、A.、B.、Cに相当するアウトラインです。

多くの場合、このロジックの実際の使用をWebページに正確に適用するのは困難です。非常に多くの偶発的な情報があり、その階層にロールアップしません。しかし、あなたが座ってその論理でそれを分解しようとすると、私は規律に利益があると感じます。


1

私は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が許可されていないと言ったからといって、それを有効にしません。それは非論理的です、考えてみてください。


0

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タグです。

トム・ロジャース


0

ロゴを見出しにネストする必要はありません-のシンプルなリンク画像でheader十分です。ただし、サイトのタイトルとページ/記事のタイトルの両方はである必要があります<h1>。この記事は有益です:HTML5時代の複数のH1タグについての真実

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.