Struktura nagłówków SEO

Jak działa ta kontrola

Scanaris liczy znaczniki <h1> w HTML-u Twojej strony. Poprawny wynik to dokładnie jeden. Jeśli nie ma żadnego, otwiera ustalenie o średniej wadze: ani Google, ani czytnik ekranu nie wiedzą, jaki jest główny temat. Jeśli są dwa lub więcej, otwiera ustalenie o niskiej wadze z liczbą: kilka głównych nagłówków rozmywa, o czym jest strona. Badany jest tylko serwowany HTML, bez uruchamiania JavaScriptu, i tylko skanowana strona.

Dlaczego to ważne

<h1> to tytuł strony, pierwsza rzecz, którą ogłasza czytnik ekranu, i jeden z najjaśniejszych sygnałów, jakie ma Google, żeby zrozumieć temat. Strona bez h1 jest jak artykuł bez tytułu: wyszukiwarka musi go wywnioskować z reszty. Kilka h1 to nie błąd HTML, ale rozprasza ten sygnał: jeśli Twoja strona produktu ma nazwę produktu, slogan i „Opinie" wszystkie jako h1, żaden z trzech nie jest tematem. I to podstawa reszty hierarchii: h2 dzielą treść na sekcje, h3 dzielą dalej, i tak nawigują osoby używające klawiatury lub czytnika ekranu, i tak asystenci AI tną Twój tekst, żeby go cytować.

Dlaczego tak się dzieje

Najczęstszy przypadek zera h1 to projekt graficzny: duży tekst w sekcji hero to div z klasami rozmiaru albo p, bo kto go składał, myślał o wyglądzie, a nie o strukturze. W aplikacjach jednostronicowych h1 rysuje JavaScript i nie ma go w początkowym HTML-u. Przypadek wielu h1 zwykle bierze się z komponentów: każda karta, sekcja czy widżet przynosi własny h1, albo logo jest owinięte w h1 „dla SEO", co jest radą z 2008 roku.

Jak to naprawić

• Jeden h1 na stronę z głównym tematem, widoczny i blisko początku treści. Na stronie głównej to, co robisz; w artykule jego tytuł; w produkcie jego nazwa.
• Logo to nie h1. To link do strony głównej z nazwą marki jako tekstem albo jako alt.
• Reszta w h2 i h3, bez przeskakiwania poziomów: h3 siedzi w sekcji z h2. Jeśli znacznik interesuje Cię tylko ze względu na rozmiar, użyj klasy CSS, nie poziomu nagłówka.
• W komponentach przyjmuj poziom jako prop (<Heading :level="2">) zamiast ustalać go w środku, żeby ta sama karta była h2 na jednej stronie i h3 na innej.
• W SPA renderuj na serwerze przynajmniej strukturę strony albo użyj prerenderingu; inaczej Google widzi pustą stronę, zanim uruchomi Twój JavaScript.

Sprawdź, czy naprawione

curl -s https://twojadomena.pl | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Powinna wyjść dokładnie jedna linia zaczynająca się od h1:, a po niej hierarchia h2 i h3 w logicznej kolejności. Jeśli nic nie wychodzi, treść rysuje JavaScript i Google też jej za pierwszym razem nie widzi.

Często zadawane pytania

HTML5 pozwala na jeden h1 na sekcję. Dlaczego to jest oznaczane?

Specyfikacja pozwalała na to z algorytmem „outline" per sekcja, ale żadna przeglądarka ani czytnik ekranu nigdy go nie zaimplementowały, a specyfikacja wycofała go w 2022 roku. W praktyce jeden h1 na stronę pozostaje zaleceniem Google i wytycznych dostępności.

Mój h1 jest ukryty przez CSS, żeby projekt był czysty.

h1 ukrytego przez display: none nie czyta ani Google, ani czytniki ekranu. Jeśli ma być niewidoczny, ale czytany, użyj klasy tekstu ukrytego wizualnie (sr-only); ale zastanów się, czy główny tytuł strony naprawdę powinien być schowany.

Czy pozostałe poziomy są sprawdzane?

Ta kontrola liczy tylko h1. Puste nagłówki wykrywa dostępność, a tytuł karty przeglądarki, który nie jest tym samym co h1, choć zwykle są podobne, sprawdza metadane SEO.