H1, H2, H3 bez chaosu: jak układać nagłówki na stronie firmowej

hierarchia nagłówków na stronie

Na niejednej stronie firmowej nagłówki powstają trochę przypadkiem. Ten tekst wygląda większy, więc dostaje H2. Tamten ma być tylko pogrubiony, ale ktoś klika H3, bo akurat lepiej pasuje do projektu. Efekt? Wizualnie może nawet wyglądać nieźle, ale struktura treści przypomina szufladę, do której wrzucono dokumenty, kable i jedną starą ładowarkę. Niby wszystko jest, tylko trudno się połapać.

Hierarchia nagłówków na stronie nie służy wyłącznie do robienia większych liter. Pomaga uporządkować treść, szybciej przeskanować podstronę i zrozumieć, co jest tematem głównym, co sekcją, a co jej rozwinięciem. Ma znaczenie także dla osób korzystających z czytników ekranu i innych technologii asystujących. Poniżej znajdziesz prosty schemat H1 → H2 → H3 oraz instrukcję, jak sprawdzić nagłówki w WordPressie bez doktoratu z kodu.

Nagłówki na stronie — po co w ogóle się nimi przejmować?

Wyobraź sobie podstronę usługi, na której znajduje się opis oferty, lista korzyści, przebieg współpracy i odpowiedzi na typowe pytania. Jeśli wszystko jest zwykłym tekstem, użytkownik musi przedzierać się przez całość. A przecież większość osób najpierw skanuje stronę wzrokiem. Szuka konkretu: czy to usługa dla mnie, co obejmuje i co mam zrobić dalej.

Nagłówki wprowadzają nowe sekcje i pokazują, jak treść jest poukładana. Dzięki nim można szybko znaleźć interesujący fragment, zamiast czytać stronę od pierwszego zdania do ostatniej kropki. Dobry nagłówek nie mówi tylko „sekcja numer trzy”. Powinien krótko opisywać to, co znajduje się pod nim.

To ważne również z perspektywy dostępności. Osoby korzystające z czytników ekranu mogą traktować nagłówki jak punkty orientacyjne i przechodzić między sekcjami. Jeśli nagłówki są opisowe i ułożone logicznie, łatwiej zrozumieć układ strony bez polegania wyłącznie na wielkości tekstu, kolorze czy pogrubieniu.

Warto jednak zachować zdrowy rozsądek. Uporządkowane nagłówki nie są magicznym przyciskiem „więcej sprzedaży”. Sama poprawa H1, H2 i H3 nie gwarantuje wyższej pozycji w wyszukiwarce, większej konwersji ani wzrostu sprzedaży. To jeden z elementów porządnej strony, obok treści, użyteczności i jakości technicznej.

H1, H2, H3 — prosty układ bez gimnastyki

Najłatwiej myśleć o nagłówkach jak o spisie treści. H1 to główny temat konkretnej strony lub podstrony. H2 oznacza główne sekcje podporządkowane temu tematowi. H3 służy do rozbicia wybranej sekcji H2 na mniejsze części.

Przykładowo, strona usługowa może mieć taki układ:

  • H1: Strony internetowe dla firm
  • H2: Co obejmuje usługa
  • H3: Projekt strony
  • H3: Wdrożenie WordPressa
  • H2: Dla kogo jest ta usługa
  • H2: Jak wygląda współpraca

W tym schemacie H1 obejmuje całą podstronę. Pierwsze H2 rozpoczyna główny obszar informacji, a dwa H3 rozwijają właśnie tę sekcję. Kolejne H2 wracają na poziom głównych tematów. Proste? I o to chodzi.

Przykładowa struktura strony usługowej

Załóżmy, że opisujesz usługę tworzenia sklepu internetowego. H1 może brzmieć „Sklepy internetowe dla firm”. Następnie dodajesz H2 „Co obejmuje sklep”, H2 „Dla jakich firm jest ta usługa” oraz H2 „Najważniejsze etapy projektu”. Jeśli w sekcji „Co obejmuje sklep” chcesz osobno opisać wygląd, obsługę zamówień i prezentację produktów, te elementy mogą otrzymać H3.

H3 powinno należeć do konkretnego H2. Nie wrzucaj go samodzielnie tylko dlatego, że jego wygląd pasuje do projektu. Jeśli tworzysz podsekcję, nie przeskakuj bez powodu z H1 od razu do H3 albo H4. Poziomy mają pokazywać relację między częściami treści, a nie stopień zachwytu nad danym rozmiarem czcionki.

Czy jedna podstrona powinna mieć jeden H1?

Dla typowej podstrony firmowej najbezpieczniejszą praktyką jest jeden główny H1 opisujący temat tej strony. Jeśli użytkownik trafia na podstronę „Projektowanie sklepów internetowych”, właśnie ten temat powinien być jej głównym nagłówkiem. Nie chodzi o sztuczne odhaczanie reguły, tylko o jasne wskazanie, czego dotyczy dana strona.

W WordPressie tytuł strony w większości przypadków jest używany jako H1. To oznacza, że zanim dodasz własny blok H1 w treści, warto sprawdzić, czy tytuł albo szablon nie generuje go już automatycznie. W przeciwnym razie możesz niechcący stworzyć dwa główne nagłówki, choć w edytorze wszystko wygląda niewinnie.

Dokładne zachowanie zależy od użytego motywu, szablonu lub wtyczki. Nie każda konfiguracja WordPressa działa identycznie, dlatego nie warto zakładać, że tytuł zawsze zachowa się tak samo. Najpierw sprawdź strukturę strony, a dopiero potem dodawaj lub zmieniaj nagłówki.

Ważne doprecyzowanie: jeden H1 to bezpieczna rekomendacja dla typowej strony firmowej, a nie twierdzenie, że każdy możliwy dokument HTML musi bez wyjątku wyglądać dokładnie tak samo. W praktyce firmowej jeden jasno opisany temat główny zwykle porządkuje stronę i ułatwia dalsze układanie H2 oraz H3.

Najczęstszy błąd: wybieranie nagłówka po wyglądzie

„H3 jest za małe, a H2 wygląda idealnie” — brzmi znajomo? To jeden z częstszych błędów. Poziom nagłówka powinien wynikać ze znaczenia i miejsca danej sekcji w strukturze, nie z tego, że konkretny wariant ma większą czcionkę albo lepiej pasuje do makiety.

Jeśli tekst jest podsekcją H2, powinien pozostać H3, nawet gdy wizualnie chciałbyś go powiększyć. Za wygląd odpowiadają ustawienia typografii, style i CSS. W WordPressie poziom nagłówka oraz jego prezentację można traktować jako dwie różne sprawy: pierwsza opisuje strukturę, druga wygląd.

Dobry test jest banalny: odsuń na chwilę uwagę od kolorów, rozmiarów i odstępów i zapytaj, czy nagłówek rzeczywiście opisuje sekcję znajdującą się pod nim. Jeśli tak, poziom prawdopodobnie ma sens. Jeśli został wybrany tylko dlatego, że „ładnie wygląda”, czas go poprawić.

Nie używaj też nagłówka do samego pogrubienia krótkiego zdania. Jeżeli coś nie rozpoczyna osobnej sekcji, zwykły tekst z odpowiednim stylem będzie właściwszy. Dzięki temu struktura pozostanie zrozumiała także wtedy, gdy ktoś korzysta z technologii asystującej albo przegląda stronę bez skupiania się na dekoracjach.

Jak sprawdzić nagłówki w WordPressie?

Podstawowy przegląd możesz zrobić bezpośrednio w edytorze blokowym WordPressa. Nie musisz od razu zaglądać do kodu ani urządzać polowania na każdy fragment strony. Zacznij od struktury widocznej w panelu edycji.

Szybki przegląd w Document Overview

  1. Otwórz stronę w edytorze WordPressa.
  2. Przejdź do widoku Document Overview.
  3. Wybierz zakładkę Outline, aby zobaczyć strukturę nagłówków użytych na stronie.
  4. Przejrzyj kolejność H1, H2 i H3 oraz sprawdź, czy odzwierciedla układ treści.
  5. Zaznacz wybrany blok Heading i w jego ustawieniach zmień poziom, jeśli nie pasuje do struktury.

Podczas kontroli zadaj sobie kilka prostych pytań. Czy główny temat podstrony ma logiczny H1? Czy główne sekcje zaczynają się od H2? Czy H3 pojawia się dopiero wtedy, gdy rozwija konkretne H2? Czy nie ma przeskoków poziomów, które powstały tylko dlatego, że dany styl wyglądał atrakcyjniej?

Po opublikowaniu strony warto sprawdzić ją ponownie. Motyw albo szablon może generować własne elementy nagłówków, których nie widać w taki sam sposób podczas samej edycji. Sprawdź więc nie tylko kolejność poziomów, ale również sens treści: czy każdy nagłówek naprawdę opisuje następującą po nim sekcję.

Checklist przed publikacją strony firmowej

Przed kliknięciem „Opublikuj” przejdź przez krótką listę. Taki przegląd zajmuje chwilę, a potrafi wyłapać bałagan, który później będzie widoczny dla użytkowników i trudniejszy do poprawienia.

  • Czy główny temat podstrony ma logiczny H1?
  • Czy tytuł strony albo szablon nie generuje już H1, który został dodany ręcznie?
  • Czy główne sekcje są oznaczone jako H2?
  • Czy każdy H3 jest podsekcją konkretnego H2?
  • Czy przy budowaniu podsekcji nie pominięto poziomów?
  • Czy nagłówki opisują treść, a nie tylko ją powiększają lub pogrubiają?
  • Czy nagłówki są zrozumiałe bez oglądania całego projektu graficznego?
  • Czy każdy nagłówek faktycznie zapowiada sekcję, która znajduje się pod nim?
  • Czy strukturę sprawdzono w Document Overview i zakładce Outline?
  • Czy strona po publikacji nadal ma logiczny układ, także z uwzględnieniem motywu i szablonu?

Jeśli odpowiedzi są twierdzące, podstawowa struktura wygląda sensownie. Nie oznacza to jeszcze, że strona automatycznie będzie lepiej widoczna, zacznie sprzedawać albo poprawi konwersję. Nagłówki nie działają w próżni. Muszą współgrać z treścią, użytecznością strony i jej jakością techniczną.

Najważniejsza zasada jest prosta: poziom nagłówka wynika ze struktury treści, a nie z tego, jak duży ma być tekst. H1 opisuje główny temat podstrony, H2 dzieli go na główne sekcje, a H3 rozwija wybrane H2. W WordPressie sprawdź, czy H1 nie jest już generowany przez tytuł lub szablon, a potem zajrzyj do Document Overview i zakładki Outline. To mały porządek, który pomaga ludziom, technologiom asystującym i samej stronie mówić jednym głosem. Masz stronę, sklep albo materiały graficzne, które proszą się o ogarnięcie? Napisz do INB Marketing i zobaczymy, co da się z tym sensownie zrobić.