Tagi nagłówków HTML, od <h1> do <h6>, definiują nagłówki i podtytuły Twojej treści. Tworzą hierarchiczną strukturę dokumentu, która mówi przeglądarkom, wyszukiwarkom i technologiom wspomagającym, jak zbudowana jest Twoja strona. Pomyśl o nich jak o tytułach rozdziałów i sekcji w książce: H1 to tytuł książki, H2 to tytuły rozdziałów, H3 to sekcje w rozdziałach i tak dalej.
Zrozumienie hierarchii nagłówków
Każdy poziom nagłówka reprezentuje inną głębokość w strukturze strony:
<h1>: Główny nagłówek strony. Opisuje, o czym jest cała strona. Najlepszą praktyką jest używanie dokładnie jednego H1 na stronie. We wpisie blogowym jest to zazwyczaj tytuł wpisu. Na stronie głównej może to być główna propozycja wartości.<h2>: Główne nagłówki sekcji. Dzielą Twoją treść na podstawowe sekcje. W długim artykule każde H2 wprowadza nowy temat lub główny punkt.<h3>: Podsekcje w obrębie sekcji H2. Jeśli Twoja sekcja H2 obejmuje "Nagłówki bezpieczeństwa" i chcesz ją podzielić na części, każda część otrzymuje H3.<h4>do<h6>: Głębsze poziomy zagnieżdżenia. Większość treści rzadko potrzebuje czegoś głębszego niż H4. Użycie H5 lub H6 zwykle wskazuje, że treść skorzystałaby na restrukturyzacji na osobne strony lub sekcje.
Dlaczego hierarchia nagłówków jest ważna dla SEO
Wyszukiwarki używają nagłówków, aby zrozumieć temat i strukturę Twojej treści. Google potwierdził, że nagłówki pomagają crawlerom zrozumieć, o czym jest każda sekcja strony. Choć same nagłówki nie są ogromnym czynnikiem rankingowym, przyczyniają się do ogólnego on-page SEO na kilka sposobów:
- Sygnały tematyczne: Słowa kluczowe w nagłówkach mają większą wagę niż słowa kluczowe w tekście podstawowym. H2 zawierające "Jak zabezpieczyć logowanie WordPress" mówi Google, że ta sekcja dotyczy konkretnie bezpieczeństwa logowania.
- Featured snippets: Google często wyciąga treść z sekcji z jasnymi nagłówkami dla wyników featured snippet. Dobrze ustrukturyzowana strona z opisowymi nagłówkami ma większą szansę pojawienia się na tych prominentnych pozycjach.
- Zrozumienie struktury strony: Logiczna hierarchia nagłówków pomaga Google zrozumieć relacje między sekcjami. Jeśli Twoje H2 to "Optymalizacja wydajności", a H3 to "Kompresja obrazów" i "Cache", Google rozumie, że są to podtematy wydajności.
- Ranking pasaży: Google może rangować poszczególne fragmenty strony. Jasne nagłówki pomagają Google zidentyfikować, gdzie kończy się jeden fragment, a zaczyna drugi.
Dostępność i nawigacja czytnikami ekranu
Dla użytkowników polegających na czytnikach ekranu (takich jak JAWS, NVDA czy VoiceOver) nagłówki są jednym z najważniejszych narzędzi nawigacyjnych. Użytkownicy czytników ekranu często naciskają skrót klawiszowy (zwykle "H"), aby skakać z nagłówka do nagłówka, przemierzając strukturę strony w taki sam sposób, w jaki widzący użytkownik skanuje ją wzrokowo. Jeśli Twoje nagłówki są pominięte, w nieprawidłowej kolejności lub używane do stylizacji wizualnej zamiast strukturalnie, użytkownicy czytników ekranu tracą zdolność do efektywnej nawigacji. Web Content Accessibility Guidelines (WCAG) szczegółowo zajmują się strukturą nagłówków. Success Criterion 1.3.1 wymaga, aby informacje i relacje przekazywane przez prezentację były możliwe do programowego określenia. W praktyce oznacza to, że Twoje poziomy nagłówków powinny odzwierciedlać faktyczną hierarchię treści, a nie tylko ładnie wyglądać.
Częste błędy nagłówków w WordPress
Witryny WordPress są szczególnie podatne na problemy z nagłówkami, ponieważ struktura nagłówków jest podzielona między motyw a edytor treści:
- Wiele tagów H1: To najczęściej spotykany problem. Niektóre motywy renderują tytuł witryny jako H1 w nagłówku, a także owijają tytuł strony/wpisu w H1. To daje stronie dwa konkurujące główne nagłówki. Choć Google powiedział, że wiele H1 jest "w porządku" w sensie braku kary, jedno H1, które jasno określa temat strony, pozostaje najczystszym podejściem.
- Pomijanie poziomów nagłówków: Skok z H2 bezpośrednio do H4, z całkowicie pominiętym H3. To łamie logiczną strukturę. Czytniki ekranu ogłaszają poziomy nagłówków, więc użytkownik, który usłyszy "Nagłówek poziomu 2", a po nim "Nagłówek poziomu 4", będzie się zastanawiał, co się stało z poziomem 3.
- Używanie nagłówków do stylizacji: Wybieranie H3 zamiast H2, ponieważ rozmiar czcionki H3 lepiej wygląda w motywie. To nadużycie nagłówków. Prawidłowe podejście to użycie odpowiedniego poziomu nagłówka dla struktury, a następnie dostosowanie CSS, aby uzyskać pożądany wygląd wizualny.
- Brak H1 w ogóle: Niektóre motywy lub układy page builderów przypadkowo całkowicie pomijają H1 lub H1 jest ustawione jako tytuł witryny w nagłówku, podczas gdy faktyczna treść strony zaczyna się od H2. Każda strona powinna mieć dokładnie jedno H1 opisujące główny temat.
- Nagłówki w widgetach i paskach bocznych: Widgety WordPress często renderują nagłówki H2 lub H3 dla tytułów widgetów. Te nagłówki nie są częścią głównej hierarchii treści i mogą mylić strukturę dokumentu. Niektóre motywy rozwiązują to za pomocą atrybutów
aria-, ale wiele nie. - Puste tagi nagłówków: Czasami motywy lub page buildery zostawiają puste tagi nagłówków w markupie (
<h2>bez tekstu). Są niewidoczne dla widzących użytkowników, ale mylą czytniki ekranu.
Jak WordPress obsługuje nagłówki
W typowej konfiguracji WordPress struktura nagłówków działa tak: motyw generuje H1, zwykle z tytułu wpisu lub strony. Treść, którą piszesz w edytorze, powinna zaczynać się od nagłówków H2 dla głównych sekcji i H3 oraz niższych dla podsekcji. Prawie nigdy nie powinieneś wpisywać H1 w edytorze treści, ponieważ motyw już jedno renderuje. Jeśli używasz page buildera lub niestandardowej strony docelowej, gdzie motyw nie renderuje H1, musisz sam je dodać. Przed opublikowaniem strony warto sprawdzić, czy motyw automatycznie renderuje H1, aby uniknąć duplikatów.
Nagłówki w edytorze blokowym Gutenberg
Z Gutenbergiem wstawianie i zarządzanie nagłówkami jest łatwe. Blok Heading pozwala wybrać poziom (H2 do H6, a w razie potrzeby H1) z menu rozwijanego. Gutenberg zawiera także funkcję "Document Overview" w pasku bocznym edytora, która pokazuje pełną strukturę nagłówków Twojego wpisu na jednym rzucie oka. Jeśli pominiesz poziom nagłówka, widok przeglądu oznacza to ostrzeżeniem. To przydatne wbudowane narzędzie, które wielu użytkowników WordPress przeocza. Wyrobij sobie nawyk sprawdzania document overview przed kliknięciem Publikuj.
Narzędzia do sprawdzania i wizualizacji struktury nagłówków
Oprócz wbudowanego przeglądu Gutenberga istnieje kilka sposobów audytowania struktury nagłówków:
- Rozszerzenia przeglądarki: Rozszerzenie "HeadingsMap" (dostępne dla Chrome i Firefox) pokazuje hierarchię nagłówków każdej strony jako zwijane drzewo. Narzędzie dostępności "WAVE" również wskazuje problemy z nagłówkami.
- Wtyczki SEO: Yoast SEO i Rank Math sprawdzają strukturę nagłówków jako część analizy treści. Ostrzegają o brakujących H1 lub suboptymalnym użyciu nagłówków.
- Walidatory online: W3C Markup Validation Service sprawdza Twój HTML pod kątem problemów strukturalnych, w tym kwestii kolejności nagłówków.
- InspectWP: InspectWP skanuje Twoją stronę i wymienia każdy nagłówek po kolei, dzięki czemu możesz zobaczyć pełną hierarchię na jeden rzut oka.
Najlepsze praktyki dla nagłówków WordPress
- Jedno H1 na stronę: Pozwól motywowi obsłużyć H1 z tytułu wpisu/strony. Nie dodawaj kolejnych w treści.
- Zaczynaj treść od H2: Twój pierwszy nagłówek w edytorze powinien być H2, a nie H1.
- Nie pomijaj poziomów: Przechodź z H2 do H3 do H4. Nigdy nie skacz z H2 do H4.
- Używaj nagłówków do struktury, nie do stylizacji: Jeśli chcesz mniejszego lub większego tekstu, użyj klas CSS zamiast zmieniać poziom nagłówka.
- Utrzymuj nagłówki opisowe: "Bezpieczeństwo" jest mniej przydatne niż "Najlepsze praktyki bezpieczeństwa WordPress" zarówno dla czytelników, jak i wyszukiwarek.
- Sprawdzaj document overview: Użyj wbudowanego przeglądu Gutenberga lub rozszerzenia przeglądarki przed publikacją.
Co sprawdza InspectWP
InspectWP analizuje strukturę nagłówków Twojej strony WordPress i wymienia każdy nagłówek po kolei, od H1 do H6. Wykrywa brakujące tagi H1, wiele tagów H1, pominięte poziomy nagłówków i puste nagłówki. Daje to jasny obraz przeglądu dokumentu strony i pomaga naprawić problemy strukturalne, które wpływają zarówno na SEO, jak i na dostępność.