web-dev-qa-db-ja.com

バッジの画像置換のための最高のセマンティック構造とSEO最適化アプローチ？

過去には、SEOの目的とコンテンツからプレゼンテーションを分離するために、CSS画像置換技術を広範に使用しました。

しかし、 Google Webmaster ガイドラインと その他のコメント を最近読んだことから、<img>をalt属性とともにmostケース、代替がない場合のCSSイメージの置換を予約します。

たとえば、クライアントのISO9001認証を示す「バッジ」画像を表示しようとしています。私は、最善のアプローチは次のようなものをマークアップすることだと結論付けるのは正しいでしょうか...

HTML：

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS：

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}
seogooglecssimages
6
Prembo

画像ALtタグで十分な場合に、この場合にCSS画像置換を使用する理由はよくわかりません。私はSEOであり、クライアントにそのアプローチを勧めません。

GooglebotがJSまたはCSSをどの程度解析できるかは実際にはわからないのは事実ですが、除外しません（ただし、Googlebotが両方を理解していると断言することもできません）。その不確実性が問題です。

原則として、必要がない限り、このようなコンテンツを非表示にすることはお勧めしません。 1つのページにコンテンツを非表示にしても問題は発生しませんが、多くのページに渡ると、Googleでフラグを立て始め、それらのフラグの数が転換点に達すると、ランキングに何かが起こる可能性があります（特に井戸で他のことが起こっている場合）。

これはSEOコミュニティ内で議論の余地のある問題ですが、多くの人からは問題ないと言われています。 SEOmozは、一般的なSEOのコンセンサスに最適なフォーラムです。以下の記事（画像の置き換えに関する記事と反対の記事）をご覧になり、ご意見をお聞かせください。

http://www.seomoz.org/pages/search_results?q=css+image+replacement

2
Sandy Lee

alt属性を使用します。それが目的です

私がこのテクニックを大目に見ているのは、次の場合だけです：

<style>
input span { display: none; }
input { width: 50px; height: 20px; background-image: url('imgs/your-button.jpg');
</style>

<input type="submit"><span>Text</span></input>

このインスタンスでは、入力のvalue属性に画像コードを配置できないためです。

1
Anonymous

私があなただったら、デフォルトのHTMLでバッジを表示します。

page.load()の場合、JSを使用して非表示にします。

隠しコンテンツの問題については、次のことを懸念する場合があります。

  • 他のコンテンツがたくさんあり、このピースだけが非表示になっている場合でも、心配しないでください。
  • また、表示するjsがある場合、GooglebotはJSを理解するので、心配しないでください。

スタック交換Webサイトのバッジのように、まともな使用のためには正常であり、まったく問題ありません。

0
Eric Yin