web-dev-qa-db-ja.com

CSSスプライトはSEOに悪いですか？

最近では、<img>タグで達成されたことが、CSS 'Sprite'とオフセットを使用して設定されたCSS背景画像を持つ<div>のようなもので行われることがよくあります。

alt属性（Googleによってインデックス付けされている）を事実上失い、 'title'属性（私が理解していない限り、インデックス付き）。

これは重大な欠点ですか？

seocss
18
UpTheCreek

CSSスプライトは装飾要素にのみ使用する必要があります この理由-ページに固有の要素には<img>を使用し、表示されるコンテンツに文脈的に関連しない装飾要素にはスプライトを使用します。

ナビゲーションアイテムにボタン画像が必要な場合は、次のようなマークアップではなく、その画像をナビゲーションリンクの背景として追加することをお勧めします。

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

（つまり、画像のコンテンツがページ上のテキストコンテンツと重複する場合、または画像のコンテンツは「装飾」と最もよく説明できる場合）

サイトテンプレート要素をスプライトとして分離する追加のボーナスとして、古いデザインイメージファイルを上書きしたり、すべてのHTMLマークアップを書き換えたりする代わりに、スタイルシートを変更することで、サイトの「スキン」を後で変更できます。

25
danlefree

CSSスプライトで<img>タグを使用できます。

<img alt="description of image" src="images/Sprite.png" id="someSprite" />

Sprite.pngは、50バイト未満に圧縮された1x1の透明ピクセルにすることができます。

スタイル：

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

これにより、スプライトからパフォーマンスの最適化を取得し、altタグを保持します。

4
JohnnyFaldo

altタグは過大評価されています。自分のページにaltタグがあることを確認するために邪魔にならない人が多すぎると思います。私はそれを持っていないことはあなたを傷つけるとは思わない。 imgがあるかどうか、altタグが割り当てられているかどうかを確認するだけです。

読み込み時間とサイトのパフォーマンスは、altタグよりもSEO全体に大きな影響を与え、すべての画像リクエストまたはHTTPリクエストに対して、サイトの速度が低下すると考えています。 CSSスプライトの目的は、これらのリクエストを最小限に抑え、ページの読み込み時間を短縮することです。

1
Brandon Buttars

私は装飾的なアイコンにスプライトを使用する傾向があり、それらはページ全体とは何の関係もないので、その場合はSEOで問題ありません。ページの意味に寄与しないすべて同じサイズの画像セットは、CSSスプライトの適切な候補です。

1
Agile Noob