Czy duszki CSS są złe dla SEO?

18

W dzisiejszych czasach często to, co zostało osiągnięte za pomocą <img>znacznika, jest teraz wykonywane za pomocą czegoś takiego jak <div>z obrazem tła CSS za pomocą „duszka” CSS i przesunięcia.

Zastanawiałem się, jaki wpływ ma na SEO, ponieważ skutecznie tracimy altatrybut (który jest indeksowany przez Google) i utknęliśmy w atrybucie „tytuł” (który, o ile rozumiem, nie jest indeksowany).

Czy to znaczna wada?

seo css

— UpTheCreek
źródło

25

Z tego powodu duszki CSS powinny być używane tylko do elementów dekoracyjnych - należy stosować <img>do elementów specyficznych dla strony i używać duszek do elementów dekoracyjnych, które nie są kontekstowo odpowiednie do prezentowanej treści.

Jeśli potrzebujesz obrazu przycisku do elementów nawigacyjnych, sensowniej jest dodać ten obraz jako tło w łączu nawigacyjnym, a nie w następujący sposób:

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

(tzn. wszędzie tam, gdzie treść obrazu jest zbędna do treści tekstowej na stronie lub treść obrazu można najlepiej opisać jako „dekorację”)

Jako dodatkowy bonus oddzielania elementów szablonu witryny jako duszków, będziesz mógł później zmienić „skórkę” witryny, zmieniając arkusz stylów zamiast nadpisywać stare pliki obrazów projektowych lub przepisując wszystkie znaczniki HTML.

— danlefree
źródło

Zgadzam się z twoimi punktami i dodam, że jednym z głównych celów / zalet duszków jest ich szybsze ładowanie dla ogólnej wydajności witryny. Szybsze ładowanie stron JEST WSPARCIE, aby pomóc w rankingach SEO, więc myślę, że jest to kwestia odpowiedniego narzędzia do właściwej pracy.

— digit1001

@ digit1001 - czy boty takie jak googlebot naprawdę ładują wszystkie zasoby związane ze stroną?

— UpTheCreek

4

Możesz używać <img>tagów ze sprite'ami CSS:

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

sprite.png może być przezroczystym pikselem 1x1 skompresowanym do <50 bajtów.

Styl:

#someSprite {

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

}

W ten sposób uzyskujesz optymalizację wydajności od duszków i zachowujesz alttagi.

— JohnnyFaldo
źródło

Jestem prawie pewien, że jeśli Google może skomponować wyszukiwarkę ze złożonymi procesami do pozycjonowania i zindeksowania 30 bilionów stron, może wykryć asercje 1 x 1 pikseli.

— Ricky Boyce

1

@ Ricky B Nie chodzi o to, czy to wykryją, ale jeśli dziwnie ukarają cię za to, co byłoby dziwne, ponieważ ukaraliby cię za skrócenie czasu ładowania strony i liczby żądań, co zwykle zachęcają: )

— JohnnyFaldo,

1

altTag jest przereklamowany. Myślę, że zbyt wiele osób robi wszystko, aby mieć alttagi na swoich stronach. Nie wierzę, że boli cię, że nie masz. Po prostu upewnij się, że jeśli masz img, masz altprzypisany tag.

Uważam, że czas ładowania i wydajność witryny mają większy wpływ na SEO niż alttagi, a każde żądanie obrazu lub żądania HTTP spowoduje spowolnienie witryny. Celem duszka CSS jest minimalizowanie tych żądań i przyspieszenie czasu ładowania strony.

— Brandon Buttars
źródło

5

altTekst jest również wykorzystywane przez czytniki ekranu. Myślę, że możesz mieć inne zdanie na temat tekstu alternatywnego, jeśli jesteś ślepy.

— MikeTheLiar

1

Zwykle używam ikonek do dekoracyjnych ikon, nie mają one nic wspólnego ze stroną jako całością, więc dla SEO jest w tym przypadku w porządku. Każdy zestaw obrazów, które mają takie same wymiary, które nie wpływają na znaczenie strony, są dobrymi kandydatami do ikonek CSS.

— Agile Noob
źródło