Semantyczność kodu – HTML5 i SEO
Spis treści:
Już na pewno nie raz słyszeliście o HTML5, o jego kompatybilności wstecznej, dzięki której nowa wersja umożliwia współpracę z całym otoczeniem starej wersji, o jego nowych typach znaczników <audio> i <video>, które dadzą możliwość odtwarzania na stronie dźwięków oraz klipów wideo bez dodatkowych wtyczek oraz o nowych i wycofywanych znacznikach. Niejasności w specyfikacji HTML4 dotyczące obsługi błędów przez przeglądarki zostały nareszcie doprecyzowane w specyfikacji HTML5.
Nowe znaczniki HTML, a pozycjonowanie?
W poprzednich wersjach HTML różne elementy strony określaliśmy poprzez zagnieżdżone tagi, których funkcje oznaczaliśmy używając atrybutu id. To rozwiązanie nie niosło za sobą, informacji czego dana sekcja strony dotyczy – wyszukiwarki musiały „domyślać się” po zawartości i położeniu w dokumencie. Kluczowym założeniem HTML5 jest precyzyjne określanie roli każdej części dokumentu dzięki nowym, semantycznym znacznikom HTML5. Googlebot’y odwiedzając taki dokument będą miały jasno wydzielone, czego dana sekcja dotyczy. Pozwoli to na szybsze i bardziej jednoznaczne zrozumienie witryny.
Nowe elementy określające strukturę strony:
- section – przedstawia ogólny dokument lub sekcję aplikacji. Może być stosowany wraz z h1 – h6 do określenia struktury dokumentu.
- article – reprezentuje niezależny kawałek zawartości dokumentu np: wpis w blogu, artykuł w gazecie.
- aside – reprezentuje kawałek zawartości, która jest tylko nieznacznie powiązany z resztą strony.
- header – przedstawia nagłówek sekcji.
- footer – reprezentuje stopkę dla sekcji i może zawierać informacje o autorze, prawach autorskich, itd.
- nav – reprezentuje sekcję dokumentu, która służy do nawigacji.
- figure – służy do powiązania podpisu razem z zagnieżdżoną zawartością, taką jak grafika czy wideo.
Przykładowy szkielet strony:
<!doctype html> <html> <head> <title>Tytuł strony</title> </head> <body> <header> <h1>Tytuł</h1 </header> <nav> <!-- Nawigacja --> </nav> <section id="intro"> <!-- Wstęp --> </section <section> <!—Główna treść --> </section> <aside> <!—Panel boczny --> </aside> <footer> <!-- Stopka --> </footer> </body> </html>
Różnicowanie linków
Ciekawą nowością jest możliwość określenia typów linków w dokumencie. Stosowanie nowych atrybutów rel umożliwia wskazanie wyszukiwarce sekwencji stron, które pomimo tego, że znajdują się osobno są niezwykle istotne, żeby stworzyć spójną całość informacji. Korzystając z atrybutów rel=”prev” oraz rel=”next” możemy jasno określić wyszukiwarce, że strony te powinny być traktowane jako treść ciągła. Dzięki temu maleje ryzyko uznania treści tego typu stron za powieloną. Atrybut rel=”search” umożliwia określenie linków kierujących do wewnętrznych stron z wynikami wyszukiwania.
CSS3: Zaawansowane graficznie elementy
Nowa wersja kaskadowych arkuszy stylów zapewni otrzymanie niedostępnych w poprzedniej wersji efektów graficznych, takich jak: cienie, gradienty, łatwe tworzenie eleganckich tabel, pełną obsługę przeźroczystości bez uszczerbku na samej treści witryny.
Co na temat HTML5 ma do powiedzenia Google?
Jak wynika z wypowiedzi pracowników Google na forum Google dla webmasterów, póki co wyszukiwarka nie traktuje nowych znaczników jako głównego źródła informacji o treści strony. Kiedy to się zmieni? Według Johna Muellera, jednego z pracowników zespołu Webmaster Trends Analyst w Google zależy to od szybkości popularyzacji tych technologii wśród samych webmasterów. Jeśli Google uzna, że rośnie liczba stron wykorzystujących składnię HTML5 i będzie można uznać ją jako źródło informacji dla Googlebota to przystąpią do zmiany algorytmów wyszukiwania. Czy nadszedł ten czas? Na pewno można powiedzieć, że strony stworzone ze standardami HTML5 są prawidłowo indeksowane przez roboty Google i nie mają negatywnego wpływu na pozycje w wynikach wyszukiwania.
Czy mogłaby być zamieszczona dokładna data tego wpisu??
Gdyż „20 wrz” nie mówi mi za bardzo jaki to rok;)