web-dev-qa-db-ja.com

会社名のSEOの場合、代替テキストのロゴを使用するか、CSSで会社名のdivを画像に置き換えますか？

これらの選択肢のうち、Google検索エンジンに対する否定的なものはどれですか？

<h1>
    <a href="#" title="Company Name">
        <img src="img/logo.png" alt="Logo" title="Company name" />
    </a>
</h1>

または

<h1>
    <a href="#" title="Company Name">
        Company Name
    </a>
</h1>

を伴う

h1 { background-image: url('../img/logo.png'); }
h1 a { text-indent: -9999px; }

または

h1 { background-image: url('../img/logo.png'); }
h1 a { color: transparent; user-select: none; }
seocssimageshtml5hidden-text
2
ghaschel

ロゴはコンテンツであり、プレゼンテーションではありません。したがって、CSSではなくHTMLに含める必要があります。したがって、img要素を使用することが適切な選択です。

ただし、alt値の「Logo」を使用しないでください。代わりに会社名（ロゴの略称）を使用してください。そして、title属性を省略できます。 （そして、title要素のa属性は、会社名を繰り返す代わりに、おそらく「ホームページへ」のようなものを言う必要があります。）

<img src="img/logo.png" alt="ACME Inc." />

また、HTML5ドキュメントのアウトラインを気にする場合、サイト名（ロゴまたはテキスト）は、bodyセクショニングルートに属するh1要素に含める必要があります（そのため私は同意しませんこれを行うべきではないことを述べた文）。¹そうでない場合は、アウトラインにラベルのないトップレベルエントリを取得します（セクション要素を常に明示的に使用する必要があります。そうしないと、アウトラインが間違ってしまいます）。

<body>

  <!-- this represents the document heading, which should not be confused with the main content heading -->
  <h1>
    <a href="#" title="To ACME’s homepage">
      <img src="img/logo.png" alt="ACME" />
    </a>
  </h1> 

  <main>
    <article>
      <!-- this represent the main content heading -->
      <h2>…</h2> <!-- may also use <h1> instead -->
    </article>
  </main>

</body>

¹詳細については、他の回答をご覧ください。

4
unor

これはさまざまなスタックでさまざまな形式で何度も尋ねられていますが、Googleはbackgroundを使用するときにtext-indentの使用法を理解しているため、正しい答えも間違った答えもありません...

ALTタグを使用して適切な画像を使用することは、コードのセマンティックを維持し、アクセシビリティを向上させるためのより良い方法であると広く同意されています。たとえば、2009年のStack Overflowに関するこの回答には、同じ質問に対する最大の賛成票（170以上）が含まれています。

ソース

オプションがありません：

<h1>
  <a href="http://stackoverflow.com">
      <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

GoogleのMatt Cuttsは、YouTubeのQ＆Aビデオでこれについても議論し、基本的にはALTタグを使用してテキストインデントを使用しない方が良いと述べました。

ソース

YouTubeトランスクリプト：オーケーリチャードMオーストラリアからの質問：「サイトに会社のロゴがある場合、含める最善の方法は何ですか？ SEO目的のためのロゴへのテキスト、すべてのタグCSSの非表示または重要性」

はい、CSSを隠しているように、すべてのタグで使用する方がはるかに良いことは問題ではありません、それまでに9000ピクセル以上が地獄タグが多かれ少なかれ構築されていることを知っています誰もが公平になりますが、ええ、何年も前に進みます。これは、これが私のロゴ検索エンジンでそれを読んで使用できるテキストであることを知っているという素晴らしい方法です。

CSSなどを使用して非表示にするのは、完全に有効で完全に有効な方法である場合、うまく機能しますか？.

SEOではなくPNGスプライトのテキストインデント

しかし、多くの人が言っているように、多くのWebサイトは、主にページ圧縮にPNGスプライトを使用しているため、テキストインデントを使用し続けています。たとえば、Pro Webmastersはテキストインデントを使用します。

ヘッダーでテキストインデントを使用しないでください、なぜですか？なぜなら...

したがって、text-indentを使用することは避けるべきだとは言いませんが、ヘッダータグを使用する場合は避けるべきであることに同意します。これは、 your logo ヘッダーがある場合、はヘッダー ...ではなく、あなたのロゴです。ページタイトルは実際のテキストベースのヘッダーでコンパイルする必要があります。

同じ神を繰り返してくそーh1の

h1 > a > img形式を使用すると、すべてのページで繰り返される可能性が高く、ページで複数のh1を使用する場合に問題が発生します...？それが、今日多くのトップ企業がa > imgを使用している理由です。なぜなら、最も正しい方法だからです...

h1 > a > imgまたはh1 > aをtext-indentとともに使用するのは、純粋にあなたの試みがランクを高く/すべてのページで同じフレーズをスパムするキーワードは、a対h1の場合、Googleが使用する数百のシグナルの1つであり、最も古い日付のSEOアドバイスである場合、ランクを上げることはできません。 h1が最も重要であることがわかります。単にそうではありません...マークアップのないプレーンテキストは、他のファクタリングシグナルでも同様にランク付けできます。

理想的にはコード

より最新の理想的な例は、次のようなものです。

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="http://www.example.com/">
        <img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" />
    </a>
<div>

概要

  • PNGスプライトを使用している場合、text-indentを選択できますが、h1は失われます
  • PNGスプライトを使用していない場合、ALTタグを使用しますが、再びh1を失います。
3
Simon Hayter

背景画像ソリューションではなく、<img>ソリューションを使用する必要があります。ほとんどのサイトには、ロゴの背景ではなくロゴ画像があります。Googleはそれを完全にサポートしています。標準の画像ソリューションは、アクセシビリティでも最適に機能します。

背景画像ソリューションでは、非表示のテキストやキーワードの詰め込みに対してペナルティを科せられる可能性があります。 （あなたのサイトが実際にあなたの会社名のためのものである場合、特にロゴの画像に会社名があるが、自動化されたアルゴリズムを使用している場合、あなたは決して知らないでしょう。）

会社名やロゴの周りにH1タグを使用しないでください。 h1タグは、ページごとに異なる必要があります。通常、ロゴと会社名はすべてのページで使用されます。とにかくランキングの目的でH1に会社名を使用する必要はありません。以下の理由により、あなたのサイトはあなたの会社の名前に対してはほとんど努力を払うことなくランク付けされます。

  • ドメインは会社名です
  • サイトへの多くのインバウンドリンクには、会社名がアンカーテキストとして含まれます。
  • 他の場所で会社名を使用すると、キーワードに十分な重みが付けられます。
    • ホームページのページタイトル：会社名-2007年以降のウィジェット
    • 他のほとんどのページタイトルの最後：ウィジェットガイド2015-会社名
    • 著作権のあるフッター：Copyright 2015 Company name
2
Stephen Ostermiller

最も最適化されたバリエーションとして、ほとんどのSEO関連信号を含むバリエーションを検討します。これは私の意見ではこれです：

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/" title="My Firm">
    <h1 itemprop="name">My Firm</h1>
    <img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" title="My Firm"/>
  </a>
</div>
2
Evgeniy