Nagłówki

Nagłówki wskazują czytelnikowi, o czym jest każda część strony. W reklamie mają też przyciągnąć uwagę i zachęcić do poznania dalszej części oferty. [1]
Przywoływane badania przypisują nagłówkowi 50–75% udziału w sukcesie reklamy. [1] W artykule przyjrzymy się hierarchii nagłówków oraz temu, jak je tworzyć i oceniać w treściach SEO [2].

Czym są nagłówki HTML i czym różnią się od formatowania tekstu?

Nagłówki HTML to tytuły części strony oznaczone w kodzie. Samo formatowanie zmienia wygląd napisu, ale nie nadaje mu funkcji nagłówka. Wygląd tytułu można więc ustalić niezależnie od struktury treści.
HTML udostępnia 6 semantycznych poziomów nagłówków, od H1 do H6; samo formatowanie tekstu nie przypisuje mu żadnego z nich [3].

Do czego służą nagłówki HTML na stronie?

Nagłówki HTML nazywają kolejne części strony i pomagają znaleźć potrzebny fragment. Czytelnik może najpierw przejrzeć śródtytuły, a dopiero potem wybrać akapity do przeczytania.
W danych dotyczących reklamy nagłówek czyta 80% odbiorców, a tekst reklamy – 20%. Nie oznacza to, że użytkownicy każdej strony internetowej zachowują się tak samo. [1] [4]

Czym nagłówek HTML różni się od powiększonego lub pogrubionego tekstu?

Nagłówek HTML ma w kodzie oznaczenie określające jego miejsce w strukturze treści. Powiększenie lub pogrubienie zmienia tylko wygląd napisu. Dwa tytuły mogą wyglądać podobnie, choć tylko jeden z nich jest nagłówkiem w strukturze dokumentu.
Kryterium WCAG 1.3.1 na poziomie A wymaga, by strukturę widoczną na stronie dało się ustalić programowo lub odczytać z tekstu [5].

Tabela porównuje sposoby wyróżniania napisów: pokazuje ich wpływ na wygląd oraz strukturę HTML. HTML przewiduje 6 poziomów nagłówków, od H1 do H6; zmiana wielkości czcionki nie przypisuje tekstowi żadnego z nich [3].

Sposób wyróżnienia	Wpływ na wygląd	Wpływ na strukturę HTML
Kolor czcionki	Odróżnia napis od tekstu	Sam nie tworzy nagłówka
Pogrubienie wyrazów	Wzmacnia widoczność słów	Samo nie tworzy nagłówka [6]
Zapis wybranych słów wielkimi literami	Zmienia wygląd zapisu	Sam nie tworzy nagłówka

Kolor czcionki, pogrubienie i wielkie litery pomagają wyróżnić napis, lecz nie zastępują oznaczenia nagłówka w HTML [1]. Technika W3C H42 wskazuje elementy H1–H6 jako sposób spełnienia kryterium WCAG 1.3.1 [7].
Wygląd napisu i jego rola w dokumencie to dwie różne sprawy.

Czym jest hierarchia nagłówków H1–H6?

Hierarchia nagłówków H1–H6 porządkuje tytuły i śródtytuły według ich roli na stronie. Poziom mówi o relacji między tematami, nie o rozmiarze czcionki.
HTML przewiduje dokładnie 6 poziomów nagłówków: od H1, najwyższego w hierarchii, do H6, najniższego [8]. Tabela pokazuje, jak dzielą one treść.

Poziom	Rola w strukturze treści
H1	Nazywa temat główny.
H2	Wyznacza główne części treści.
H3–H6	Dzielą te części na coraz bardziej szczegółowe zagadnienia.

Nagłówek podrzędny rozwija temat wskazany wyżej. Jeśli śródtytuł otwiera temat równorzędny wobec innych, powinien mieć taki sam poziom jak one. Hierarchia ma odpowiadać planowi treści, który widzi czytelnik.
Technika W3C G141 zaleca, by nagłówek podsekcji był o 1 poziom niższy od nagłówka sekcji nadrzędnej [9].

Czy strona może mieć więcej niż jeden nagłówek H1?

Strona może mieć więcej niż jeden nagłówek H1. Sam taki zapis nie jest błędem HTML. Liczy się to, czy nagłówki nazywają odrębne części główne, czy tylko powielają tytuł dokumentu [10].

Tabela porównuje układ z jednym nagłówkiem H1 i układ z wieloma takimi nagłówkami. Strona może zawierać więcej niż 1 nagłówek H1; według Google nie trzeba ograniczać ich liczby do jednego [11].

Układ	Zastosowanie	Ograniczenie
Jeden H1	Strona skupiona na jednym temacie głównym	Nie opisze osobno kilku równorzędnych tematów głównych
Wiele H1	Dokument z odrębnymi częściami głównymi	Powielanie podobnych tytułów zaciera temat strony

Jeden H1 to czytelny wybór, gdy strona skupia się na jednym temacie. Nie musi jednak nazywać każdej równorzędnej części rozbudowanego dokumentu. Wiele H1 ma sens przy wyraźnie odrębnych tematach głównych, a nie jako sposób wyróżniania śródtytułów.
Liczba nagłówków H1 powinna wynikać z układu treści. Google nie wyznacza limitu 1 nagłówka H1 na stronę; takie oznaczenia mają pomagać w jej uporządkowaniu [11]. To tematy dokumentu powinny wyznaczać układ.

Jak tworzyć i sprawdzać nagłówki w treściach SEO?

Nagłówki w treściach SEO warto najpierw oprzeć na tematach strony, a potem przejrzeć w kolejności zapisanej w kodzie. Dzięki temu możemy osobno ocenić sens śródtytułów, ich poziomy i zgodność z akapitami.
Kryterium WCAG 2.4.6 na poziomie AA wymaga, by nagłówki opisywały temat lub cel zapowiadanej treści [12].

Jakie błędy w nagłówkach utrudniają zrozumienie treści?

Nagłówki utrudniają lekturę, gdy zapowiadają coś innego niż zawartość sekcji lub wciąż nazywają ten sam temat. Problem pojawia się też wtedy, gdy nie pokazują relacji między zagadnieniami. Ogólnikowy śródtytuł nie pomoże czytelnikowi znaleźć odpowiedzi na konkretne pytanie.
Długi blok oferty bez podziału trudno przejrzeć, dlatego źródło zaleca przeplatanie nagłówków z krótkimi blokami tekstu [1]. Yoast SEO sygnalizuje fragmenty dłuższe niż 300 słów, których nie podzielono śródtytułami [13].

Jak ułożyć nagłówki, by logicznie podzielić treść?

Nagłówki w dłuższej ofercie powinny prowadzić od tematu głównego do odpowiedzi na bardziej szczegółowe pytania.
Kryterium WCAG 2.4.10 na poziomie AAA przewiduje stosowanie nagłówków sekcji do organizowania treści [14].

• Temat główny powinien znaleźć się w tytule treści. Dzięki niemu czytelnik wie, czego dotyczy cała strona.
• Główne zagadnienia powinny wyznaczać śródtytuły równorzędnych części. Każda część ma odpowiadać na odrębne pytanie czytelnika.
• Zagadnienia szczegółowe powinny trafić pod śródtytuł, którego temat rozwijają. Nie warto odrywać ich od właściwej części oferty.
• Bloki tekstu powinny znajdować się pod nagłówkami trafnie zapowiadającymi ich zawartość. Jeśli akapity zaczynają odpowiadać na inne pytanie, trzeba wydzielić nową część.

Układ nagłówków jest logiczny, gdy z samych śródtytułów można odczytać zakres i kolejność omawianych zagadnień [15].

Jak sprawdzić nagłówki na stronie i ocenić ich hierarchię?

Kontrola nagłówków polega na porównaniu oznaczeń HTML z tym, co widać na stronie. Trzeba też sprawdzić, czy każdy oznaczony nagłówek rzeczywiście pełni swoją funkcję.
Zgodnie z WCAG 1.3.1 na poziomie A widoczną strukturę powinno dać się ustalić programowo lub odczytać z tekstu [5].

• Oznaczenia nagłówków pokazują strukturę strony. Odczytaj w kodzie ich treść i poziomy, zachowując kolejność występowania.
• Hierarchia śródtytułów powinna odpowiadać planowi tekstu. Sprawdź, czy tematy szczegółowe znajdują się pod właściwymi tematami nadrzędnymi.
• Treść sekcji powinna odpowiadać jej nagłówkowi. Zmień tytuł, jeśli obiecuje inną odpowiedź niż akapity poniżej.
• Atrakcyjność tytułu trzeba ocenić osobno od poprawności HTML. Test opisany w komentarzu proponuje porównanie własnego nagłówka z 3–4 nagłówkami innych firm. Takie zestawienie nie zastępuje kontroli hierarchii. [1]

Wynikiem kontroli powinna być lista nagłówków wymagających poprawy. Przy każdym warto wskazać przyczynę: niejasny temat, niewłaściwy poziom albo rozbieżność z treścią [6].

Jaką rolę pełnią H1, H2 i H3 w SEO?

H1, H2 i H3 opisują temat strony oraz podział na główne i szczegółowe zagadnienia. Same oznaczenia nie gwarantują jednak widoczności w wyszukiwarce. Tabela przedstawia rolę tych poziomów w treści SEO.

Poziom	Rola w treści SEO
H1	Opisuje główny temat strony.
H2	Nazywa główne zagadnienia omawiane na stronie.
H3	Zapowiada szczegółowe zagadnienia w obrębie głównych części.

Czytelny śródtytuł pozwala przewidzieć, na jakie pytanie odpowie następująca po nim sekcja. Źródło wyróżnia 3 kategorie skutecznych nagłówków i zapowiada 25 sposobów ich tworzenia. Liczba wariantów nie służy jednak do oceny hierarchii HTML [1].
Kryterium WCAG 2.4.6 na poziomie AA wymaga, by nagłówek opisywał temat lub cel treści, a nie tylko zawierał frazę SEO [12].

Nagłówki SEO spełniają swoją funkcję, gdy zapowiadają zawartość sekcji, a ich poziomy pokazują strukturę tekstu. Widoczność treści w odpowiedziach AI można sprawdzić, zgłaszając stronę do darmowego audytu.
Konkretne kryterium oceny daje WCAG 2.4.6 na poziomie AA: nagłówek powinien opisywać temat lub cel treści [12]. Treść i hierarchia nagłówków mają razem porządkować stronę.

Jak umieszczać słowa kluczowe w H1–H3 bez upychania fraz?

Słowa kluczowe w H1–H3 powinny pojawiać się wtedy, gdy naturalnie nazywają temat strony lub sekcji. Czytelnika zainteresuje trafny nagłówek, nie wielokrotnie powtórzona fraza.

• Fraza w H1 powinna nazywać główny temat strony. Nagłówek musi być zrozumiały także bez pozostałej treści.
• Fraza w H2 lub H3 powinna pasować do zagadnienia opisanego bezpośrednio pod nagłówkiem. Jeśli sekcja dotyczy innego aspektu, lepiej nazwać w nagłówku bardziej szczegółowe pytanie.
• Korzyść dla czytelnika może iść w parze z ciekawością, a także z informacją o produkcie, jeśli pasuje ona do treści. Taką konstrukcję zaleca źródło. [1]
• Początek nagłówka powinien pasować do pytania lub komunikatu. Źródło proponuje konstrukcje zaczynające się od „Dlaczego”, „Kto jeszcze”, „Jeśli” i „Poszukujemy”. [1] W przywołanym przykładzie pytanie „Czy popełniasz takie błędy, mówiąc po angielsku?” budziło ciekawość słowem „takie” i zachęcało do sprawdzenia treści. [1]

Nagłówek bez upychania fraz nazywa temat sekcji i daje czytelnikowi powód, by przeczytał odpowiedź. Naturalnie dobrana fraza pomaga zachować jasny przekaz.

Bezpłatny audyt widoczności w AI

Bezpłatny audyt widoczności w AI pozwoli sprawdzić, czy treści Twojej firmy odpowiadają na pytania użytkowników. Jeśli chcesz ocenić swoją stronę, skontaktuj się z nami.

Źródła

1. Jak pisać ZABÓJCZO skuteczne nagłówki. Najlepsze nagłówki w historii. — https://google.com/goto?url=CAESggEBxCJF1zjE-trduc7IXg8se_9a8nyckwvDBtVH2A3lMELChhRhd2RXt_TM05TJ4XD1QjwHMrjjr468mo1RPcU88qDpvo2KO7zIQ6kVsjszm7Ftp2Tfhmx8iA2sYosOE0ybwAKW9hglxupT_xt8sk8r6owiV3FhaX2DJXB_ccq90Hxf&gsessionid=cpToJYd-lGP057R2OsryZ5RjbfHCytFDMK8Vvl5OWS_aJ7HVyhj4uw
2. Polska Agencja Rozwoju Przedsiębiorczości, „Czas e-biznes”, fragment poradnika Piotra Majewskiego — https://en.parp.gov.pl/storage/publications/pdf/2014_czas_e_biznes_jak_zaistnie.pdf
3. MDN Web Docs — Headings and paragraphs — https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs
4. Copyblogger, „How to Write Magnetic Headlines” — https://my.copyblogger.com/wp-content/uploads/2020/08/How-to-Write-Magnetic-Headlines.pdf
5. W3C WAI — Understanding Success Criterion 1.3.1 — https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships
6. W3C Web Accessibility Initiative, „Easy Checks – A First Review of Web Accessibility” — https://www.w3.org/WAI/test-evaluate/preliminary/
7. W3C WAI — Technique H42 — https://www.w3.org/WAI/WCAG22/Techniques/html/H42
8. MDN Web Docs — HTML section heading elements — https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements
9. W3C WAI — Technique G141 — https://www.w3.org/WAI/WCAG22/Techniques/general/G141
10. WHATWG, „HTML Standard”, sekcja dotycząca nagłówków i struktury dokumentu — https://html.spec.whatwg.org/dev/sections.html
11. Google Search Central — Multiple H1 Headings: How to Handle Them for SEO & Accessibility? — https://www.youtube.com/watch?v=zyqJJXWk0gk
12. W3C WAI — Understanding Success Criterion 2.4.6 — https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels
13. Yoast SEO Academy — Readability analysis — https://academy.yoast.com/app/uploads/sites/4/2023/08/readability-analysis-yoast-seo-for-wordpress-course.pdf
14. W3C WAI — Understanding Success Criterion 2.4.10 — https://www.w3.org/WAI/WCAG22/Understanding/section-headings
15. W3C Web Accessibility Initiative, „Writing for Web Accessibility – Tips for Getting Started” — https://www.w3.org/WAI/tips/writing/