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

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

私は事実上、alt属性（Googleによってインデックス付けされている）を失い、「タイトル」属性（私が理解している限り、インデックス付けされていない）に固執しているため、SEOにどのような影響があるのだろうと思っていました。

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

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

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

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

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

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

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

<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タグを保持します。

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

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

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