HTML5 i CSS3 a pozycjonowanie

Specyfikacja hiperteksowego języka HTML5 jest udoskonaleniem standardu 4.01 z 1999r. Wprowadza szereg nowych znaczników semantycznych pozwalających zbudować logiczną strukturę strony, które przy współpracy z CSS3 pozwolą na zmniejszenie ilości kodu w stosunku do treści właściwej strony, co na pewno zostanie pozytywnie rozpatrzone przez Googleboty. Nowo udostępnione znaczniki są już w większości poprawnie interpretowane przez najnowsze wersje liczących się przeglądarek, również na urządzeniach mobilnych.

Reguły kaskadowych arkuszy stylów nie mają znaczącego wpływu na SEO, ponieważ odpowiadają za ostylowanie wizualnej prezentacji strony, która oddzielona jest od struktury treści, a to na podstawie wartości contentu witryna lokowana jest w rankingu.

Segmentacja strony

Stosowanie znaczników div w całym dokumencie nie stanowi dla crawlerów żadnej informacji o tym, co znajduje się wewnątrz znacznika. Tagi HTML5, które roboty rozpoznają jako sekcje dokumentu to: header, nav, article oraz footer, które odpowiadają kolejno za nagłówek, menu nawigacyjne, treść właściwą strony oraz stopkę dokumentu.

Znacznik section wyróżnia niezależne fragmenty contentu wewnątrz znacznika article, natomiast aside pozwala zamieścić tekst poboczny równolegle do treści właściwej – mogą to być reklamy, lista odnośników zewnętrznych do polecanych stron parterskich lub widgety portali społecznościowych. Niezależny plik .css umożliwia zdefiniowanie wyglądu poszczególnych elementów strony bez ingerencji w kod HTML dzięki selektorom, które łączą elementy struktury zdefiniowane w znacznikach z właściwościami w CSS.

Wewnątrz wszystkich strukturalnych znaczników HTML5 możliwe jest dodanie tagu time, którego atrybuty informują roboty o dacie publikacji treści osadzonych w środku znacznika. Specyfikacja piąta pozwala również określić nowe typy odnośnika a w atrybucie rel jako zależności między stroną bierzącą a zakotwiczoną – stanowi to informację dla robotów, jak mają traktować linkowaną stronę. Ciekawe warianty wartości atrybutu to:

<a rel=”wartość” href=”URL“>opis</a>

·         alternate – link prowadzi do strony będącej innym wydaniem tego samego dokumentu, na przykład w innej wersji językowej lub dostosowanym do wydruku;

·         prev oraz next – informują roboty o logicznej zależności między stronami składowymi w ramach stronicowania.

Elementy graficzne

Jeżeli tekst umieszczono jako grafikę – na przykład w menu nawigacyjnym strony – nie jest on czytelny dla robotów indeksujących, chyba że dodano tekst alternatywny w atrybucie alt opisujący zawartość obrazu. Obecnie możliwe jest zdefiniowanie w kodzie praktycznie dowolnych kształtów (techniką wektorową SVG) i gradientów (przejścia kolorów) bez użycia programu graficznego. Tak ostylowane elementy graficzne, oprócz tego, że zawierają tekst rozumiany przez roboty, zostaną wyrenderowane przez przeglądarkę po stronie użytkownika bez konieczności pobierania plików graficznych z serwera, co nierzadko może przyspieszyć załadowanie strony przy mniejszym zużyciu transferu danych.

W technologii CSS3 powstają także efektowne animacje funkcjonujące bez JavaScript, który, jak już wcześniej wspomniano, nie jest dokładnie analizowany przez boty, a przy domyślnie wyłączonej obsłudze skryptów w nieaktualnej wersji przeglądarki internetowej sprawi, że dany element przestanie spełniać swoje zadanie – na przykład przycisk submit nie pozwoli na wysłanie formularza.

Znacznik figure wyróżnia obrazy, tabele, rysunki itp., do których kod odwołuje się wewnątrz publikowanego dokumentu, a opisowy figcaption nadaje kontekst uploadowanym elementom. Najlepiej, gdy jest stosowany równocześnie z atrybutem alt.

Zastosowanie HTML5 w połączeniu z JavaScript i CSS3 może z powodzeniem zastąpić interaktywne obudowanie strony w technologii Flash. Rozwiązanie to eliminuje konieczność instalacji wtyczek i zapewnia kompatybilność z przeglądarkami zainstalowanymi na urządzeniach mobilnych. Jest to rezultat procesu zapoczątkowanego przez firmę Apple, która jako pierwsza zrezygnowała z wspierania plików Flash na swoich urządzeniach przenośnych.