Czy duszki CSS są złe dla SEO?

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?

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.

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.

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.

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.