Sztuczki CSS a SEO
Krew mnie zalewa jak czytam w różnych miejscach informacje, że pewne techniki CSS tzw. best practicies są powodami masowych filtrów (specjalnie wyolbrzymiam). Szczególnie nacisk jest kładziony na atrybut text-indent. Dzisiaj postaram się wytłumaczyć o co tutaj chodzi.
Tak się składa, że stoję po dwóch stronach barykady: front-end'u i SEO. Prawda jest taka, że Ci pierwsi nie przejmują się wpływem technik CSS na SEO w porównaniu do tych drugich. Zacznijmy od tego problematycznego text-indent.
text-indent (źródło)
Ta właściwość CSS została stworzona aby formatować tekst. text-indent pozwala stworzyć wcięcie w pierwszej linii tekstu. Wg specyfikacji przeglądarka powinna renderować wcięcie jako puste pole. Wartości jakie może przyjmować text-indent to konkretne wartości w pikselach, em'ach oraz jako wartość procentowa. Ten akapit w którym widzisz opis tego atrybuta CSS posiada wcięcie 20 pikseli.
Jak na razie wszystko jest zrozumiałe. Problem (w zależności od punktu widzenia) jest w tym, że text-indent może przyjmować wartości ujemne.
Koderzy często korzystają z text-indent aby "schować" tekst, który jest zastępowany (najczęściej) grafiką poprzez css sprites. Jest to częsta i bardzo popularna sztuczka. Korzystają z niej takie portale jak: onet, wp, interia. Zgodnie z tym co piszą inni, to za takie "black seo" portale powinny dostać filtr!
Jest jednak subtelna różnica pomiędzy okolicznościami w jakich stosowany jest text-indent przez obie strony. Front-endowcy z tego atrybutu zrobili użyteczną sztuczkę dzięki której strona może wyglądać atrakcyjniej zaś pozycjonerzy (a może spamerzy?) wykorzystują ją aby ukryć pozycjonowane linki lub nasycenie słowami kluczowymi.
Cufón
Podobno jest to kolejna przyczyna przez którą strona może polecieć w dół. Powód? Podczas renderowania skrypt cufón korzysta z ujemnego text-indent. Patrz wyżej. Zobaczcie sobie strony z listingu tych stron które korzystają z cufona. Wszystko z nimi jest OK (nie mają filtra?).
Jeżeli mimo wszystko chcesz używać customowych fontów na stronie, to polecam zapoznać się z Web Fonts od Google - one nie używają ujemnego text-indent.
Podsumowanie
Nie odbierajcie tego wpisu jako atak. Stworzyłem kilkadziesiąt (jak nie -set) szablonów do stron (sklepy, blogi, serwisy) i wszystkie z nich mają się dobrze. Nie twierdzę, że filtry mogą się zdarzyć. Jeżeli się zdarzają to tylko w bardzo hardcorowych sytuacjach, gdzie ukrywa się dziesiątki słów kluczowych czy linków - by dla Google było OK, a użytkownik tego nie widział.
Pisząc o hardcorowych sytuacjach mam na myśli to:
Wiem, że Matt Cutts "doradza" jak tworzyć stronę, ale bez przesady, ktoś taki nie będzie mi mówił jak mam tworzyć CSS i HTML.
Jak optymalizuję stronę pod kątem ilości zapytań http, to logo będzie częścią css sprites. Koniec, kropka.
Komentarze 17
Ĺšródło wzburzenia leży u mnie na blogu ;)
@Zgred - nie tylko, w kilku miejscach byo to :)
U mnie też :) - no cóż, zacytowałem tylko to, co pisze pracownik Google.
W moim odczuciu może jeszcze menu jakoś "przejdzie"
Zgred - możesz potwierdzić, że po usunięciu tego w przypadku menu domena "wróciła"?
Potrzebny jest jasny dowód i tyle - co jednak w kontekście wielu zmian może być dowodem tylko 'na chwilę"...
Podobnie ktoś promujący metody SEO takie jak "Blast na 530 dobrych, prywatnych precli" nie będzie mi mówił co jest optymalne dla wyszukiwarek.
Sprawę rostrzygnał by konkretny test. Na jednej ze swoich stron, która przypuszczam jest zafiltrowana, wstawiony był text-indent -999px. Kilka dni temu pozbyłem się tego elementu i czekam na efekty.
@sitesbook: Robiłem podobny test: http://blog.shpyo.net/116/text-indent-vs-google.html
@Colin: Przecież nie każę Ci korzystać z usługi - możesz na mnie donieść Google, przyjąć do wiadomości lub cokolwiek innego. Pokazuję ludziom możliwości zdobywania linków. Jak dostanę na łapkach za to - cóż, to też opiszę na blogu. Na blogu poruszam różne tematy.
@sitesbook: daj znać :)
@shpyo: Wiem, że Matt Cutts "doradza" jak tworzyć stronę, ale bez przesady, ktoś taki nie będzie mi mówił jak mam tworzyć CSS i HTML."
Hm... Ciekawe podejście prezentujesz. Czy się nam podoba, czy nie, ktoś inny ustala zasady gry. Komu się nie podoba, ma do wyboru ... Binga np. :) ALbo sprawdzanie co chwilę, czy jakaś strona nie wpadła w filtr/dostałą bana. O ile w przypadku swoich stron można sobie na to pozwolić, o tyle już gdyby dotyczyło to stron klientów uznałbym to za nieodpowiedzialne.
Mam prośbę - możesz zainstalować na blogu jakąś wtyczkę mobilną? Ĺšle sie go czyta na Androidzie :(
Wg. mnie:
- Text-indent może zaszkodzić ale w przypadku kiedy ktoś ewidentnie chowa tam zbyt długą treść,
- Cufon na pewno jest OK i nie szkodzi no chyba, że ktoś "dowali" mnóstwo treści pod każdą z liter (nawet nie wiem czy się tak da),
- Atrybut ALT jest potrzebny z wielu powodów, chociażby z takiego, że część programów dla niedowidzących wykorzystuje ALT do "tłumaczenia" obrazka o czym pisałem tutaj: http://wojtektylus.com/mysl-alternatywnie/
Są przypadki kiedy ludzie pchają na potęgę całe elaboraty w ALT, wtedy kto wie? Ja nie spotkałem z karami się za upychanie treści w ALTach :)
Pozdrawiam
@Sebastian: jak Matt powie, że strony, które nie będą miał stopki w H1 to będzie filtr, to też będzie tak robił? :)
Co do wersji mobilnej - pracuję nad tym.
Jak mam dostać za takie coś filtr, to wstawię, aby go nie mieć :)
Dla mnie sprawa wydaje się śmieszna. Google potrafi np. w narzędziach dla webmasterów przypominać o aktualizacji Wordpressa gdy używasz wersji z dziurami, a nie potrafi wyczaić tak popularniej techniki jak Cufon stosowanej od X lat ? To było by bardzo dziwne, tym bardziej, że nie jest to technika niszowa.
Co do nagrania to Matt nie mówi nic o cufonach. Na poziomie kodu da się wykryć czy stosowany jest cufon czy chamskie przesunięcie do ukrycia danych o_O
text-indent jest powszechnie używane przez czołowych frontendowców, np. Paul Irish (Pracuje m.in dla Google Chrome). W HTML5 Boiletplate jest nawet jest specjalna klasa css "ir" (image replacement) z wykorzystaniem text-indent
Ofkoz jeżeli przeginasz pałę to możesz dostać filtr, ale jak używasz tego do podmiany logo, albo innych zwykłych zastosowaniach to nic się nie stanie.
Ja jednak nigdy nie mogłem się skusić to takich praktyk. Jednak moralność i chęć pokazania prawdziwego wartościowego kontekstu jest silniejsza.
Również podpisuje się pod takim stosowaniem text-indent - jeżeli tekst przykrywamy grafiką. Stosowałem to na wielu stronach i jak dotąd bez problemów.
Ja również nie stosuję text-indent ukrywanego. Jakoś nie było ku temu okazji ;)
Te techniki nadal są skuteczne? :)