Kiedy piszesz tekst w edytorze strony i klikasz „Nagłówek 1″, „Nagłówek 2″ albo „Nagłówek 3″ – w kodzie HTML pojawia się odpowiednio tag <h1>, <h2> lub <h3>. To nie jest tylko kwestia wielkości czcionki. Te tagi tworzą hierarchię, którą czytają zarówno Google, jak i czytniki ekranowe. I jeśli ta hierarchia jest zepsuta, tracisz punkty SEO nawet jeśli treść jest świetna.
Czym są nagłówki i do czego służą
Nagłówki HTML (od <h1> do <h6>) to znaczniki opisujące strukturę treści na stronie. Działają jak spis treści – mówią robotom Google i użytkownikom, co jest tematem głównym strony, co jest podtematem, a co jest szczegółem.
<h1> to tytuł strony – powinien być jeden na podstronie i mówić wprost, o czym ona jest. <h2> to główne sekcje tej strony. <h3> to podsekcje w ramach <h2>. I tak dalej – każdy kolejny poziom zagłębia się w strukturę, ale nigdy nie powinien przeskakiwać poziomów (np. z <h2> od razu do <h4>).
Ważna zasada, którą łatwo przeoczyć: nagłówki opisują strukturę, a nie zastępują treści. Sama treść – opisy, zdania, listy – zawsze powinna znajdować się w tagach <p> lub <ul>/<li>, nigdy w nagłówkach.
Google używa nagłówków do rozumienia tematyki strony i wyciągania featured snippets. Jeśli Twoje nagłówki są poprawne i opisowe, masz wyraźnie większe szanse na wyróżniony fragment w wynikach wyszukiwania.
Najczęstsze błędy w nagłówkach
Zanim przejdziemy do konkretnych przykładów, warto znać błędy, które powtarzają się w większości sklepów internetowych i stron firmowych.
Pierwszym i najpoważniejszym jest wiele <h1> na jednej podstronie. Google oficjalnie mówi, że nie jest to błąd krytyczny, ale w praktyce rozmywa sygnał o tym, czego dotyczy strona. Jeśli masz dwa <h1> – jeden z nazwą produktu, drugi z hasłem marketingowym w banerze – robot Google’a nie wie, który jest ważniejszy.
Drugim błędem jest użycie nagłówków wyłącznie do stylizacji. Jeśli chcesz żeby jakiś tekst był duży i pogrubiony, a używasz do tego <h3> zamiast CSS – wprowadzasz w błąd i roboty, i użytkowników korzystających z czytników ekranowych.
Trzecim błędem jest przeskakiwanie poziomów – np. po <h2> od razu <h4>, bez <h3> pomiędzy. Hierarchia przestaje mieć sens.
Czwartym błędem, bardzo powszechnym w e-commerce, jest brak <h2> na stronach produktowych lub używanie <h3> tam gdzie powinien być <h2>. Sekcje opisu produktu są podzielone na części, ale wszystkie używają <h3> bo tak wyszło z szablonu – i Google nie może prawidłowo odczytać struktury strony.
Piątym błędem jest umieszczanie treści w nagłówkach zamiast w paragrafach. Nagłówek to etykieta sekcji, nie miejsce na zdania i opisy.
Jak wygląda to w praktyce – analiza gadzety-reklamowe.com
Przyjrzyjmy się konkretnej stronie produktowej z gadzety-reklamowe.com – kubkowi podróżnemu Tana (P437.1019). Po analizie kodu HTML widać kilka problemów typowych dla sklepów na podobnych platformach.
Aktualna struktura nagłówków na tej stronie wygląda tak:
<h1> Kubek podróżny 750 ml Tana, plastik z recyklingu z logo P437.1019
<h3> Wyjątkowe cechy produktu
<h3> Możliwości personalizacji
<h3> Idealny dla
<h3> Korzyści biznesowe
<h3> Praktyczne zastosowania
<h2> Polecane gadżety reklamowe z wybranej kategorii
<h5> Warto z nami współpracować
<h5> Darmowa wysyłka od 2000 zł
<h5> Ponad 15 lat doświadczenia
<h5> ZAMÓWIENIA (stopka)
<h5> INFORMACJE (stopka)Co tutaj nie gra?
Po <h1> z nazwą produktu struktura od razu skacze do <h3> – całkowicie pomijając poziom <h2>. Google widzi te sekcje jako „podsekcje czegoś”, ale nie wie czego, bo brakuje poziomu pośredniego. Innymi słowy, sekcje takie jak „Wyjątkowe cechy produktu” czy „Możliwości personalizacji” są przez robota traktowane jako mniej ważne niż powinny.
Kolejny problem: <h2> pojawia się dopiero przy sekcji polecanek produktów. Paradoksalnie polecane produkty mają wyższy priorytet w hierarchii nagłówków niż opis samego produktu, który strona sprzedaje. To odwrócona logika.
Na końcu mamy <h5> w sekcji „Warto z nami współpracować” i w stopce – używane jako etykiety wizualne bez żadnej hierarchii powyżej. Stopka i nawigacja w ogóle nie powinny używać tagów <h>. Wystarczą paragrafy <p> lub <strong> ze stylowaniem CSS.
Jak powinna wyglądać poprawna struktura na tej stronie produktowej?
<h1> Kubek podróżny 750 ml Tana – gadżet reklamowy z nadrukiem
<p> [krótki opis wprowadzający]
<h2> Wyjątkowe cechy produktu
<p> tekst opisowy
<ul><li> lista cech </li></ul>
<h2> Możliwości personalizacji
<p> tekst opisowy
<ul><li> lista metod nadruku </li></ul>
<h2> Idealny dla
<ul><li> lista zastosowań </li></ul>
<h2> Korzyści biznesowe
<p> tekst opisowy
<h2> Polecane produkty z tej kategoriiSekcje opisu produktu to <h2> – bo są głównymi sekcjami tej podstrony. Treść każdej sekcji to <p> lub <ul>/<li>. Stopka i elementy nawigacyjne – zwykłe paragrafy i CSS, żadnych tagów nagłówkowych.
Zasady dla sklepów z wieloma podstronami produktowymi
W sklepie z setkami produktów nagłówki generuje szablon automatycznie – i właśnie tam najczęściej pojawia się problem systemowy. Kilka reguł, które warto wdrożyć na poziomie szablonu:
Na każdej stronie produktowej <h1> to zawsze nazwa produktu – unikalna dla każdego produktu, bez symboli katalogowych wewnątrz tytułu (od tego jest osobne pole w danych strony). Jeśli produkt występuje w wielu wariantach kolorystycznych dostępnych pod różnymi URLami, każda wersja powinna mieć swój unikalny <h1>.
Sekcje opisu produktu (cechy, personalizacja, zastosowania, korzyści) to <h2>. Treść tych sekcji – zdania, listy, opisy – to <p> i <ul>/<li>. Nigdy odwrotnie.
Na stronach kategorii <h1> to nazwa kategorii, np. „Kubki reklamowe z nadrukiem”. Ewentualne podkategorie lub opisy filtrów to <h2>. Treść opisowa kategorii to <p>.
Na stronie głównej <h1> powinien być jeden i opisywać firmę lub jej główną ofertę. Rotacyjny baner z <h1> to częsty błąd – w praktyce na stronie pojawia się kilka <h1> jednocześnie w kodzie, co rozmywa sygnał SEO.
Na blogach zasada jest prosta: <h1> to tytuł artykułu, <h2> to główne sekcje, <h3> to podsekcje w ramach <h2>. Treść zawsze w <p>. Nigdy nie pomijaj poziomów i nie wstawiaj całych akapitów do tagów nagłówkowych.
Jak sprawdzić nagłówki na swojej stronie
Najprostsza metoda to rozszerzenie do przeglądarki – HeadingsMap dla Chrome lub Firefox pokazuje całą hierarchię nagłówków na jednym panelu. Błędy w strukturze widać natychmiast.
Screaming Frog w bezpłatnej wersji (do 500 URLi) pozwala wykryć brakujące <h1>, podwójne <h1> i puste nagłówki dla całego serwisu jednocześnie – co jest nieocenione przy sklepach z dużą liczbą produktów.
Google Search Console w sekcji Core Web Vitals i raportach dotyczących treści też daje sygnały o problemach ze strukturą strony.
Podsumowanie
Nagłówki to jeden z tych elementów SEO, który jest stosunkowo łatwy do naprawienia na poziomie szablonu, a efekty są trwałe i obejmują cały sklep naraz. Zapamiętaj trzy podstawowe zasady: jeden <h1> na podstronę, sekcje treści jako <h2>, a sama treść zawsze w <p> i <ul> – nigdy w nagłówkach. W przypadku sklepu z gadżetami reklamowymi, gdzie tysiące produktów konkuruje o widoczność w bardzo podobnych frazach, każdy element techniczny ma znaczenie.
