CSS spriteları SEO için kötü mü?

18

Günümüzde genellikle bir <img>etiketle gerçekleştirilen şey, şimdi <div>bir CSS 'sprite' ve bir ofset kullanılarak bir CSS arka plan görüntüsü kümesine sahip bir şeyle yapılır .

Onun SEO üzerinde ne tür bir etkisi olduğunu merak ediyordum, etkin bir şekilde alt(Google tarafından endeksli) özniteliğini kaybettik ve 'başlık' özniteliği ile sıkışmış (anladığım kadarıyla endekslenmemiş).

Bu önemli bir dezavantaj mı?

seo css

— Zor durumda
kaynak

25

CSS spriteları yalnızca bu nedenle dekoratif elemanlar için kullanılmalıdır - <img>bir sayfaya özgü elemanlar için kullanın ve sunulan içerikle bağlamsal olarak alakalı olmayan dekoratif elemanlar için sprite kullanın.

Gezinme öğeleriniz için bir düğme görüntüsüne ihtiyacınız varsa, bu görüntüyü aşağıdaki gibi biçimlendirme yerine gezinme bağlantısına arka plan olarak eklemek çok daha mantıklıdır:

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

(ör. görüntünün içeriği sayfadaki metin içeriğine yedek olduğunda veya görüntünün içeriği en iyi "dekorasyon" olarak tanımlanabilir)

Site şablonu öğelerini sprite olarak ayırmanın ek bir bonusu olarak, daha sonra eski tasarım görüntü dosyalarının üzerine yazmak veya tüm HTML işaretlemenizi yeniden yazmak yerine stil sayfasını değiştirerek sitenin "kaplamasını" değiştirebilirsiniz.

— danlefree
kaynak

Puanlarınıza katılıyorum ve spriteların temel amaçlarından / avantajlarından birinin, genel site performansı için daha yüksek yük hızları olduğunu ekleyeceğim. Daha hızlı sayfa yüklemeleri SEO sıralamasında yardımcı olmak için ÖNERİLİR, bu yüzden doğru iş için doğru araç meselesi olduğunu düşünüyorum.

— digit1001

@ digit1001 - googlebot gibi botlar bir sayfayla ilişkili tüm kaynakları gerçekten yüklüyor mu?

— UpTheCreek

4

<img>Etiketleri CSS sprite'larıyla kullanabilirsiniz :

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

sprite.png <50 bayta kadar sıkıştırılmış 1x1 saydam piksel olabilir.

Stil:

#someSprite {

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

}

Bu şekilde performans optimizasyonunu spritelardan alırsınız ve altetiketlerinizi saklarsınız .

— JohnnyFaldo
kaynak

Google'ın 30 trilyon sayfayı sıralamak ve dizine eklemek için karmaşık süreçlere sahip bir arama motoru oluşturabildiğinden eminim, 1x1 piksel alt iddialarını tespit edebilir.

— Ricky Boyce

1

@Ricky B Bunu tespit edip etmeyecekleri değil, ancak sizi tuhaf bir şekilde cezalandırırlarsa, sayfa yükleme süresini ve istek sayısını azaltmak için sizi cezalandırırlardı, bu da teşvik etme eğilimi olan bir şeydir: )

— JohnnyFaldo

1

altEtiket abartılıyor. Bence çok fazla kişi altsayfalarında etiket olduğundan emin olmak için kendi yollarından çıkıyor . Sana sahip olmamak acıyor. Bu sadece img, size altatanmış bir etiketiniz olduğundan emin olmakla ilgilidir.

Yükleme süresi ve site performansının genel olarak SEO üzerinde altetiketlerden daha büyük bir etkiye sahip olduğuna ve her resim isteği veya HTTP isteği için site yavaşlayacağına inanıyorum . Bir CSS hareketli grafiğinin amacı, bu istekleri en aza indirmeye ve sayfa yükleme sürenizi hızlandırmaya yardımcı olmaktır.

— Brandon Buttars
kaynak

5

altMetin de ekran okuyucular tarafından kullanılır. Bence kör olsaydınız farklı bir alt metin fikriniz olabilir.

— MikeTheLiar

1

Dekoratif simgeler için sprite kullanmak eğilimindedirler, onlar bir bütün olarak sayfa ile ilgisi yoktur, bu yüzden SEO için bu durumda para cezası. Sayfanın anlamına katkıda bulunmayan aynı boyutlara sahip olan herhangi bir görüntü kümesi, CSS sprite'ları için iyi adaylardır.

— Çevik Noob
kaynak