17 Porady SEO 5 minut czytania

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:

Spam z ujemnym text-indent.

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.



Raz w miesiącu e-mail z najlepszymi artykułami

Zdjęcie autora wpisu - Piotr Cichosz

Piotr Cichosz — autor wpisu

Frontend developer. Tworzę zaawansowane systemy webowe w JS. Swoją wiedzę nt. SEO wykorzystuję do rozwijania własnych projektów (z lepszym lub gorszym efektem). Dużo eksperymentuję i staram się określić jak bardzo można nagiąć cierpliwość algorytmów Google (:.

Zobacz podobne wpisy

Komentarze 17

author Zgred 22.02.2012 13:46:52

Ĺšródło wzburzenia leży u mnie na blogu ;)

author shpyo www 22.02.2012 13:49:17

@Zgred - nie tylko, w kilku miejscach byo to :)

author Sebastian www 22.02.2012 14:39:01

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ę"...

author Colin www 22.02.2012 15:11:05

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.

author sitesbook 22.02.2012 15:19:26

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.

author shpyo www 22.02.2012 15:51:56

@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.

author Sebastian www 22.02.2012 16:00:15

@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.

author Sebastian www 22.02.2012 19:54:11

Mam prośbę - możesz zainstalować na blogu jakąś wtyczkę mobilną? Ĺšle sie go czyta na Androidzie :(

author Wojtek www 22.02.2012 20:12:48

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

author shpyo www 22.02.2012 20:22:59

@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.

author Sebastian www 22.02.2012 21:01:50

Jak mam dostać za takie coś filtr, to wstawię, aby go nie mieć :)

author Krystian www 24.02.2012 12:06:26

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

author Nexik www 27.02.2012 22:46:13

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.

author Pacan 05.03.2012 23:36:20

Ja jednak nigdy nie mogłem się skusić to takich praktyk. Jednak moralność i chęć pokazania prawdziwego wartościowego kontekstu jest silniejsza.

author FoldPage www 12.03.2012 00:15:56

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.

author Kurier 29.03.2012 02:13:21

Ja również nie stosuję text-indent ukrywanego. Jakoś nie było ku temu okazji ;)

author Sebastian www 21.05.2015 01:00:03

Te techniki nadal są skuteczne? :)

Dodaj komentarz