text-indent vs google

Jakiś czas temu zgłosił się do mnie klient, który ma sklep. Chciał abym poprawił jego pozycje w Google. Podczas sprawdzania informacji serwowanych przez Google takich jak: site, linki zauważyłem ciekawą rzecz związana z czytaniem przez Google arkuszy stylów. Ĺťeby było ciekawiej sytuacja się powtórzyła na jeszcze jednej stronie. Ĺťeby było jeszcze ciekawiej, to prawie dwa lata temu zrobiłem test na czytanie przez Google CSS.

Każda z tych dwóch stron posiadała jeden lub kilka elementów na stronie, które korzystały z atrybytu text-indent. Atrybut ten robi wcięcie w pierwszym akapicie (elementu blokowego) tekstu (przykład w tym akapicie). Prócz tradycyjnego wykorzystania tego atrybytu często stosuje się do pewnej sztuczki, gdy grafika trochę poniesie fantazja i stworzy na przykład menu z niestandardową czcionką, której zwykły użytkownik nie ma jak na przykład tutaj – http://www.digart.pl/zoom/2712452/Ksiegarnia_Hermes.html

Sztuczka

Wtedy z linku robi się element blokowy, nadaje się mu tło, a tekst ukrywa (a dokładniej - przesuwa). Gdy jest efekt po najechaniu, to sprawa jest jeszcze prostsza, bo tylko wystarczy zmienić pozycje teł dla a:hover. Przykładowy element menu w tym przypadku będzie wyglądał tak:

#menuBox a.menu {
	display: block; 
	width: 90px; 
	height: 50px; 
	text-indent: -3000em;
	background: url(link-do-tla.jpg);
}

Dzięki temu, Internauta widzi działającą i klikającą grafikę (tekst zostanie przesunięty w lewo o 3000em, a 1em to 16 pikseli) i na tym koniec. Bo jak się okazuje, Google tego też nie widzi.

Gdy sprawdzałem ilość zaindeksownych stron (site:) to pojawiały się wszystkie strony prócz tych, do których prowadził link wewnętrzny z ujemnym atrybutem text-indent. Dlatego w tym wpisie na końcu umieszczę trzy akapity, które będą miały różne wartości ujemne. Różne, bo może być jeszcze tak, że Google nie czyta tylko tych, które mają bardzo dużą ujemną wartość. Myślę, że ten prosty test pokaże ostatecznie czy Google czyta ten atrybut lub nie i czy był to przypadek.

Rozwiązaniem jest powtórzenie menu na dole strony lub stworzenie sitemapy. Można dać też obrazek zamiast tej sztuczki, ale to już nie będzie PRO ;).

textztextalign-3000em

textztextalign-300em

textztextalign-30em