Spośród czynników rankingowych on-site (optymalizacja strony), związanych z treścią i strukturą strony internetowej, najważniejszym jest – jak wiadomo – tytuł. Drugim w kolejności należałoby typować – w zależności od struktury witryny – linkowanie wewnętrzne lub wystąpienia słów kluczowych w najważniejszym strukturalnie elemencie strony, tj. w nagłówkach. Ale jak używać nagłówków? Dokonaliśmy analizy wielu stron mogących uchodzić za wyznaczające najlepsze trendy w tym zakresie. Okazało się, że nie ma jednego powszechnego sposobu ich stosowania.
Podstawową zasadą jest hierarchia. Element najwyższego poziomu powinien być oznaczony tagiem h1, kolejny pod względem ważności – h2 itd. Wszystkie z nich posiadają już standardowe wielkości czcionki, ale nic nie stoi na przeszkodzie, żeby je dostosować do własnych potrzeb w CSS-ie (zgodnie z wymaganiami W3C nie należy używać do tego tagu font lub podobnych), należy jednak pamiętać, żeby ważniejszy nagłówek był zawsze większy od mniej istotnego. Nie powinno się też korzystać z niższych tagów, jeśli nie używa się wyższych. Nie ma za to żadnych sztywnych zasad, jeśli chodzi o to, co powinno być nimi wyróżnione, wszystko zależy od struktury danej strony/podstrony. Nie ma też nakazu używania wszystkich od h1 aż do h6 – jeśli nie ma potrzeby, to wystarczy samo h1 i h2.
Tag h1 powinien wskazywać na główną zawartość danej strony. Utarło się, że powinien wystąpić tylko raz na jednej podstronie, ale samo Google twierdzi, że jeśli struktura tego wymaga, to można go użyć więcej niż raz. Ten nagłówek jest ważny dla pozycjonowania – wyszukiwarki zwracają na niego szczególną uwagę. Dodanie słowa kluczowego w nagłówku spowoduje wzrost pozycji w wyszukiwarce. Co zatem wpisać w tym tagu? Najlepiej frazę podobną jak w title, gdzie staramy się umieścić skondensowaną zawartość strony pod kątem wyszukiwarki – ten element spośród czynników on-site ma podstawowe znaczenie. Wskazane jest jednak, aby to nie była identyczna treść jak w tytule, bowiem grozi to zarzutem upychania słów. W przypadku strony głównej to jest akurat dość jasne: nazwa strony, nazwa firmy, logo graficzne (pamiętając wtedy o użyciu alternatywnego tekstu w atrybucie alt). Jeśli chodzi o podstrony, nie zawsze sprawa jest taka oczywista, ale najczęściej jednak można łatwo ocenić. Gdy jest to witryna firmowa, to podstrony najczęściej mają sprecyzowany cel: kontakt, portfolio itd. W sklepach internetowych są to wyrażenia identyfikujące kategorie produktów lub same produkty. Na stronie blogowej z kolei jest to tytuł wpisu – to on jest najbardziej głównym elementem podstrony i to on powinien być oznaczony jako h1. Często stosowaną praktyką jest użycie h1 dwukrotnie: raz w miejscu opisanym powyżej, a drugi raz tak samo jak na stronie głównej, czyli w nazwie lub logo strony. Taka strategia jest przyjęta w standardowym motywie najpopularniejszego systemu do zarządzania treścią, tj. WordPressie.
W przypadku kolejnych nagłówków już nie ma takich ostrych zasad, można je używać, ile tylko potrzeba, z zachowaniem zdrowego rozsądku oraz hierarchii. Nie należy wykorzystywać nagłówków zamiast listy, jeśli kolejne elementy tej listy nie posiadają pod sobą żadnej treści. Podobnie nie powinno się ich używać do menu. Nagłówki powinny zawierać w treści słowa kluczowe, na które się pozycjonujemy. Oczywiście nie można przesadzać z ich ilością, ale lepiej dodać jedno słowo kluczowe, niż nie mieć żadnego, szczególnie w tych najważniejszych nagłówkach. Nie jest właściwe zawieranie w nich linka do obecnej strony. Mają one być logiczne, poprawne gramatycznie, łatwe do przeskanowania przez urządzenia dla niewidomych oraz związane z tekstem, który poprzedzają. Kolejność powinna być zachowana, ale w razie potrzeby można od tego odejść – jeśli przed główną treścią strony znajdują się jakieś mniej ważne elementy (np. lewy pasek boczny), to można użyć w nich np. h2 przed pierwszym h1 użytym dopiero tuż przed główną treścią. Na koniec optymalizacji warto skorzystać z narzędzia do analizy semantyki strony, żeby sprawdzić, czy nagłówki są użyte poprawnie.
Specyfikacja HTML5 podaje, że h1 może służyć jako nagłówek każdej kolejnej sekcji na stronie ("Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level."). W związku z tym mogłoby ich być nawet kilkanaście. Jednak najwyraźniej sprawiało to problemy, ponieważ w specyfikacji HTML5.1, w tym samym zdaniu, część o h1 zniknęła, a została tylko sugestia, żeby w poszczególnych sekcjach używać nagłówków wysokości odpowiedniej do zagnieżdżenia sekcji. Należy nadmienić, że zarówno HTML5.1, jak i nawet HTML5.0 to języki, które jeszcze nie obowiązują, a prace nad nimi zostaną ukończone dopiero w najbliższych latach.
Poniżej przykład, w jaki sposób można wybrać poszczególne elementy do wyróżnienia nagłówkami (kliknij, żeby powiększyć):
Na naszym blogu zastosowaliśmy trochę inny układ niż w powyższym przykładzie. H1 zawiera logo oraz tytuł artykułu, h2 – tytuły artykułów na stronie głównej oraz nagłówek do komentarzy na podstronach, h3 z kolei zawiera nagłówki kolejnych widgetów w panelu bocznym. Inne blogi i strony o pozycjonowaniu używają nagłówków w różny sposób:
Adres strony | H1 na stronie głównej i podstronach | H2 na stronie głównej i podstronach |
---|---|---|
antyweb.pl | na głównej brak, w artykule – jego tytuł |
na głównej tytuł artykułu, w artykule – brak |
www.lexy.com.pl | brak | tytuły artykułów oraz widgetów w panelu bocznym |
seo.zgred.pl | nazwa blogu oraz tytuły artykułów | na głównej tytuły podstron, na głównej blogu oraz w artykułach – brak |
blog.seo-profi.pl | nazwa blogu | tytuły artykułów oraz działów |
www.blog.gdaq.pl | na głównej brak, w artykule – jego tytuł |
tytuły i podtytuły artykułów oraz widgetów w panelu bocznym |
www.cezzy.pl | na głównej brak, w artykule – jego tytuł |
tytuły artykułów oraz widgetów w panelu bocznym |
www.planeta-seo.pl | nazwa blogu | tytuły artykułów |
blog.shpyo.net | na głównej brak, w artykule – jego tytuł |
na głównej brak (występuje dopiero h3 – tytuły artykułów), w artykule – podtytuły |
googlewebmaster |
brak | daty artykułów oraz tytuły widgetów (tytuły artykułów są dopiero w h3) |
www.seomoz.org/blog | nazwa blogu oraz tytuły artykułów | podtytuły artykułu |
www.seo.com/blog/ | na głównej nazwa blogu, w artykule – jego tytuł |
na głównej tytuły artykułów, w artykule – podtytuły |
Zadziwiająca jest różnorodność rozwiązań, a także to, jak wiele z tych stron nie korzysta z dobrodziejstw nagłówka h1, między innymi oficjalny blog Google, zawierający wskazówki dla webmasterów (sic!).
Jeśli chodzi o największe sklepy internetowe, to każdy ze sprawdzanych (merlin.pl, www.agito.pl, www.euro.com.pl, allegro.pl i www.empik.com) w h1 umieszczał nazwę produktu lub podkategorii sklepu (zależnie od podstrony), a dwa z nich dodatkowo nazwę sklepu. Natomiast na stronie głównej wszystkie umieściły nazwę sklepu.
Rozwój języka HTML dąży do lepszego przedstawienia semantycznych aspektów treści w strukturze kodu. Kolejne wersje HTML-a zawierają coraz więcej tagów sugerujących, czym dokładniej jest ich zawartość: strong, em, cite, acronym, czy też dużo najnowszych z wersji HTML5, takich jak: header, footer, article, nav. W zakresie używanego od dawna zestawu tagów nagłówkowych, od h1 aż do h6 sytuacja się nie zmieniła. Należy je stosować, pamiętając o ich dedykowanym sposobie użycia.
Fotograf na chrzest Warszawa
dla mnie cały czas to trudne zagadnienia, dzięki za wiedzę którą cały czas pogłębiam 😉