Apakah sprite CSS buruk untuk SEO?

18

Saat ini sering apa yang dicapai dengan <img>tag sekarang dilakukan dengan sesuatu seperti <div>dengan gambar latar belakang CSS menggunakan CSS 'sprite' dan offset.

Saya bertanya-tanya apa efeknya terhadap SEO, karena secara efektif kita kehilangan altatribut (yang diindeks oleh Google), dan terjebak dengan atribut 'judul' (yang sejauh yang saya pahami tidak diindeks).

Apakah ini kerugian yang signifikan?

seo css

— UpTheCreek
sumber

25

Sprite CSS seharusnya hanya digunakan untuk elemen dekoratif karena alasan ini - gunakan <img>untuk elemen yang khusus untuk halaman dan gunakan sprite untuk elemen dekoratif yang tidak relevan secara kontekstual dengan konten yang disajikan.

Jika Anda memerlukan gambar tombol untuk item navigasi Anda, jauh lebih masuk akal untuk menambahkan gambar itu sebagai latar belakang pada tautan navigasi daripada markup seperti ini:

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

(mis. di mana pun konten gambar itu berlebihan untuk konten teks pada halaman atau konten gambar yang terbaik dapat digambarkan sebagai "hiasan")

Sebagai bonus tambahan untuk memisahkan elemen templat situs sebagai sprite, Anda nantinya dapat mengubah "skin" situs dengan mengubah stylesheet alih-alih menimpa file gambar desain lama atau menulis ulang semua markup HTML Anda.

— danlefree
sumber

Saya setuju dengan poin Anda dan akan menambahkan bahwa salah satu tujuan utama / kelebihan sprite adalah kecepatan muatnya yang lebih cepat untuk kinerja situs secara keseluruhan. Muat halaman lebih cepat DITUNJUK untuk membantu dengan peringkat SEO, jadi saya pikir ini masalah alat yang tepat untuk pekerjaan yang tepat.

— digit1001

@ digit1001 - apakah bot seperti googlebot benar-benar memuat semua sumber daya yang terkait dengan halaman?

— UpTheCreek

4

Anda dapat menggunakan <img>tag dengan sprite CSS:

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

sprite.png bisa berupa piksel transparan 1x1 yang dikompresi hingga <50 byte.

Gaya:

#someSprite {

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

}

Dengan begitu Anda mendapatkan pengoptimalan kinerja dari sprite - dan menyimpan alttag Anda .

— JohnnyFaldo
sumber

Saya cukup yakin jika google dapat membuat mesin pencari dengan proses kompleks untuk menentukan peringkat dan mengindeks 30 triliun halaman, ia dapat mendeteksi pernyataan alt 1x1 piksel.

— Ricky Boyce

1

@Ricky B Ini bukan apakah mereka akan mendeteksinya, tetapi jika mereka secara aneh menghukum Anda untuk itu, yang akan aneh karena mereka akan menghukum Anda karena mengurangi waktu muat halaman dan jumlah permintaan, yang merupakan sesuatu yang cenderung mereka dorong: )

— JohnnyFaldo

1

The alttag berlebihan. Saya pikir terlalu banyak orang berusaha keras untuk memastikan mereka memiliki alttag pada halaman mereka. Saya tidak percaya itu menyakitkan Anda untuk tidak memilikinya. Ini hanya masalah memastikan jika Anda memiliki img, Anda memiliki alttag yang ditetapkan untuk itu.

Saya percaya waktu buka dan kinerja situs memiliki dampak yang lebih besar pada SEO secara keseluruhan daripada alttag lakukan dan untuk setiap permintaan gambar atau permintaan HTTP, situs ini akan melambat. Tujuan dari sprite CSS adalah untuk membantu meminimalkan permintaan tersebut dan untuk mempercepat waktu pemuatan halaman Anda.

— Brandon Buttars
sumber

5

The altteks juga digunakan oleh pembaca layar. Saya pikir Anda mungkin memiliki pendapat berbeda tentang teks alternatif jika Anda buta.

— MikeTheLiar

1

Saya cenderung menggunakan sprite untuk ikon dekoratif, mereka tidak ada hubungannya dengan halaman secara keseluruhan jadi untuk SEO baik-baik saja dalam hal ini. Setiap set gambar yang Anda miliki yang semuanya memiliki dimensi yang sama yang tidak berkontribusi pada makna halaman, adalah kandidat yang baik untuk sprite CSS.

— Agile Noob
sumber