X

Nagłówki HTML – H1, H2, H3… – podstawy optymalizacji strony

naglowki-h1-h2-h3Spoś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ć):

naglowki-przyklad-uzycia

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
googlewebmastercentral.blogspot.com 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.

24 komentarze To “Nagłówki HTML – H1, H2, H3… – podstawy optymalizacji strony”

  1. Mariusz 29 kwietnia 2013 at 14:30

    "Taka strategia jest przyjęta w standardowym motywie najpopularniejszego systemu do zarządzania treścią, tj. WordPressie"

    To moim zdaniem jest błąd na głównej sitename H1 -> title wpisu H2, we wpisach h1 title, sitename h2. H1 we wpisach powinno wyróżniać frazę, na którą ów wpis będzie pozycjonowany a dodając do tego h1 w sitename poniekąd rozdzielamy istotność na dwa elementy.

    • Redakcja 30 kwietnia 2013 at 10:16

      Czasami warto przekazać część istotności np. nazwie firmy, jeśli chcemy, żeby ta firma była kojarzona z zawartymi treściami. Owszem, wtedy prawdopodobnie tytuł podstrony traci na wartości, ale za to nazwa witryny/firmy rośnie (oraz ew. jej główne hasło, jeśli umieścimy je obok nazwy). W indywidualnych przypadkach preferowane będzie jedno lub drugie rozwiązanie.

  2. Łukasz Piernikarczyk 29 kwietnia 2013 at 16:03

    Bardzo ciekawy i kompletny artykuł – oby tak dalej – czekam na kolejne "odcinki" z tej serii. Dobra robota.

  3. Zgred 29 kwietnia 2013 at 17:49

    Protestuję !!! Mam H1 i H2 i H3 !!!

    • Redakcja 30 kwietnia 2013 at 09:52

      Faktycznie, na stronie głównej h2 występuje, skupiliśmy się bardziej na stronie blogowej. Tabelka została poprawiona, przepraszam za pomyłkę.

  4. Paweł 29 kwietnia 2013 at 18:55

    Witam,

    bardzo dobry artykuł, uporządkowaliście sporo wiedzy. Moglibyście dodać jeszcze info, jak tworzyć nagłówki, w sensie umieszczania słów kluczowych, ich ewentualnego powtarzania, stosowania liczby pojedynczej i mnogiej, czy synonimów.

    Zastanawiają mnie 2 detale, o których piszecie:

    1) "Nie powinno się też korzystać z niższych tagów, jeśli nie używa się wyższych." A dlaczego nie? Czy uważacie to za ścisłą regułę? Jasne, że najczęściej stosujemy h1, potem h2  i jeśli nam pasuje, to h3, czasami h4 (rzadziej h5 i sporadycznie h6). A co w przypadku, gdy mamy dość krótki tekst, oczywiście h1, a później np. trzy niewielkie bloki tekstowe poprzedzone h3? Moim zdaniem, nagłówki powinniśmy stosować zgodnie z wagą elementów na stronie i ewentualną ilością tekstu w blokach. Jeśli zatem uznam, że lepiej pasuje w danym przypadku zastosowanie jednego h1 i trzech nagłówków h3, dlaczego miałby to być błąd? I czy jest to błąd stricte semantyczny, czy może znacie jakąś wypowiedź pracowników Google, że tak ma być?

    2) "Wskazane jest jednak, aby to nie była identyczna treść jak w tytule, bowiem grozi to zarzutem upychania słów". Tego nie rozumiem. Skąd takie podejście? Czym poparte?
    Title jest ukryte w kodzie – widać go w wynikach wyszukwiania czy na belce przeglądarki. Ale w widocznej dla usera części strony nie ma go. Moim zdaniem, tę funkcję pełni właśnie nagłówek h1. W zasadzie dokładnie tę funkcję: mówi użytkownikowi, o czym jest strona, jaki jest jej… tytuł. Dlaczego zatem powtórzenie title miałoby być błędem? Zarówno title, jak i h1 (zresztą tak napisaliście, z czym oczywiście się zgadzam) mówi, o czym jest strona, określa jej zawartość. Zatem jaki jest sens na siłę różnicować h1 i title?

    Będę wdzięczny, jeśli odniesiecie się do moich rozważań. Raz jeszcze dzięki za art.

    Paweł

     

    • Redakcja 30 kwietnia 2013 at 09:54

      1) Nagłówki powinny być stosowane zgodnie z wagą, ale według hierarchii. Jeśli poza głównym tekstem na stronie występują tylko 3 bardzo mało ważne bloki, to w dalszym ciągu powinny one otrzymać h2. Jeśli z czasem pojawi się coś ważnego, to dostanie h2, a te bloki zostaną zdegradowane do h3. Luka w kolejności nagłówków to błąd semantyczny, mimo że Google umie sobie z tym poradzić (tutaj przytoczę wypowiedź Matta Cuttsa na temat kolejności nagłówków, ale tyczy się to również np. takiego braku w hierarchii: http://www.youtube.com/watch?v=iR5itZlq8sk). Najczęstszym przytaczanym argumentem odnośnie tego są czytniki dla niewidomych, ale na pewno są to bardzo ekstremalne przypadki. Ale jaki byłby cel nieużywania h2 w tym przypadku? Nagłówki mają pokazywać, że coś jest mniej ważne od czegoś, ale w żadnym wypadku nie sugerują jak bardzo. A jeśli te trzy przykładowe bloki nie są związane z główną treścią, to w tym celu HTML5 wprowadza tag aside, którym się je otacza, i można wtedy spokojnie użyć h2.

      2) Każde powtórzenie dokładnie identycznej frazy w dwóch miejscach może być uznane przez Google za duplikację treści. Tagi title i h1 nie są inne – zarówno porównując oba na jednej podstronie, jak i poszczególne tagi title na kolejnych podstronach. Tutaj jest krótka, lecz treściwa, odpowiedź na to zagadnienie na forum seomoz: http://www.seomoz.org/q/page-title-h1-or-slight-variation-of-it
      Byłoby dobrze powołać się na testy, ponieważ w różnych kontekstach może to być różnie traktowane. Gdyby ktoś słyszał lub czytał o takich testach, to prosimy o sygnał.

      A jeśli chodzi o tworzenie nagłówków, to piszemy o takich zagadnieniach w nieco wcześniejszym artykule: http://blog.memtor.pl/sila-perswazyjnych-tytulow/

      • Mareczek 19 października 2016 at 18:55

        Po przeczytaniu komentarza i odpowiedzi mam niezłą zagwozdkę odnośnie powtórzeń. Nazwy produktów na sklepie są u mnie automatycznie ustawiane jako h1, a do tego dodawałem opis produktu, w którym również znajdowała się ta sama nazwa z nagłówkiem h2. Tak to po prostu najlepiej się wizualnie prezentuje, a bez nagłówka w opisie robi się optycznie nieciekawie. Tyle że, jeśli dobrze rozumiem, jest to seo-strzał w kolano? Powinienem chyba albo zrezygnować z dodawania h2 w opisie albo za każdym razem „na siłę” przeredagować nazwę produktu (sic!), aby była unikalna?

        • Redakcja 24 października 2016 at 12:10

          Jeśli ustawiłeś w opisie h2 tylko dlatego, że „Tak to po prostu najlepiej się wizualnie prezentuje, a bez nagłówka w opisie robi się optycznie nieciekawie” to przecież możesz ustawić to w kodzie styli css.

  5. Kamil Kondel 29 kwietnia 2013 at 20:13

    Długi artykuł i ciekawy. Czego mi zabrakło? Przede wszystkim podobnych postów, przynajmniej z 3 do danego artykułu – tego zabrakło na obrazku. Najlepszy układ dla art. MOIM zdaniem następujący:

    H1 – 1

    H2 – np. 3 (przy dłuższym artykule) śródtytuły

    H3 –  w treści i w 3 podobnych postach

    H4 – H6 – wszelkie inne nie związane z postem.

    Pozdrawiam

     

    • Redakcja 30 kwietnia 2013 at 09:55

      "Podobne posty" wymagają dodatkowych wtyczek i są przez to dość rzadko używane, dlatego nie umieściliśmy tego. Ale obrazek to tylko przykład – jeśli na stronie znajdują się inne elementy, to oczywiste jest, że układ nagłówków będzie inny.

  6. Janusz Asto 29 kwietnia 2013 at 23:02

    Moja prywatna strona zawiera w logo dodatkowy nagłówek H1. Czy to jest poprawnie?

    • Redakcja 30 kwietnia 2013 at 09:56

      W artykule odnosimy się do tego. Na pewno nie jest to błędem (vide wypowiedź Matta Cuttsa), ale nie ma 100% pewnej odpowiedzi, jak powinno być idealnie.

  7. Filip 7 maja 2013 at 11:20

    Śmieszne jest to, że autor sam się nie stosuje do swoich wytycznych. Oprócz H1 nie ma w artykule już nic więcej:>

    • Łukasz Przestrzelski 7 maja 2013 at 11:36

      Nie jest to prawda – na stronie artykułu jest zarówno h1, h2, jak i nawet h3. W artykule nie ma ani słowa o tym, że w treści artykułu muszą być używane podtytuły, które nadawałyby się do wyróżnienia nagłówkami. Nagłówki mają być używane zgodnie z hierarchią danej podstrony. My akurat nie używamy podtytułów, z racji niedużego rozmiaru treści artykułu. Gdyby było inaczej, wtedy na pewno miałyby one nagłówek h2.

  8. halohalo.pl 4 października 2014 at 16:10

    Ktoś mi napisał, że mam: Brak struktury nagłówków, h1, h2, itp… ale jak to poprawić w przypadku forum które jest na określonym skrypcie?

    • Marek Olas 8 października 2014 at 12:43

      Jeśli nie ma możliwości ustawienai tego w panelu konfiguracji, aby to zrobić należałoby majstrować w kodzie.

  9. grzegorz 31 grudnia 2014 at 20:54

    "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)" – w takim razie jakiego tagu mamy użyć aby zmnienić czcionki nagłówków h1 h2 w CSS ?

    • Marek Olas 5 stycznia 2015 at 09:36

      Należy używać tagów html H1, H2, H3 i tak dalej, natomiast w CSS-ie możemy zmieniać wartości ich atrybutów, które formatują wygląd treści ujętych w tych tagach, tj. wielkość, kolor, rodzaj czcionki itd.

  10. Sebastian 10 maja 2015 at 14:59

    Rozumiem że każdy artykuł jakie piszemy zaczynamy od nagłówka H1 ?
    Ktoś kiedyś mi powiedział że nagłówka H1 nie stosujemy bo jest nim Tytuł spisu jaki robimy – ten generowany przez WordPress

    Jak wiec jest ?

    • Marek Olas 11 maja 2015 at 09:58

      WordPress zapewnia obsługę podstawowych zagadnień SEO i wdraża na bieżąco sprawdzone praktyki w tym zakresie, więc używając go nie należy dodatkowo powielać tych rozwiązań, które ta platforma wspiera.

  11. magdalenaspyra 4 czerwca 2015 at 20:40

    Wtyczki do wordpressa pomagają w tym zakresie. Oprócz tego znalazłam ciekawą aplikację na Adroida – Website and SEO Toolbox- która sprawdza optymalizację  wew. witryny – aktualnie ją testuję i jestem jak narazie zadowolona. Ktoś ją także przetestował?

    • Marek Olas 9 czerwca 2015 at 12:22

      Nie testowaliśmy tego narzędzia, sam używam urządzenia mobilne od Apple’a. Jeśli chodzi o narzędzia polecam: http://blog.memtor.pl/narzedzia-seo/

  12. et-cetera 19 kwietnia 2017 at 16:07

    Bardzo dobry artykuł dotyczący pozycjonowania