Nagłówki h1, h2 i h3 na stronie – jak je stosować

HTML ma sześć poziomów nagłówków, od H1 do H6, ale zwykłej stronie wystarczą zwykle jeden H1 oraz H2 i H3 pod nim. Nagłówki tworzą konspekt strony. H1 nazywa temat, H2 dzielą go na części, a H3 rozbijają część na szczegóły, i po tym konspekcie przechodzą czytelnik, czytnik ekranu oraz wyszukiwarka.

Do czego służą nagłówki h1, h2 i h3 na stronie

Nagłówek mówi, o czym jest fragment pod nim, zanim ktoś przeczyta pierwszy akapit. Kto szuka jednej informacji, przewija stronę i zatrzymuje się na śródtytułach, więc dobrze nazwane sekcje skracają mu drogę do odpowiedzi.

Dla osób niewidomych i słabowidzących nagłówki są czymś więcej niż wygodą. Według dokumentacji MDN częstym sposobem poruszania się po stronie wśród osób korzystających z czytnika ekranu jest szybkie przeskakiwanie od nagłówka do nagłówka, żeby ustalić, o czym jest treść. Jeśli strona ma być dostępna dla wszystkich, zajrzyj też do opisu serwisów zgodnych ze standardem WCAG.

Struktura nagłówków h1-h6 poziom po poziomie

Poziom nagłówka oznacza jego miejsce w hierarchii, a nie rozmiar czcionki. Według poradnika W3C najważniejszy nagłówek ma najwyższą rangę, czyli H1. Każdy kolejny poziom porządkuje treść pod poprzednim. Jeśli zapis znaczników jest dla Ciebie nowy, tło znajdziesz we wpisie o tym, czym jest język HTML i jego znaczniki.

Poziom	Rola	Kiedy używasz
H1	nazwa tematu całej strony	raz, na początku treści głównej
H2	główne części tematu	przy każdym nowym wątku, np. etapie, rodzaju albo pytaniu
H3	podpunkty w obrębie jednego H2	gdy sekcja H2 ma kilka wyraźnych części
H4	szczegóły w obrębie jednego H3	gdy część H3 wymaga dalszego podziału, np. w rozbudowanej instrukcji
H5 i H6	kolejne zagłębienia	gdy dokument ma bardzo głęboką strukturę, np. specyfikacja techniczna

Potrzebę H4 w zwykłym artykule traktujemy jako sygnał, że sekcja rozrosła się w osobny temat i być może zasługuje na własną stronę.

Czym nagłówek h1 różni się od tytułu strony w Google

H1 i title to dwa różne elementy. H1 widzisz na samej stronie, zwykle jako największy napis nad treścią. Title zapisuje się w kodzie strony, poza treścią, a tekst tytułu bywa też pokazywany w przeglądarce i w zakładkach.

Tytuł, który widzisz w wynikach wyszukiwania, nie musi brzmieć dokładnie tak jak title. Google używa kilku źródeł do wygenerowania linku z tytułem, m.in. słów w elemencie title (nazywanym też tekstem tytułu) i innych nagłówków strony. Dlatego H1 i title warto pisać tak, żeby opisywały ten sam temat, nawet jeśli brzmią inaczej. W tym wpisie title jest krótszy niż H1 nad tekstem, a oba mówią o nagłówkach na stronie.

Z tym wiąże się liczba nagłówków H1 na stronie. Standard HTML dopuszcza kilka elementów H1 na jednej stronie, ale według dokumentacji MDN nie uchodzi to za dobrą praktykę. My zostawiamy jeden H1, który nazywa temat strony, bo wtedy konspekt ma jeden punkt wyjścia.

Jak układać h2 i h3 bez przeskakiwania poziomów

Poziomy układasz jak spis treści, od ogółu do szczegółu, bez dziur. Dokumentacja MDN podkreśla, że ważne jest, aby nie pomijać żadnego poziomu nagłówka, a poradnik W3C dodaje, że przeskakiwanie rang może być mylące i należy go unikać, jeśli to możliwe. Osoba, która przechodzi po nagłówkach, po H2 trafia wtedy od razu na H4 i może się zastanawiać, czy coś pominęła.

Poprawny konspekt hipotetycznego artykułu o wyborze regałów do małego magazynu mógłby wyglądać tak:

• H1 nazywa temat całego tekstu, czyli wybór regałów do małego magazynu,
• H2 dzielą go na rodzaje regałów, obciążenie półek i ustawienie regałów w pomieszczeniu,
• H3 pod sekcją o rodzajach opisują osobno regały półkowe i paletowe.

W wersji błędnej autor po H1 oznacza rodzaje regałów od razu jako H4, bo w szablonie H4 ma mniejszą, spokojniejszą czcionkę. Na ekranie strona wygląda podobnie, ale w konspekcie brakuje dwóch poziomów, a regały półkowe i paletowe nie mają nad sobą sekcji, do której należą.

Nagłówki na stronie usługi, w sklepie i na blogu

Ten sam szkielet działa na różnych typach stron, zmienia się tylko to, co trafia na poszczególne poziomy. Poniższe układy są przykładowe.

• Strona usługi – H1 nazywa usługę, a H2 odpowiadają na pytania przed kontaktem, czyli co obejmuje usługa, jak przebiega współpraca i od czego zależy cena.
• Kategoria w sklepie – H1 to nazwa kategorii, a H2 mogą wyznaczać podkategorie albo poradnik wyboru pod listą produktów.
• Karta produktu – H1 to nazwa produktu, a H2 dzielą opis na cechy, parametry, dostawę i opinie.
• Artykuł na blogu – H1 to temat, H2 to kolejne etapy albo pytania, a H3 dzielą dłuższy etap na części.

Część nagłówków ustawia nie redaktor, tylko szablon strony. W WordPressie i w innych systemach zarządzania treścią motyw może sam oznaczać jako nagłówki nazwę strony, logo albo tytuły widgetów, przez co na stronie pojawia się dodatkowy H1 albo seria H2, których nie ma w treści. Podczas wdrożenia strony, także przy stronach internetowych WordPress, dbamy m.in. o hierarchię nagłówków, a przy planowaniu sklepu uwzględniamy strukturę nagłówków obok adresów URL, linkowania wewnętrznego i danych strukturalnych produktów.

Słowa kluczowe w nagłówkach SEO

Fraza w nagłówku ma sens tam, gdzie nazywa treść sekcji. H1 zwykle zawiera główny temat strony, więc fraza albo jej odmiana pojawia się w nim naturalnie. W H2 i H3 warto sięgać po odmiany i bliskie określenia, które mówią, czym dana część różni się od pozostałych.

Ta sama fraza wciśnięta w każdy nagłówek nie pomaga czytelnikowi, bo konspekt robi się monotonny i przestaje pokazywać różnice między sekcjami. Google w przewodniku po SEO zaleca dodawanie nagłówków, które ułatwiają użytkownikom poruszanie się po stronach. Najpierw sprawdź więc, czy nagłówek odpowiada treści pod nim, a dopiero potem, czy da się w nim zmieścić frazę.

Efektu w pozycjach po samej zmianie nagłówków nie obiecujemy, bo SEO jest procesem długoterminowym i nie ma jednego terminu, który można zagwarantować dla każdej strony. Nagłówki to jeden z elementów, które składają się na optymalizację strony pod SEO, a fraza z nagłówka potrzebuje oparcia w akapitach pod nim. Jak je pisać, wyjaśniamy we wpisie o tym, jak pisać teksty SEO.

Planujesz nową stronę albo porządki w obecnej? Poproś o bezpłatną wycenę.

Jak sprawdzić nagłówki na stronie i poprawić ich poziomy

Strukturę nagłówków obejrzysz w kodzie źródłowym strony. Otwórz go w przeglądarce, wyszukaj znaczniki od <h1 do <h6 i przejdź przez nie w tej kolejności.

1. Wypisz same nagłówki jeden pod drugim i przeczytaj je jak spis treści. Jeśli bez akapitów nie da się zrozumieć, o czym jest strona, problem leży w treści nagłówków, a nie w ich poziomach.
2. Znajdź przeskoki, czyli miejsca, w których po H2 od razu stoi H4. Brakujący poziom uzupełnij albo podnieś niższy nagłówek o jeden stopień.
3. Policz nagłówki H1. Gdy jest ich kilka albo nie ma żadnego, zostaw jeden, który nazywa temat strony.
4. Oddziel nagłówki z treści od nagłówków z szablonu, takich jak nazwa strony, logo, menu czy stopka, i zanotuj, które poziomy pochodzą z motywu.

Nagłówki z motywu poprawia się w szablonie, a nie w edytorze wpisu, więc zanim zaczniesz zmieniać treść, ustal, kto w firmie odpowiada za szablon strony. Zwykle to zadanie dla programisty, który zmienia poziomy w plikach motywu, a nie dla osoby piszącej teksty. Jeśli wolisz przekazać to nam, zacznij od bezpłatnej konsultacji, która trwa 30 minut, albo od audytu SEO.

Najczęstsze pytania