Naprawa hierarchii nagłówków w WordPress

Nagłówki dają Twojej zawartości strony jasną, logiczną strukturę. Nie są to tylko elementy wizualne służące do powiększenia tekstu. Czytniki ekranu używają ich, aby pozwolić użytkownikom przeglądać sekcje, a wyszukiwarki używają ich, aby zrozumieć hierarchię tematów Twojej treści. Zepsuta struktura nagłówków myli zarówno ludzi, jak i maszyny, więc prawidłowe jej ustawienie się opłaca w dostępności, SEO i ogólnej czytelności.

Jak wygląda prawidłowa hierarchia nagłówków

Pomyśl o swoich nagłówkach jak o konspekcie lub spisie treści. Każdy poziom reprezentuje głębokość zagnieżdżenia i nigdy nie powinieneś pomijać poziomu schodząc w dół. Oto jak wygląda prawidłowa struktura:

H1: Tytuł strony (tylko jeden na stronie)
  H2: Pierwsza główna sekcja
    H3: Podsekcja pierwszej głównej sekcji
    H3: Inna podsekcja
      H4: Szczegół w podsekcji
  H2: Druga główna sekcja
    H3: Podsekcja drugiej głównej sekcji
  H2: Trzecia główna sekcja

Zauważ, jak każdy poziom nagłówka jest zawarty w poziomie powyżej niego. Nie skoczyłbyś z H2 bezpośrednio do H4, tak jak nie stworzyłbyś podpodsekcji bez najpierw podsekcji. Powrót w górę jest w porządku: po H4 możesz wrócić do H2 dla nowej głównej sekcji.

Częste błędy nagłówków w WordPress

Większość problemów z hierarchią nagłówków w WordPress wynika z kilku powtarzających się wzorców:

• Motyw używa niewłaściwych tagów dla tytułu strony: Niektóre motywy renderują tytuł wpisu lub strony jako H2 zamiast H1 lub używają nazwy witryny jako H1 na każdej stronie. Oznacza to, że Twój faktyczny tytuł treści jest zdegradowany, a wiele stron może w ogóle nie mieć prawidłowego H1.
• Wiele tagów H1 na jednej stronie: Zwykle dzieje się to, gdy motyw renderuje tytuł witryny jako H1 w nagłówku, a tytuł strony jest również H1. Każda strona powinna mieć dokładnie jedno H1. Na stronach wewnętrznych nazwa witryny powinna być <p>, <span> lub stylizowanym <div>, a nie H1.
• Pomijanie poziomów nagłówków: Skok z H2 do H4 lub z H1 do H3 zdarza się, gdy autorzy wybierają poziomy nagłówków na podstawie tego, jak wyglądają wizualnie, a nie ich logicznego znaczenia. Jeśli H3 wygląda dobrze pod względem rozmiaru, wybierają H3, nawet jeśli nie ma H2 powyżej.
• Używanie nagłówków do stylizacji wizualnej: Autorzy czasami używają H2 lub H3 tylko dlatego, że chcą pogrubionego, dużego tekstu dla call-to-action lub tytułu widgetu w pasku bocznym. To nie są rzeczywiste nagłówki treści i powinny być stylizowane klasami CSS.
• Nagłówki page builderów i widgetów: Page buildery, takie jak Elementor, i obszary widgetów często wstawiają nagłówki na nieoczekiwanych poziomach. Widget w pasku bocznym może używać H3, podczas gdy obszar treści nie ma H2, tworząc pominięty poziom w ogólnej hierarchii strony.

Jak sprawdzić swoją hierarchię nagłówków

Zanim cokolwiek naprawisz, musisz zobaczyć, jak wygląda Twoja obecna struktura nagłówków. Oto kilka sposobów, aby to zrobić:

• InspectWP: Uruchom skan i spójrz na sekcję treści. InspectWP pokazuje pełną hierarchię nagłówków Twojej strony, ułatwiając wykrywanie brakujących tagów H1, zduplikowanych H1, pominiętych poziomów i innych problemów.
• Rozszerzenie przeglądarki HeadingsMap: Dostępne dla Chrome i Firefox, to rozszerzenie pokazuje strukturę drzewa wszystkich nagłówków na bieżącej stronie. Oznacza błędy strukturalne, takie jak pominięte poziomy, ikonami ostrzegawczymi.
• Narzędzie dostępności WAVE: Rozszerzenie przeglądarki WAVE (wave.webaim.org) ocenia Twoją stronę pod kątem problemów z dostępnością, w tym kwestii struktury nagłówków. Umieszcza ikony bezpośrednio na stronie, gdzie znaleziono problemy.
• Inspekcja ręczna: Kliknij prawym przyciskiem myszy na stronie, wybierz "Wyświetl źródło strony" (Ctrl+U) i wyszukaj <h1, <h2, <h3 i tak dalej. Pokazuje to surowe tagi nagłówków w HTML.

Naprawa nagłówków w edytorze blokowym Gutenberg

Jeśli używasz edytora blokowego WordPress (Gutenberg), poprawianie poziomów nagłówków jest proste:

1. Kliknij dowolny blok Heading w swojej treści.
2. Na pasku narzędzi bloku u góry zobaczysz bieżący poziom nagłówka (na przykład "H3"). Kliknij go, aby otworzyć dropdown.
3. Wybierz odpowiedni poziom nagłówka z dropdown. Pamiętaj, że sekcje Twojej treści powinny zaczynać się od H2 (ponieważ H1 jest zarezerwowane dla tytułu strony), a podsekcje powinny używać H3.
4. Edytor blokowy zawiera teraz funkcję "Document Overview". Kliknij ikonę informacji (kółko z "i") na górnym pasku narzędzi, aby zobaczyć strukturę nagłówków całego wpisu. Ostrzega o pominiętych poziomach.

Jeśli używasz Classic Editor, przełącz na zakładkę "Tekst", aby zobaczyć surowy HTML i ręcznie zmienić tagi nagłówków.

Naprawa nagłówków w szablonach motywu

Jeśli Twoje problemy z nagłówkami wynikają z motywu, a nie z treści, musisz edytować pliki motywu. Zawsze używaj child theme, aby Twoje zmiany przetrwały aktualizacje motywu.

Częste poprawki obejmują zmianę tagu tytułu witryny na stronach wewnętrznych:

// W header.php Twojego child theme
<?php if (is_front_page()) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>

I upewnienie się, że tytuł wpisu używa H1 w szablonach single post/page:

// W single.php lub content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>

Na stronach archiwum (archiwa kategorii, tagów, dat) tytuł archiwum powinien zwykle być H1, a indywidualne tytuły wpisów w pętli powinny być H2.

Stylowanie nagłówków bez łamania hierarchii

Jeśli chcesz, aby tekst wyglądał wizualnie jak nagłówek, ale nie jest to nagłówek strukturalny (na przykład baner promocyjny lub tytuł widgetu), użyj klasy CSS zamiast tagu nagłówka:

.heading-style {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

Zastosuj tę klasę do elementu <p> lub <div>. I odwrotnie, jeśli chcesz, aby prawdziwy nagłówek wyglądał mniejszy lub inny niż domyślnie, stylizuj go CSS-em zamiast wybierać niższy poziom nagłówka dla wyglądu.

Wpływ hierarchii nagłówków na dostępność (WCAG 1.3.1)

Wytyczne Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1 wymagają, aby informacje, struktura i relacje przekazywane przez prezentację były możliwe do programowego określenia. Nagłówki są kluczowym sposobem, w jaki użytkownicy czytników ekranu nawigują po stronach internetowych. Według badań użytkowników WebAIM przeprowadzonych wśród użytkowników czytników ekranu, ponad 67% użytkowników czytników ekranu używa nagłówków jako swojej podstawowej metody znajdowania treści na stronie. Gdy pomijasz poziomy nagłówków lub używasz nagłówków do stylizacji wizualnej, użytkownicy czytników ekranu nie mogą niezawodnie nawigować po Twojej treści. Naprawienie hierarchii nagłówków to jedna z najprostszych i najbardziej wpływowych poprawek dostępności, jakie możesz wprowadzić.

Wpływ prawidłowej struktury nagłówków na SEO

Google potwierdził, że używa nagłówków, aby zrozumieć zawartość i strukturę strony. Choć same nagłówki nie sprawią ani nie zepsują Twoich rankingów, dostarczają ważnych sygnałów kontekstowych. H2 zawierające "Przewodnik instalacji" mówi Google, że następna sekcja dotyczy instalacji. Prawidłowo zagnieżdżone nagłówki pomagają również Google generować featured snippets i sitelinks. Pomijanie poziomów lub niespójne używanie nagłówków wysyła mieszane sygnały o strukturze Twojej treści i może uniemożliwić wyszukiwarkom dokładną interpretację tematów Twoich stron.

Weryfikuj hierarchię nagłówków z InspectWP

Po wprowadzeniu poprawek uruchom nowy skan InspectWP. Sekcja treści pokaże każdy nagłówek na Twojej stronie po kolei, wraz z jego poziomem. Powinieneś zobaczyć pojedyncze H1, po którym następują H2 dla głównych sekcji, H3 dla podsekcji i brak pominiętych poziomów. Jeśli widzisz pozostałe problemy, wróć do edytora lub szablonu motywu i odpowiednio dostosuj.