Nagłówki H1, H2 i H3: jak układać strukturę tekstu dla czytelnika i wyszukiwarki

Czym są nagłówki i komu służą

Nagłówki to elementy kodu strony oznaczone od H1 do H6, które nazywają kolejne części treści i pokazują, jak te części są ze sobą powiązane. Dla osoby patrzącej na ekran nagłówek to większy, pogrubiony tekst nad akapitami. Dla przeglądarki, czytnika ekranu i robota wyszukiwarki to informacja zapisana w kodzie: tu zaczyna się nowa część i ma ona określoną rangę.

Z nagłówków korzystają trzy grupy odbiorców. Pierwsza to zwykli czytelnicy, którzy rzadko czytają stronę od pierwszego do ostatniego zdania. Najpierw przebiegają wzrokiem po śródtytułach i dopiero potem decydują, który fragment przeczytać dokładnie. Właściciel pensjonatu szukający informacji o tym, jak opisać pokoje na stronie, nie chce przedzierać się przez wstęp o historii turystyki - szuka śródtytułu, który nazywa jego problem.

Druga grupa to osoby korzystające z technologii wspomagających. Według opisu techniki H42 w materiałach W3C czytnik ekranu rozpoznaje znacznik nagłówka, odczytuje tekst jako nagłówek wraz z jego poziomem i pozwala poruszać się po stronie od nagłówka do nagłówka. Jeżeli śródtytuł jest tylko pogrubionym akapitem, taka osoba go nie znajdzie, bo program nie ma jak odróżnić go od zwykłego tekstu.

Trzecia grupa to wyszukiwarki i asystenci AI. W dokumentacji Google o tworzeniu przydatnych treści tytuły i nagłówki są opisane jako elementy, które podsumowują temat strony i pomagają użytkownikowi świadomie zdecydować o jej odwiedzeniu. Nagłówek H1 jest też jednym ze źródeł, z których Google może zbudować tytuł wyniku w wyszukiwarce, o czym piszemy niżej.

Jak działa hierarchia H1, H2 i H3

Hierarchia nagłówków działa jak spis treści książki: H1 to tytuł, H2 to rozdziały, H3 to podrozdziały należące do rozdziału, w którym się znajdują. Materiały W3C o strukturze strony ujmują to w kilku prostych regułach. Nagłówki zagnieżdża się według rangi. Najważniejszy nagłówek ma rangę pierwszą. Nagłówek o tej samej lub wyższej randze rozpoczyna nową sekcję, a nagłówek o randze niższej otwiera podsekcję należącą do sekcji nadrzędnej.

Z tych reguł wynika, w którą stronę wolno pomijać poziomy. Schodząc w głąb tekstu, nie należy przeskakiwać rangi: po H2 nie powinien następować od razu H4, ponieważ odbiorca, który słyszy lub widzi „poziom czwarty”, zakłada, że pominął jakiś poziom trzeci. W3C zaznacza, że takie przeskoki mogą dezorientować i należy ich unikać tam, gdzie to możliwe. W drugą stronę reguła nie obowiązuje: po zakończeniu podsekcji H4 kolejnym nagłówkiem może być od razu H2, bo zaczyna się po prostu nowa sekcja główna.

<h1>Wymiana instalacji wodnej w mieszkaniu - Łódź</h1>
  <h2>Kiedy wymiana instalacji jest konieczna</h2>
    <h3>Rury stalowe w starych kamienicach</h3>
    <h3>Powtarzające się przecieki</h3>
  <h2>Jak przebiega wymiana</h2>
    <h3>Oględziny i wycena</h3>
    <h3>Prace w mieszkaniu</h3>
  <h2>Ile trwa wymiana instalacji</h2>
  <h2>Najczęstsze pytania klientów</h2>

W powyższym przykładzie każdy H3 rozwija temat swojego H2. Gdyby śródtytuł „Rury stalowe w starych kamienicach” trafił pod sekcję o czasie trwania prac, hierarchia byłaby formalnie poprawna, ale myląca: ranga nagłówka mówi czytelnikowi, do czego dany fragment należy, więc musi to być prawda.

Ile poziomów nagłówków potrzeba

W większości tekstów firmowych wystarczają trzy poziomy: H1, H2 i H3. Czwarty poziom przydaje się w długich opracowaniach, dokumentacji technicznej albo regulaminach, gdzie podsekcje mają własne części. Poziomy piąty i szósty w treściach firmowych spotyka się rzadko. Z naszej praktyki wynika, że potrzeba sięgnięcia po H5 zwykle oznacza, iż tekst próbuje pomieścić kilka tematów naraz i lepiej podzielić go na osobne podstrony.

Nie ma też wymaganej liczby nagłówków. Podstawowe wytyczne SEO Google mówią wprost, że nie istnieje magiczna, idealna liczba nagłówków na stronie. Rozsądną miarą jest treść: nowy nagłówek pojawia się wtedy, gdy zaczyna się nowy wątek. Krótka strona kontaktowa może mieć H1 i dwa nagłówki H2, a obszerny opis usługi kilkanaście. Sekcja, która po nagłówku zawiera jedno zdanie, zazwyczaj nie zasługuje na własny nagłówek. Z kolei kilka ekranów tekstu bez żadnego śródtytułu to sygnał, że czytelnik nie ma się czego chwycić.

Jeden czy kilka nagłówków H1 na stronie

Najbezpieczniejszym rozwiązaniem jest jeden nagłówek H1 na stronie, choć w otwartej przez nas dokumentacji Google nie ma zakazu stosowania kilku. Google nie podaje limitu, natomiast formułuje inne, praktyczne zalecenie: ma być oczywiste, który tekst jest głównym tytułem strony. Jeden H1 to po prostu najprostszy sposób, aby ten warunek spełnić.

Zalecenie pochodzi ze strony dokumentacji o linkach z tytułami w wynikach wyszukiwania. Link z tytułem to klikalny nagłówek wyniku w Google. Wyszukiwarka ustala go automatycznie i korzysta przy tym z kilku źródeł, między innymi z treści elementu title, głównego tytułu widocznego na stronie, elementów nagłówka takich jak H1 oraz innych treści, które są duże i dobrze widoczne. Dokumentacja opisuje też sytuację problematyczną: na stronie jest więcej niż jeden duży, widoczny nagłówek i nie wiadomo, który z nich jest tytułem. Wtedy Google może użyć w linku z tytułem pierwszego z nich. Jako sposób wyróżnienia głównego tytułu dokumentacja podaje większą czcionkę i umieszczenie go w pierwszym elemencie H1 na stronie.

Co to oznacza dla właściciela strony? Sklep z Poznania, którego szablon oznacza jako H1 jednocześnie logo, hasło na banerze i nazwę kategorii, sam utrudnia wyszukiwarce wybór. W wynikach zamiast „Buty trekkingowe damskie” może pojawić się hasło z banera, które nic nie mówi o zawartości strony. Więcej o tym, skąd Google bierze tytuł wyniku, piszemy we wpisie o tym, jak pisać tytuł strony i meta opis.

H1 a element title - to nie to samo

Nagłówek H1 jest widoczny na stronie, nad treścią. Element title znajduje się w kodzie strony i wyświetla się na karcie przeglądarki oraz, najczęściej, w wynikach wyszukiwania. Dokumentacja Google zaleca, aby każda strona miała własny tytuł w elemencie title, a osobno - wyraźny główny tytuł widoczny na stronie. Oba teksty mogą brzmieć podobnie, ale nie muszą być identyczne: title bywa krótszy i zawiera nazwę firmy, H1 może być pełniejszy.

W WordPressie sprawa jest zwykle rozwiązana przez motyw. Dokumentacja bloku Nagłówek podaje, że w większości przypadków jako H1 wyświetlany jest tytuł wpisu lub strony, a kolejne bloki nagłówków dodaje się jako H2, H3 i dalsze, przy czym zależy to od motywu i szablonu strony. Wniosek praktyczny: w treści wpisu nie należy wstawiać własnego H1, jeżeli motyw już go tworzy z tytułu, bo na stronie pojawią się dwa.

Gdzie umieścić H1

Materiały W3C pokazują dwa dopuszczalne układy. W pierwszym nagłówek rangi pierwszej jest pierwszym nagłówkiem w dokumencie. W drugim głównym nagłówkiem nie jest nazwa serwisu, tylko tytuł treści, a elementy stałe, takie jak menu, mogą mieć swoje nagłówki przed nim. W obu przypadkach H1 nazywa to, co jest na danej podstronie wyjątkowe. Stąd reguła, którą stosujemy w projektach: H1 opisuje temat tej konkretnej podstrony i jest inny na każdej z nich, a logo oraz nazwa firmy w nagłówku serwisu nie są oznaczane jako H1 na podstronach.

Co o nagłówkach mówi dokumentacja Google

Dokumentacja Google traktuje nagłówki przede wszystkim jako narzędzie porządkowania treści dla ludzi, a nie jako mechanizm, którym steruje się pozycjami. W podstawowych wytycznych SEO znajduje się zalecenie, aby dłuższe treści dzielić na akapity i sekcje oraz opatrywać je nagłówkami, które ułatwiają użytkownikom poruszanie się po stronie.

W tym samym dokumencie, w części poświęconej sprawom, na których nie warto się skupiać, Google rozprawia się z dwoma popularnymi przekonaniami. Po pierwsze, uporządkowanie nagłówków w kolejności semantycznej świetnie sprawdza się w przypadku czytników ekranu, ale z perspektywy wyszukiwarki Google nie ma znaczenia, że są użyte w niewłaściwej kolejności. Po drugie, nie istnieje idealna liczba nagłówków na stronie. Nie należy z tego wyciągać wniosku, że hierarchia jest obojętna. Google mówi jedynie, że jego systemy radzą sobie ze stronami o nieuporządkowanych nagłówkach. Ludzie radzą sobie z nimi znacznie gorzej, a to dla ludzi powstaje strona.

Drugi istotny dokument to pytania kontrolne z wytycznych o treściach przydatnych, rzetelnych i ukierunkowanych na użytkowników. Dwa z nich dotyczą wprost nagłówków: czy główny nagłówek lub tytuł strony zawiera opisowe, pomocne podsumowanie treści oraz czy nie jest przekoloryzowany albo zbyt szokujący. Pełną listę pytań omawiamy we wpisie o pomocnych treściach według Google.

Nagłówki a fragmenty z odpowiedzią i funkcje AI

Często pada pytanie, czy odpowiedni układ nagłówków pozwala trafić do wyróżnionego fragmentu z odpowiedzią albo do Przeglądów od AI. Dokumentacja Google jest w tej sprawie jednoznaczna. Strony nie da się oznaczyć jako źródła fragmentu z odpowiedzią - o tym, czy dana strona się do tego nadaje, decydują systemy Google. Z kolei w dokumencie o funkcjach opartych na AI czytamy, że nie ma dodatkowych wymagań dotyczących wyświetlania w Przeglądach od AI ani w Trybie AI i nie są wymagane żadne specjalne optymalizacje. Wśród podstawowych zaleceń wymieniono między innymi dostępność kluczowych treści w formie tekstowej.

Nie ma więc żadnego specjalnego wzoru nagłówków „pod AI”. Z naszych obserwacji wynika natomiast, że strony o przejrzystej budowie, na których pod konkretnym śródtytułem od razu pada konkretna odpowiedź, łatwiej zrozumieć i zacytować - zarówno człowiekowi, jak i systemom, które streszczają treść. Jest to obserwacja z praktyki agencji, a nie zasada opisana przez Google. Szerzej tym tematem zajmujemy się w ramach usługi pozycjonowania w AI.

Co o nagłówkach mówią wytyczne dostępności W3C

Wytyczne dostępności treści internetowych WCAG, opracowane przez organizację W3C, stawiają nagłówkom trzy wymagania: struktura widoczna na ekranie ma być zapisana także w kodzie, nagłówki mają opisywać temat lub cel fragmentu, a treść podzielona na sekcje powinna mieć nagłówki sekcji. Każde z tych wymagań to osobne kryterium sukcesu o innym poziomie zgodności.

Kryterium 1.3.1 wychodzi od prostej obserwacji: osoba widząca rozpoznaje nagłówek po większej, pogrubionej czcionce i odstępie od akapitów. Ta sama informacja musi być dostępna dla programu, czyli zapisana odpowiednim znacznikiem. Technika H42 opisuje sprawdzenie w dwóch punktach: czy znacznik nagłówka jest użyty tam, gdzie treść jest nagłówkiem, oraz czy nie jest użyty tam, gdzie treść nagłówkiem nie jest. Drugi punkt bywa pomijany, a dotyczy bardzo częstego błędu, czyli nagłówków stosowanych dla ozdoby.

Kryterium 2.4.6 dotyczy brzmienia. Jak wyjaśnia omówienie tego kryterium, opisowe nagłówki pomagają zrozumieć, jakie informacje zawiera strona i jak są uporządkowane. Szczególnie korzystają na tym osoby, które z powodu niepełnosprawności czytają powoli, oraz osoby z ograniczoną pamięcią krótkotrwałą. Warto zwrócić uwagę na zastrzeżenie: to kryterium samo nie nakazuje stosowania nagłówków. Mówi, że jeśli nagłówki są, mają być opisowe. Strona może więc spełniać jedno kryterium, a nie spełniać drugiego - na przykład mieć trafne śródtytuły, które w kodzie są zwykłymi pogrubionymi akapitami. Kryterium 2.4.10 ma z kolei poziom AAA, ponieważ, jak wyjaśnia W3C, nie da się go zastosować do każdego rodzaju treści.

Nagłówki w stałych częściach strony

W samouczku W3C o nagłówkach opisano wyjątek dotyczący elementów powtarzalnych, takich jak stopka czy panel boczny. Rangi nagłówków w tych częściach nie powinny zmieniać się w zależności od tego, jakie rangi występują w treści głównej - ważniejsza jest spójność między podstronami. Jeżeli więc nagłówek „Kontakt” w stopce jest wszędzie oznaczony jako H2, nie trzeba go zmieniać na H3 tylko dlatego, że akurat ten wpis kończy się podsekcją H3.

Jeśli chcą Państwo zamówić treści SEO, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Jak formułować nagłówki, także w formie pytań

Dobry nagłówek mówi, co czytelnik znajdzie w danym fragmencie, zanim go przeczyta. Taki jest sens zarówno kryterium 2.4.6, jak i pytania kontrolnego Google o opisowe, pomocne podsumowanie treści. Nagłówek „Oferta” spełnia ten warunek słabo, nagłówek „Obsługa prawna spółek - zakres i sposób rozliczenia” spełnia go dobrze.

W praktyce pomagają trzy proste zasady redakcyjne. Najważniejsze słowo powinno stać możliwie blisko początku nagłówka, ponieważ osoba przeglądająca stronę wzrokiem albo listę nagłówków w czytniku często poprzestaje na pierwszych wyrazach. Nagłówki tego samego poziomu warto budować podobnie. Wreszcie nagłówek powinien być zrozumiały bez kontekstu: śródtytuł „A co potem?” nic nie mówi komuś, kto trafił w to miejsce z listy nagłówków, a „Co dzieje się po złożeniu wniosku” mówi wszystko.

Kiedy pytanie w nagłówku pomaga

Nagłówek w formie pytania sprawdza się wtedy, gdy powtarza pytanie, które klienci rzeczywiście zadają, a akapit pod nim zaczyna się od odpowiedzi. Kancelaria z Krakowa, która w rozmowach telefonicznych stale słyszy „ile trwa sprawa o podział majątku”, ma dobry powód, by tak właśnie nazwać sekcję. Czytelnik rozpoznaje własne pytanie i od razu dostaje odpowiedź.

Pytania szkodzą w dwóch sytuacjach. Pierwsza to zamiana każdego nagłówka na pytanie niezależnie od treści, przez co pytania brzmią sztucznie. Druga to pytanie, po którym odpowiedź nie pada albo pada po trzech akapitach wstępu. Jeżeli pytań jest dużo, lepiej zebrać je w osobnej sekcji na końcu strony, o czym piszemy we wpisie o stronie FAQ.

Frazy kluczowe w nagłówkach

Fraza, na którą strona ma odpowiadać, naturalnie pojawia się w H1 i w części śródtytułów, bo nagłówki nazywają temat. Problem zaczyna się wtedy, gdy ta sama fraza jest powtarzana w każdym nagłówku w niezmienionej formie: nagłówki przestają się od siebie różnić, czyli przestają spełniać swoje zadanie. Szerzej o godzeniu potrzeb czytelnika i wyszukiwarki piszemy we wpisie o tym, jak pisać treści SEO.

Typowe błędy w nagłówkach

Najczęstsze błędy to nagłówki użyte dla wyglądu, puste hasła zamiast opisowych tytułów oraz przeskakiwanie poziomów. Wszystkie trzy mają wspólne źródło: nagłówek jest traktowany jako element graficzny, a nie jako informacja o budowie treści.

Nagłówki dla ozdoby

W wielu edytorach najszybszym sposobem na uzyskanie dużego, pogrubionego tekstu jest wybranie nagłówka. W efekcie jako H2 lub H3 oznaczane są hasła reklamowe, numery telefonu, podpisy pod zdjęciami, a nawet całe zdania wyróżnione w środku akapitu. Osoba, która przegląda listę nagłówków w czytniku ekranu, dostaje wtedy spis treści złożony z haseł w rodzaju „Promocja” i „Tylko u nas”, z którego nie wynika budowa strony. To dokładnie przypadek z drugiego punktu sprawdzenia w technice H42: znacznik nagłówka użyty tam, gdzie treść nagłówkiem nie jest. Wygląd tekstu należy ustawiać stylem, a rangę nagłówka zostawić dla tytułów sekcji.

Błąd odwrotny jest równie częsty: śródtytuł wygląda jak nagłówek, ale w kodzie jest pogrubionym akapitem. Program nie rozpozna w takim tekście nagłówka, co narusza kryterium 1.3.1.

Puste hasła

„Informacje”, „Szczegóły”, „Więcej”, „Nasza oferta”, „Wstęp”, „Podsumowanie” - takie nagłówki są formalnie poprawne, ale nic nie mówią o treści. Pasowałyby do dowolnej strony dowolnej firmy. Wystarczy dopisać, czego informacje dotyczą: zamiast „Szczegóły” - „Wymiary, materiał i sposób montażu”, zamiast „Podsumowanie” - „Którą metodę wybrać przy małym budżecie”. Do tej samej grupy należą nagłówki przesadzone, obiecujące więcej, niż daje tekst. Google pyta w wytycznych wprost, czy nagłówek nie jest przekoloryzowany albo zbyt szokujący.

Przeskakiwanie poziomów

Przeskok z H2 do H4 zdarza się zwykle dlatego, że H3 w danym motywie jest „za duży”, a H4 wygląda lepiej. Rozwiązaniem nie jest zmiana rangi, tylko zmiana wyglądu H3 w stylach motywu. Podobny błąd to rozpoczynanie treści od H3, ponieważ H2 wydaje się zbyt okazały, albo nadawanie wszystkim śródtytułom tej samej rangi, choć część z nich jest wyraźnie podrzędna.

Błędy wynikające z szablonu

Część problemów nie pochodzi z tekstu, lecz z motywu strony. Typowe przykłady to logo oznaczone jako H1 na każdej podstronie, kilka nagłówków H1 w jednym widoku oraz nazwy produktów na liście kategorii oznaczone wyższą rangą niż nazwa kategorii. Autor tekstu nie poprawi tego w edytorze - potrzebna jest zmiana w szablonie, którą wykonujemy w ramach tworzenia stron lub prac technicznych.

Jak sprawdzić i poprawić strukturę nagłówków na własnej stronie

Strukturę nagłówków najłatwiej sprawdzić w dwóch miejscach: w edytorze treści, który pokazuje konspekt dokumentu, oraz w kodzie gotowej strony w przeglądarce. Pierwsze miejsce pokazuje nagłówki z samej treści, drugie - wszystkie nagłówki widoku razem z tymi, które dokłada szablon.

W edytorze blokowym WordPressa służy do tego Przegląd dokumentu (w angielskiej wersji interfejsu Document Overview), otwierany ikoną na górnym pasku edytora. Dokumentacja bloku Nagłówek wskazuje w nim zakładkę Outline, czyli konspekt, w której widać nagłówki strony ułożone według poziomów. Polskie nazwy elementów mogą się nieznacznie różnić zależnie od wersji WordPressa. Poziom istniejącego nagłówka zmienia się na dwa sposoby opisane w dokumentacji: przyciskiem przekształcania na pasku narzędzi bloku albo przyciskami od H1 do H6 w ustawieniach bloku w panelu bocznym.

W przeglądarce wystarczy otworzyć gotową podstronę, kliknąć nagłówek prawym przyciskiem myszy i wybrać polecenie badania elementu. W oknie z kodem widać, jakim znacznikiem oznaczony jest dany tekst. Można też otworzyć źródło strony i wyszukać w nim ciąg znaków „<h1” - liczba wystąpień pokaże, ile nagłówków pierwszego poziomu ma strona i co się w nich znajduje. Kontrolę warto powtórzyć dla każdego typu podstrony: strony głównej, strony usługi, wpisu na blogu i kategorii sklepu, ponieważ każdy z nich korzysta zwykle z innego szablonu.

• Na podstronie jest jeden H1 i opisuje on temat tej podstrony, a nie nazwę firmy.
• Element title i H1 są zgodne co do tematu, choć nie muszą brzmieć identycznie.
• Po H2 nie występuje od razu H4.
• Każdy H3 rozwija temat H2, pod którym się znajduje.
• Żaden nagłówek nie służy wyłącznie do powiększenia tekstu.
• Żaden śródtytuł nie jest jedynie pogrubionym akapitem.
• Same nagłówki, czytane po kolei, tworzą zrozumiały spis treści.
• Nagłówki w stopce i panelu bocznym mają te same rangi na wszystkich podstronach.

Kiedy potrzebna jest pomoc specjalisty

Pojedynczy wpis lub stronę usługi da się uporządkować samodzielnie w edytorze. Wsparcie przydaje się w trzech sytuacjach. Po pierwsze, gdy błędy pochodzą z szablonu i powtarzają się na setkach podstron sklepu lub serwisu. Po drugie, gdy serwis jest duży i trzeba ustalić, które podstrony poprawiać w pierwszej kolejności - takie zestawienie przygotowujemy w ramach audytu SEO. Po trzecie, gdy problemem nie są same znaczniki, lecz tekst: brakuje w nim wyraźnych wątków, więc nie ma czego nazwać nagłówkami. Wtedy potrzebne jest napisanie treści od nowa według planu, czym zajmujemy się w ramach usług treści SEO i copywritingu. Uporządkowanie nagłówków poprawia czytelność i dostępność strony, ale samo nie przesądza o pozycjach w wynikach wyszukiwania.

Jeśli chcą Państwo zamówić treści SEO, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl