Przejdź do treści
SEO i Pozycjonowanie Poradnik

Jak sprawdzić nagłówki H1-H6 na stronie – narzędzia, błędy i najlepsze praktyki

Opublikowano: 18 stycznia 2026 | Zaktualizowano: 5 czerwca 2026

Struktura nagłówków to element SEO, który łatwo przeoczyć, a który potrafi mocno namieszać w widoczności i dostępności strony. H1, H2, H3 - każdy pełni konkretną rolę w hierarchii dokumentu, a błędy w tej hierarchii widać niemal na każdym audycie. Dobra wiadomość jest taka, że sprawdzenie nagłówków zajmuje kilka minut, a naprawa rzadko wymaga programisty. Pokażę Ci kilka metod, od kodu źródłowego po crawlery audytujące całą witrynę naraz.

Krótka odpowiedź

Najszybszy sposób to otworzyć DevTools w przeglądarce (F12), przejść do zakładki Elements i wyszukać tagi h1, h2, h3 itd. Możesz też użyć rozszerzeń przeglądarkowych takich jak SEO Meta in 1 Click, HeadingsMap lub Web Developer.

Do audytu całej witryny świetnie sprawdza się Screaming Frog – przeskanuje wszystkie podstrony i pokaże błędy w strukturze nagłówków w jednym raporcie.

Usługi KC Mobile

Sprawdź naszą ofertę

Potrzebujesz pomocy specjalisty? Skorzystaj z naszych usług i rozwiń swój biznes online.

SEO i Pozycjonowanie Audyt cyfrowy

Czym są nagłówki H1-H6 i jak działa ich hierarchia

Nagłówki to znaczniki HTML od `

` do `

`, które porządkują treść strony w logiczne poziomy. To nie jest dekoracja ani sposób na powiększenie czcionki - to mapa dokumentu, którą czytają zarówno ludzie, jak i roboty wyszukiwarek.

Hierarchia działa jak spis treści w książce:

  • H1 to tytuł główny strony - jeden temat nadrzędny.
  • H2 to rozdziały - główne sekcje treści.
  • H3 to podrozdziały zagnieżdżone wewnątrz H2.
  • H4-H6 to coraz głębsze poziomy, używane rzadziej, najczęściej w długich, technicznych materiałach.

Kluczowa zasada: poziomy nie powinny przeskakiwać. Po H2 wchodzimy w H3, a nie od razu w H4. Robot wyszukiwarki czyta tę strukturę, by zrozumieć, co jest tematem głównym, a co jego rozwinięciem. Jeśli hierarchia jest spójna, Google łatwiej dopasowuje stronę do zapytań i lepiej rozumie kontekst poszczególnych fragmentów.

Wolisz, żebyśmy zrobili to za Ciebie?

Oszczędź czas i uniknij błędów. Zostaw kontakt – wdrożymy to rozwiązanie profesjonalnie.

  • Wdrożenie krok po kroku przez doświadczony zespół
  • Konkretny timeline + cena dopasowana do projektu
  • 18+ lat doświadczenia

Wolisz zlecić to nam? Pozycjonowanie SEO od 1 500 zł/mc – wycena w 24h →

Zleć nam – od 1 500 zł/mc 604 939 140

Dlaczego struktura nagłówków ma znaczenie dla SEO i dostępności

Powodów jest kilka i wykraczają poza samo pozycjonowanie.

Crawlowanie i zrozumienie treści. Roboty wyszukiwarek wykorzystują nagłówki do mapowania tematu strony i wyłuskiwania fragmentów do wyników rozszerzonych oraz odpowiedzi AI. Czysta hierarchia ułatwia Google przypisanie strony do właściwych fraz.

Dostępność i czytniki ekranu. To obszar, o którym większość poradników milczy, a który ma realne znaczenie. Osoby niewidome korzystają z czytników ekranu (screen readerów), które pozwalają nawigować po stronie skacząc między nagłówkami - tak jak osoba widząca przegląda artykuł oczami. Jeśli nagłówki są poprzeskakiwane albo użyte tylko po to, żeby coś powiększyć, taka nawigacja się rozsypuje. Poprawna struktura H1-H6 to nie kosmetyka, tylko wymóg dostępności (WCAG).

Doświadczenie użytkownika (UX). Czytelne nagłówki sprawiają, że użytkownik skanuje treść wzrokiem i szybko znajduje to, czego szuka. Dobrze rozpisana struktura wydłuża czas na stronie i obniża współczynnik odrzuceń - sygnały, które pośrednio wspierają pozycjonowanie. To samo myślenie stoi za poprawnymi meta tagami na stronie, które decydują o klikalności w wynikach.

Jak sprawdzić nagłówki przez kod źródłowy strony

Najprostsza i najszybsza metoda nie wymaga żadnego narzędzia. Wystarczy przeglądarka.

Krok po kroku:

1. Otwórz stronę, którą chcesz sprawdzić.
2. Naciśnij `Ctrl+U` (Windows) lub `Cmd+Option+U` (Mac), aby zobaczyć kod źródłowy HTML.
3. W kodzie naciśnij `Ctrl+F` i wpisz `4. Powtórz wyszukiwanie dla `

W ten sposób w kilkanaście sekund sprawdzisz, ile masz H1 (powinien być jeden) i czy poziomy układają się logicznie. Metoda jest darmowa i działa na każdej stronie, również cudzej - dobry sposób, żeby podejrzeć, jak strukturę nagłówków buduje konkurencja w TOP 10.

Wadą jest to, że surowy kod bywa trudny do czytania, zwłaszcza przy stronach generowanych przez JavaScript, gdzie część treści dogrywa się dopiero w przeglądarce. W takim przypadku lepiej sięgnąć po DevTools, które pokazują wyrenderowany DOM, a nie tylko pierwotny HTML.

Wtyczki przeglądarkowe i narzędzia SEO do podglądu nagłówków

Jeśli chcesz zobaczyć strukturę nagłówków jednym kliknięciem, bez grzebania w kodzie, użyj rozszerzenia do przeglądarki. To najwygodniejsza opcja dla pojedynczej podstrony.

Wtyczki przeglądarkowe (darmowe):

  • Detailed SEO Extension - pokazuje pełne drzewo nagłówków H1-H6 w czytelnej liście, z zachowaniem zagnieżdżenia.
  • SEO Meta in 1 Click - wyświetla nagłówki, meta tagi i podstawowe dane SEO w jednym oknie.
  • HeadingsMap - rysuje wizualną mapę hierarchii nagłówków i od razu sygnalizuje przeskoki poziomów.
  • Web Developer Toolbar - w sekcji Information ma opcję Outline Headings, która podświetla nagłówki bezpośrednio na stronie.

Narzędzia SEO do skali (cała witryna):

Gdy chcesz sprawdzić nagłówki nie na jednej podstronie, lecz na całym serwisie, potrzebujesz crawlera. Screaming Frog SEO Spider przeskanuje wszystkie URL-e i w zakładce H1/H2 pokaże, gdzie brakuje H1, gdzie jest ich kilka i gdzie są zbyt długie. Sitebulb robi to samo w bardziej wizualnej formie, z gotowymi rekomendacjami. Z kolei Ahrefs, Semrush i Senuto w modułach audytu witryny również raportują problemy z nagłówkami obok innych błędów technicznych. To naturalny element audytu SEO.

DevTools i drzewo dostępności - sprawdzanie w narzędziach przeglądarki

Narzędzia deweloperskie (DevTools) to najdokładniejsza metoda, bo pokazują wyrenderowaną wersję strony - czyli to, co naprawdę widzi robot i czytnik ekranu po wykonaniu JavaScriptu.

Podstawowy podgląd:

1. Naciśnij `F12` lub kliknij prawym przyciskiem i wybierz Zbadaj (Inspect).
2. Przejdź do zakładki Elements (Elementy).
3. Użyj `Ctrl+F` wewnątrz DevTools i wpisz `h1`, `h2` itd., aby przeskakiwać między znacznikami w wyrenderowanym DOM.

Drzewo dostępności (Accessibility Tree):

To mniej znana, a bardzo wartościowa funkcja. W Chrome DevTools wejdź w zakładkę Elements, a następnie w panelu bocznym otwórz Accessibility. Znajdziesz tam sekcję z drzewem dostępności i listą nagłówków tak, jak interpretuje je technologia asystująca. Jeśli nagłówek został zrobiony przez pogrubienie tekstu zamiast prawdziwego znacznika `

`, w tym drzewie po prostu go nie będzie - i to jest twój sygnał ostrzegawczy. To sposób, by zweryfikować nie tylko SEO, ale i realną dostępność strony.

Jak sprawdzić strukturę nagłówków w WordPress

WordPress to najpopularniejszy system w Polsce, więc warto znać metody specyficzne dla tej platformy.

Edytor bloków (Gutenberg). Każdy blok akapitu czy nagłówka ma w ustawieniach poziom (H1-H6). Klikając w blok nagłówka, w panelu bocznym zobaczysz przypisany poziom i możesz go zmienić. W menu z trzema kropkami edytora dostępna jest też opcja Przegląd dokumentu z listą wszystkich nagłówków - szybki sposób na podgląd struktury bez wychodzenia z edytora.

Wtyczki SEO. Jeśli korzystasz z Yoast SEO lub Rank Math, w analizie treści pod edytorem zobaczysz ostrzeżenia o braku podnagłówków albo o zbyt długich blokach tekstu bez H2. Rank Math dodatkowo sprawdza obecność słowa kluczowego w nagłówku.

Uwaga na motyw. Najczęstszy problem na WordPressie to motyw, który wstawia własny H1 (np. w nazwie wpisu) i jednocześnie pole tytułu generuje drugi H1. Dlatego po zmianie motywu lub aktualizacji wtyczek zawsze sprawdź nagłówki crawlerem. Więcej o tym znajdziesz w poradniku optymalizacji SEO w WordPress.

Najczęstsze błędy w hierarchii nagłówków

Na audytach powtarza się dosłownie kilka tych samych pomyłek. Oto one, w kolejności od najczęstszej.

Wiele H1 na jednej stronie. Klasyka. Motyw daje jeden H1 w logo lub nazwie strony, a treść drugi. Sygnał o temacie głównym się rozmywa.

Brak H1 w ogóle. Strona zaczyna się od razu od H2 albo cała treść jest w `

` z dużą czcionką. Google nie dostaje jasnego sygnału, o czym jest strona.

Pominięte poziomy. Przeskok z H2 prosto na H4, z pominięciem H3. Hierarchia pęka, a czytnik ekranu gubi logikę nawigacji.

Nagłówki użyte do stylowania. Ktoś chciał powiększyć fragment tekstu, więc opakował go w `

`, choć to nie jest żaden nagłówek. To najgroźniejszy błąd dla dostępności - tworzy fałszywe punkty nawigacji.

Nagłówki puste lub identyczne. Kilka H2 o tej samej treści albo nagłówek bez tekstu wewnątrz. To zaśmieca strukturę i nic nie wnosi.

Jak naprawić nagłówki, H1 a tytuł strony i najlepsze praktyki

Jak naprawić nagłówki. Reguła jest prosta: poziom nagłówka wynika z roli w treści, a nie z wyglądu. Jeśli fragment ma być duży, ale nie jest sekcją - zostaw go akapitem i zmień rozmiar przez CSS (np. klasę z `font-size`), a nie przez znacznik H. Jeśli realnie zmieniasz strukturę, zmień poziom semantycznie: w HTML edytuj znacznik (`

` na `

`), w WordPressie zmień poziom bloku w edytorze, w sklepie czy CMS użyj wbudowanego edytora WYSIWYG. Nigdy nie używaj nagłówków wyłącznie do efektu wizualnego - od tego jest CSS.

H1 a tytuł strony (tag title). To częste źródło nieporozumień. Tag `` to to, co widać na karcie przeglądarki i jako niebieski link w wynikach Google - jest częścią `<head>` i nie wyświetla się na samej stronie. H1 to widoczny tytuł na stronie. Mogą się różnić i często powinny: title bywa skrócony pod SERP, a H1 może być bardziej naturalny. Dobra praktyka to spójność tematu przy różnych sformułowaniach.</p><p class="mb-4"><strong>Najlepsze praktyki pod SEO.</strong> Jeden H1 na stronę z głównym słowem kluczowym. H1 czytelny, długość mniej więcej do 60-70 znaków. Słowa kluczowe w H2 tam, gdzie pasują naturalnie. Logiczna, nieprzeskakująca hierarchia.</p><p class="mb-4"><strong>Co mówi Google.</strong> Oficjalne wytyczne Google są spokojniejsze, niż sądzi wielu marketerów. Google potwierdza, że radzi sobie z wieloma H1 i że nagłówki to nie jest magiczny czynnik rankingowy - służą głównie zrozumieniu struktury treści. Mimo to jeden, dobrze opisany H1 i czysta hierarchia to wciąż sprawdzona praktyka, bo pomaga zarówno robotom, jak i użytkownikom. Jeśli chcesz, żeby ktoś przejrzał nagłówki i całą strukturę Twojej strony, <a href="/kontakt/" class="text-primary hover:underline">skontaktuj się z nami</a> - robimy to w ramach audytów na co dzień.</p><p class="mb-4">Pełną listę takich punktów przechodzimy w audycie strony – <a href="/artykuly/ile-kosztuje-audyt-strony-internetowej-cennik-2026/">cennik audytu znajdziesz tutaj</a>.</p></div> </section> </div> <!-- Contextual KB->KB links (TF-IDF topical mesh, exact-match anchors) --> <section class="internal-links" data-astro-cid-nrugbcqh><div class="related-articles" data-astro-cid-nrugbcqh><h3 data-astro-cid-nrugbcqh>Powiązane pojęcia z bazy wiedzy</h3><ul data-astro-cid-nrugbcqh><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/najlepsze-praktyki-naglowki-h1-h6-w-2026/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak skutecznie wykorzystać nagłówki H1-H6 w 2026 roku?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/ile-czasu-zajmuje-poprawa-naglowki-h1-h6/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak szybko poprawić nagłówki H1-H6 dla lepszego SEO?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/narzedzia-do-analizy-naglowki-h1-h6/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak skutecznie analizować nagłówki H1-H6 w SEO?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/jak-poprawic-naglowki-h1-h6-na-stronie/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak skutecznie optymalizować nagłówki H1-H6?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/naglowki-h1-h6-kompletny-przewodnik-seo/" title="Wspólne słowa kluczowe: seo, naglowki, h1" data-astro-cid-nrugbcqh>Jak skutecznie stosować nagłówki H1-H6 w SEO?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/naglowki-h1-h6-a-pozycje-w-google/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak nagłówki H1-H6 wpływają na Twoje pozycje w Google?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/zaawansowane-techniki-naglowki-h1-h6/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak skutecznie wykorzystać nagłówki H1-H6 w SEO?</a><span class="relevance-badge" data-astro-cid-nrugbcqh>Polecane</span></li><li data-astro-cid-nrugbcqh><a href="/baza-wiedzy/seo/bledy-w-naglowki-h1-h6-ktore-szkodza-pozycjom/" title="Wspólne słowa kluczowe: seo, naglowki" data-astro-cid-nrugbcqh>Jak błędy w nagłówkach mogą wpłynąć na Twoje SEO</a></li></ul></div><div class="related-glossary" data-astro-cid-nrugbcqh><h3 data-astro-cid-nrugbcqh>Słownik pojęć</h3><div class="glossary-tags" data-astro-cid-nrugbcqh><a href="/slownik/screaming-frog-co-to-jest/" class="glossary-tag" title="Definicja: Screaming Frog" data-astro-cid-nrugbcqh>Screaming Frog</a><a href="/slownik/siec-reklamowa-google-co-to/" class="glossary-tag" title="Definicja: Sieć reklamowa Google" data-astro-cid-nrugbcqh>Sieć reklamowa Google</a><a href="/slownik/google-search-console-co-to/" class="glossary-tag" title="Definicja: Google Search Console" data-astro-cid-nrugbcqh>Google Search Console</a><a href="/slownik/google-tag-manager-co-to/" class="glossary-tag" title="Definicja: Google Tag Manager" data-astro-cid-nrugbcqh>Google Tag Manager</a><a href="/slownik/google-cloud-co-to-jest/" class="glossary-tag" title="Definicja: Google Cloud" data-astro-cid-nrugbcqh>Google Cloud</a><a href="/slownik/google-penguin-co-to-jest/" class="glossary-tag" title="Definicja: Google Penguin" data-astro-cid-nrugbcqh>Google Penguin</a><a href="/slownik/google-panda-co-to-jest/" class="glossary-tag" title="Definicja: Google Panda" data-astro-cid-nrugbcqh>Google Panda</a><a href="/slownik/google-hummingbird-co-to-jest/" class="glossary-tag" title="Definicja: Google Hummingbird" data-astro-cid-nrugbcqh>Google Hummingbird</a></div></div></section> <!-- Tools Mentioned --> <section class="mt-12 p-6 bg-neutral-50 rounded-xl"> <h2 class="text-xl font-bold mb-4">Wspomniane narzędzia</h2> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Chrome DevTools </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> HeadingsMap </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> SEO Meta in 1 Click </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Web Developer Toolbar </span><span class="px-3 py-1.5 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700"> Screaming Frog SEO Spider </span> </div> </section> <!-- Lead Magnet CTA --> <div class="my-12 rounded-2xl bg-gradient-to-r from-primary-50 to-accent-50 border border-primary-100 relative overflow-hidden"> <div class="absolute top-0 right-0 w-40 h-40 bg-primary-500/5 rounded-full -translate-y-1/2 translate-x-1/2"></div> <div class="absolute bottom-0 left-0 w-24 h-24 bg-accent-500/5 rounded-full translate-y-1/2 -translate-x-1/2"></div> <div class="relative p-6 md:p-8"> <div class="flex items-start gap-4"> <div class="hidden sm:flex w-12 h-12 bg-primary-600 rounded-xl items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path> </svg> </div> <div class="flex-1"> <h3 class="text-xl font-bold text-neutral-900 mb-2">Chcesz więcej ruchu z Google?</h3> <p class="text-neutral-600 mb-5 leading-relaxed">Pozycjonujemy strony firmowe i sklepy internetowe. White-hat SEO, comiesięczne raporty. Bez długich umów.</p> <div class="flex flex-wrap items-center gap-3"> <a href="/pozycjonowanie-seo/" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-600 text-white rounded-xl font-bold text-sm no-underline hover:bg-primary-700 hover:text-white hover:shadow-lg transition-all shadow-md" data-umami-event="click-lead-magnet" data-umami-event-category="seo" data-umami-event-location="kb-pre-faq"> Bezpłatny audyt SEO <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> </svg> </a> <a href="/pozycjonowanie-seo/" class="inline-flex items-center gap-1.5 text-primary-600 font-semibold text-sm hover:text-primary-800 transition-colors" data-umami-event="click-lead-magnet-secondary" data-umami-event-category="seo"> Sprawdź cennik SEO <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> </div> </div> </div> </div> <!-- FAQ Section --> <section class="mt-12"> <h2 class="text-2xl font-bold mb-6">Najczęściej zadawane pytania</h2> <div class="space-y-4"> <details class="group bg-white border border-neutral-200 rounded-lg" open> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Jak sprawdzić nagłówki H1 na stronie?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Najszybciej otwórz kod źródłowy (Ctrl+U) i wyszukaj Ctrl+F frazę h1. Wygodniej zadziała wtyczka przeglądarkowa, np. Detailed SEO Extension lub HeadingsMap, która pokaże całe drzewo nagłówków jednym kliknięciem. Do dokładnej weryfikacji wyrenderowanej strony użyj DevTools (F12) i zakładki Elements. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Ile nagłówków H1 powinno być na jednej stronie?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Najlepiej dokładnie jeden. HTML5 dopuszcza wiele H1, a Google potwierdza, że sobie z tym radzi, ale w praktyce strony z jednym, dobrze opisanym H1 są czytelniejsze dla robotów i czytników ekranu. Pozostałe tematy umieszczaj w nagłówkach H2. Częsty błąd to drugi H1 wstawiany przez motyw. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Czy nagłówek H1 to to samo co tytuł strony (title)?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Nie. Tag title to tekst widoczny na karcie przeglądarki i jako niebieski link w wynikach Google, znajduje się w sekcji head i nie wyświetla się na stronie. H1 to widoczny tytuł na samej stronie. Mogą się różnić sformułowaniem, choć powinny dotyczyć tego samego tematu, by zachować spójność. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Czy można pominąć poziom nagłówka, np. z H2 na H4?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Nie powinno się tego robić. Przeglądarka wyświetli stronę, ale przeskoki poziomów psują hierarchię dokumentu i utrudniają nawigację osobom korzystającym z czytników ekranu. Zachowaj kolejność: po H2 wchodź w H3, a dopiero potem w H4. Crawlery typu Screaming Frog sygnalizują takie przeskoki jako błąd. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Jakim narzędziem sprawdzić nagłówki na całej stronie internetowej?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Do audytu całej witryny użyj crawlera. Screaming Frog SEO Spider przeskanuje wszystkie podstrony i w zakładce H1/H2 pokaże braki, duplikaty i zbyt długie nagłówki. Podobnie działają Sitebulb oraz moduły audytu w Ahrefs, Semrush i Senuto. Wtyczki przeglądarkowe sprawdzają tylko pojedynczą podstronę. </div> </details><details class="group bg-white border border-neutral-200 rounded-lg"> <summary class="flex items-center justify-between p-4 cursor-pointer font-medium"> <span>Jak zmienić nagłówek na stronie bez zmiany wyglądu?</span> <svg class="w-5 h-5 text-neutral-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </summary> <div class="px-4 pb-4 text-neutral-600"> Jeśli chcesz zachować rozmiar i wygląd, ale poprawić semantykę, zmień znacznik HTML, a wygląd ustaw przez CSS (klasę z font-size). W WordPressie zmień poziom bloku w edytorze Gutenberg. Nigdy nie używaj nagłówków H tylko po to, by powiększyć tekst, bo tworzysz fałszywe punkty nawigacji dla czytników ekranu. </div> </details> </div> </section> <!-- Citations (E-E-A-T references for pillar articles) --> <!-- Tags --> <div class="mt-8 flex flex-wrap gap-2"> <span class="text-sm text-neutral-500">#seo</span><span class="text-sm text-neutral-500">#nagłówki</span><span class="text-sm text-neutral-500">#h1</span><span class="text-sm text-neutral-500">#h2</span><span class="text-sm text-neutral-500">#hierarchia nagłówków</span><span class="text-sm text-neutral-500">#audyt seo</span><span class="text-sm text-neutral-500">#screaming frog</span><span class="text-sm text-neutral-500">#devtools</span><span class="text-sm text-neutral-500">#on-page seo</span><span class="text-sm text-neutral-500">#struktura strony</span> </div> <!-- Author Box --> <div class="author-box not-prose mt-12 p-6 bg-gradient-to-r from-neutral-50 to-primary-50 border border-neutral-200 rounded-xl"> <div class="flex flex-col sm:flex-row gap-6 items-start"> <div class="flex-shrink-0"> <img src="/authors/krzysztof-czapnik.jpg" alt="Zdjęcie autora: Krzysztof Czapnik" width="100" height="100" class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg" loading="lazy"> </div> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <span class="text-xs uppercase tracking-wide text-primary-600 font-semibold">O autorze</span> </div> <h3 class="text-xl font-bold text-neutral-900 mb-1">Krzysztof Czapnik</h3> <p class="text-sm text-primary-600 font-medium mb-3">Founder & Technical Lead, KC Mobile</p> <p class="text-neutral-600 leading-relaxed text-sm mb-4">18 lat WordPress + 12 lat WooCommerce. Specjalizuję się w technicznej stronie e-commerce: automatyzacje WooCommerce, Google Ads dla SMB, migracje sklepów i optymalizacja konwersji.</p> <p class="text-neutral-700 text-sm font-medium mb-4">Potrzebujesz pomocy z tym tematem? Napisz – odpowiem osobiście w 24h.</p> <div class="flex flex-wrap gap-3"> <a href="/kontakt/" class="inline-flex items-center gap-2 text-sm bg-primary-600 text-white px-4 py-2 rounded-lg font-semibold no-underline hover:bg-primary-700 hover:text-white transition-colors" data-umami-event="click-cta" data-umami-event-location="author-box"> Napisz do mnie </a> <a href="tel:+48604939140" class="inline-flex items-center gap-2 text-sm text-neutral-600 hover:text-primary-600 transition-colors" data-umami-event="click-phone" data-umami-event-location="author-box"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> 604 939 140 </a> </div> </div> </div> </div> <!-- Service Links --> <section class="mt-10 mb-2"> <p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-4">Potrzebujesz pomocy?</p> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3"> <a href="/strony-internetowe/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">🌐</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Strony internetowe</span> <span class="text-xs text-neutral-500 leading-snug">Strony WWW od 3000 zł, 18+ lat doświadczenia</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a><a href="/google-ads/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">📈</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Google Ads</span> <span class="text-xs text-neutral-500 leading-snug">Kampanie Google Ads, mierzalny ROAS</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a><a href="/pozycjonowanie-seo/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">🔍</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Pozycjonowanie SEO</span> <span class="text-xs text-neutral-500 leading-snug">SEO od 2000 zł/mies., bez długich umów</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a><a href="/sklepy-internetowe/" class="group flex flex-col gap-2 p-4 rounded-xl border border-neutral-200 bg-white hover:border-primary-300 hover:shadow-md hover:-translate-y-0.5 transition-all"> <span class="text-2xl leading-none">🛒</span> <span class="text-sm font-bold text-neutral-900 group-hover:text-primary-600 transition-colors">Sklepy internetowe</span> <span class="text-xs text-neutral-500 leading-snug">Sklepy WooCommerce od 5000 zł</span> <span class="mt-auto pt-1 text-xs font-semibold text-primary-600 inline-flex items-center gap-1 group-hover:gap-2 transition-all"> Sprawd\u017a <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> </svg> </span> </a> </div> </section> <!-- CTA Banner - dopasowany do kategorii i intencji artykułu --> <div class="mt-8 section-dark rounded-2xl p-6 md:p-8"> <h3 class="text-lg md:text-xl font-bold text-white mb-2">Wolisz, żebyśmy zrobili to za Ciebie?</h3> <p class="text-neutral-300 mb-4">Oszczędź czas i uniknij błędów. Zostaw kontakt – wdrożymy to rozwiązanie profesjonalnie.</p> <ul class="space-y-2 mb-6 text-neutral-300"> <li class="flex items-start gap-3"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> <span>Wdrożenie krok po kroku przez doświadczony zespół</span> </li><li class="flex items-start gap-3"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> <span>Konkretny timeline + cena dopasowana do projektu</span> </li><li class="flex items-start gap-3"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> <span>18+ lat doświadczenia</span> </li> </ul> <p class="text-sm text-neutral-300 mb-3">Wolisz zlecić to nam? <a href="/pozycjonowanie-seo/" class="text-accent-300 font-bold hover:underline" data-umami-event="bridge-click" data-umami-event-location="kb-bottom" data-umami-event-service="Pozycjonowanie SEO">Pozycjonowanie SEO od 1 500 zł/mc – wycena w 24h →</a></p> <div class="flex flex-wrap items-center gap-3"> <a href="/pozycjonowanie-seo/" class="btn-accent" data-umami-event="bridge-click" data-umami-event-location="kb-bottom-btn" data-umami-event-service="Pozycjonowanie SEO"> Zleć nam – od 1 500 zł/mc </a> <a href="tel:+48604939140" class="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 text-white font-semibold hover:bg-white/20 transition-all"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> 604 939 140 </a> </div> </div> </div> <!-- Sidebar --> <aside class="lg:col-span-1"> <div class="sticky top-8 space-y-8"> <!-- CTA Card --> <div class="rounded-xl border-2 border-primary-200 p-6 bg-gradient-to-br from-white to-primary-50 shadow-sm"> <h3 class="text-xl font-bold mb-3">Chcesz poprawić widoczność swojej strony w Google?</h3> <p class="text-neutral-600 mb-6"> Skontaktuj się z nami – pomożemy rozwiązać Twój problem. </p> <form class="space-y-4" action="/api/contact.php" method="POST" data-contact-form> <input type="hidden" name="source" value="landing-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony"> <div class="form-group"> <label for="name-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" class="label"> Imię i nazwisko <span class="text-error">*</span> </label> <input type="text" id="name-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" name="name" class="input" placeholder="Jan Kowalski" required aria-required="true" autocomplete="name"> </div> <div class="grid sm:grid-cols-2 gap-4"> <div class="form-group"> <label for="email-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" class="label"> Email <span class="text-error">*</span> </label> <input type="email" id="email-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" name="email" class="input" placeholder="jan@firma.pl" required aria-required="true" autocomplete="email"> </div> <div class="form-group"> <label for="phone-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" class="label"> Telefon <span class="label-optional">(opcjonalnie)</span> </label> <input type="tel" id="phone-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" name="phone" class="input" placeholder="+48 500 000 000" autocomplete="tel"> </div> </div> <div class="form-group"> <label for="budget-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" class="label"> Orientacyjny budżet <span class="label-optional">(opcjonalnie)</span> </label> <select id="budget-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" name="budget" class="input"> <option value="">Wybierz zakres</option> <option value="do-5000">Do 5 000 zł</option> <option value="5000-15000">5 000 – 15 000 zł</option> <option value="15000-plus">Powyżej 15 000 zł</option> <option value="nie-wiem">Nie wiem jeszcze</option> </select> </div> <div class="form-group"> <label for="message-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" class="label"> Wiadomość <span class="label-optional">(opcjonalnie)</span> </label> <textarea id="message-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony" name="message" rows="2" class="input resize-none" placeholder="Opisz krótko swoje potrzeby..."></textarea> </div> <!-- Honeypot anti-spam --> <div class="absolute -left-[9999px]" aria-hidden="true"> <input type="text" name="website" tabindex="-1" autocomplete="off"> </div> <button type="submit" class="btn-accent w-full" data-submit-btn data-umami-event="form-submit" data-umami-event-source="landing-seo-jak-sprawdzic-naglowki-h1-h6-swojej-strony"> <span data-btn-text>Odbierz bezpłatną wycenę</span> <span data-btn-loading class="hidden"> <svg class="animate-spin h-5 w-5 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </span> </button> <p class="text-sm text-center text-neutral-600"> Wolisz od razu porozmawiać? <a href="tel:+48604939140" class="text-primary-600 font-semibold hover:underline whitespace-nowrap" data-umami-event="click-phone" data-umami-event-location="form-alt">Zadzwoń: 604 939 140</a> </p> <div data-form-success class="hidden p-4 bg-success/10 border border-success/20 rounded-lg text-center"> <div class="flex items-center justify-center gap-2 text-success font-medium mb-1"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> </svg> Dziękujemy za wiadomość! </div> <p class="text-sm text-neutral-700">Skontaktujemy się w ciągu 24 godzin.</p> </div> <div data-form-error class="hidden p-4 bg-error/10 border border-error/20 rounded-lg text-center"> <p class="text-sm text-error font-medium">Wystąpił błąd. Spróbuj ponownie lub zadzwoń: <a href="tel:+48604939140" class="underline" data-umami-event="click-phone" data-umami-event-location="form-error">604 939 140</a></p> </div> <p class="text-xs text-neutral-600 text-center"> <svg class="w-4 h-4 inline mr-1 text-success" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path> </svg> Wysyłając formularz, zgadzasz się na przetwarzanie danych w celu kontaktu (<a href="/polityka-prywatnosci/" class="underline hover:text-primary-600">polityka prywatności</a>). Odpowiadamy w 24h. </p> </form> </div> <!-- Related Entries --> <div class="rounded-xl border border-neutral-100 p-6 shadow-sm"> <h3 class="font-bold mb-4">Powiązane artykuły</h3> <ul class="space-y-3"> <li> <a href="/baza-wiedzy/seo/naglowki-h1-h6-kompletny-przewodnik-seo/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Jak skutecznie stosować nagłówki H1-H6 w SEO? </a> </li><li> <a href="/baza-wiedzy/seo/on-page-seo-optymalizacja-strony/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> On-page SEO - kompletna optymalizacja strony pod Google </a> </li><li> <a href="/baza-wiedzy/seo/jak-poprawic-meta-tagi-na-stronie/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Jak poprawić meta tagi na stronie – przewodnik SEO na 2026 rok </a> </li><li> <a href="/baza-wiedzy/seo/jak-pozycjonowac-strone-w-google/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Jak pozycjonować stronę w Google - kompletny przewodnik SEO </a> </li><li> <a href="/baza-wiedzy/seo/keyword-research-jak-dobierac-slowa-kluczowe/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Keyword research - jak skutecznie dobierać słowa kluczowe </a> </li><li> <a href="/baza-wiedzy/seo/link-building-jak-zdobywac-linki/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Link building – jak zdobywać wartościowe linki w praktyce </a> </li><li> <a href="/baza-wiedzy/seo/schema-org-dane-strukturalne/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Schema.org i dane strukturalne - przewodnik po rich snippets </a> </li><li> <a href="/baza-wiedzy/seo/indeksowanie-stron-google-jak-przyspieszyc/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Indeksowanie stron w Google: jak przyspieszyć (kompletny przewodnik 2026) </a> </li><li> <a href="/baza-wiedzy/seo/google-discover-jak-trafic/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Google Discover - jak trafić i zdobyć masowy ruch </a> </li><li> <a href="/baza-wiedzy/seo/najlepsze-praktyki-link-building-w-2026/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Skuteczne strategie link building w 2026 roku </a> </li><li> <a href="/baza-wiedzy/seo/jak-sprawdzic-alt-obrazkow-swojej-strony/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Jak sprawdzić alt obrazków na stronie – kompletny poradnik 2026 </a> </li><li> <a href="/baza-wiedzy/seo/jak-sprawdzic-google-search-console-swojej-strony/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> Jak skutecznie wykorzystać Google Search Console? </a> </li> </ul> </div> <!-- Cross-Silo Links --> <div class="rounded-xl border border-neutral-100 p-6 shadow-sm"> <h3 class="font-bold mb-4">Z innych kategorii</h3> <ul class="space-y-3"> <li> <a href="/baza-wiedzy/google-ads/google-ads-a-seo-roznice-synergii/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> <span class="text-xs text-neutral-400 uppercase">google-ads</span> <br>Google Ads a SEO - różnice, kiedy wybrać i jak łączyć </a> </li><li> <a href="/baza-wiedzy/google-ads/grupy-reklam-poradnik-dla-poczatkujacych/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> <span class="text-xs text-neutral-400 uppercase">google-ads</span> <br>Jak skutecznie tworzyć grupy reklam w Google Ads? </a> </li><li> <a href="/baza-wiedzy/wordpress/najlepsze-wtyczki-wordpress-2026/" class="text-neutral-700 hover:text-primary-600 text-sm block line-clamp-2"> <span class="text-xs text-neutral-400 uppercase">wordpress</span> <br>Najlepsze wtyczki WordPress 2026 – co naprawdę instaluję klientom </a> </li> </ul> </div> <!-- Contact Info --> <div class="rounded-xl border border-neutral-100 p-6 shadow-sm bg-neutral-50"> <h3 class="font-bold mb-4">Szybki kontakt</h3> <div class="space-y-3 text-sm"> <a href="tel:+48604939140" class="flex items-center gap-3 text-neutral-700 hover:text-primary-600"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> +48 604 939 140 </a> <a href="mailto:biuro@kcmobile.pl" class="flex items-center gap-3 text-neutral-700 hover:text-primary-600"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> biuro@kcmobile.pl </a> </div> </div> </div> </aside> </div> </div> </article> <section class="section"> <div class="container-default"> <div class="section-dark rounded-2xl p-8 md:p-12 text-center"> <h2 class="text-2xl font-bold text-white mb-4">Potrzebujesz pomocy specjalisty?</h2> <p class="text-neutral-300 mb-8 max-w-2xl mx-auto"> Skorzystaj z naszych usług w największych miastach Polski </p> <div class="flex flex-wrap justify-center gap-3"> <a href="/www/pozycjonowanie-seo-wroclaw/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Pozycjonowanie SEO Wrocław </a><a href="/www/pozycjonowanie-seo-katowice/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Pozycjonowanie SEO Katowice </a><a href="/www/pozycjonowanie-seo-krakow/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Pozycjonowanie SEO Kraków </a><a href="/www/pozycjonowanie-seo-poznan/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Pozycjonowanie SEO Poznań </a><a href="/www/pozycjonowanie-seo-warszawa/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Pozycjonowanie SEO Warszawa </a><a href="/www/pozycjonowanie-seo-lodz/" class="px-5 py-2.5 bg-white/10 border border-white/20 rounded-lg text-white hover:bg-white/20 transition-all font-medium text-sm"> Pozycjonowanie SEO Łódź </a> </div> </div> </div> </section> <section class="py-8 pb-24 lg:pb-8"> <div class="container-default flex flex-wrap justify-center gap-6"> <a href="/baza-wiedzy/seo/" class="text-primary-600 hover:underline inline-flex items-center gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path> </svg> Więcej z kategorii SEO i Pozycjonowanie </a> <a href="/baza-wiedzy/" class="text-neutral-600 hover:text-primary-600"> Wszystkie kategorie </a> </div> </section> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Jak sprawdzić nagłówki H1 na stronie?","acceptedAnswer":{"@type":"Answer","text":"Najszybciej otwórz kod źródłowy (Ctrl+U) i wyszukaj Ctrl+F frazę h1. Wygodniej zadziała wtyczka przeglądarkowa, np. Detailed SEO Extension lub HeadingsMap, która pokaże całe drzewo nagłówków jednym kliknięciem. Do dokładnej weryfikacji wyrenderowanej strony użyj DevTools (F12) i zakładki Elements."}},{"@type":"Question","name":"Ile nagłówków H1 powinno być na jednej stronie?","acceptedAnswer":{"@type":"Answer","text":"Najlepiej dokładnie jeden. HTML5 dopuszcza wiele H1, a Google potwierdza, że sobie z tym radzi, ale w praktyce strony z jednym, dobrze opisanym H1 są czytelniejsze dla robotów i czytników ekranu. Pozostałe tematy umieszczaj w nagłówkach H2. Częsty błąd to drugi H1 wstawiany przez motyw."}},{"@type":"Question","name":"Czy nagłówek H1 to to samo co tytuł strony (title)?","acceptedAnswer":{"@type":"Answer","text":"Nie. Tag title to tekst widoczny na karcie przeglądarki i jako niebieski link w wynikach Google, znajduje się w sekcji head i nie wyświetla się na stronie. H1 to widoczny tytuł na samej stronie. Mogą się różnić sformułowaniem, choć powinny dotyczyć tego samego tematu, by zachować spójność."}},{"@type":"Question","name":"Czy można pominąć poziom nagłówka, np. z H2 na H4?","acceptedAnswer":{"@type":"Answer","text":"Nie powinno się tego robić. Przeglądarka wyświetli stronę, ale przeskoki poziomów psują hierarchię dokumentu i utrudniają nawigację osobom korzystającym z czytników ekranu. Zachowaj kolejność: po H2 wchodź w H3, a dopiero potem w H4. Crawlery typu Screaming Frog sygnalizują takie przeskoki jako błąd."}},{"@type":"Question","name":"Jakim narzędziem sprawdzić nagłówki na całej stronie internetowej?","acceptedAnswer":{"@type":"Answer","text":"Do audytu całej witryny użyj crawlera. Screaming Frog SEO Spider przeskanuje wszystkie podstrony i w zakładce H1/H2 pokaże braki, duplikaty i zbyt długie nagłówki. Podobnie działają Sitebulb oraz moduły audytu w Ahrefs, Semrush i Senuto. Wtyczki przeglądarkowe sprawdzają tylko pojedynczą podstronę."}},{"@type":"Question","name":"Jak zmienić nagłówek na stronie bez zmiany wyglądu?","acceptedAnswer":{"@type":"Answer","text":"Jeśli chcesz zachować rozmiar i wygląd, ale poprawić semantykę, zmień znacznik HTML, a wygląd ustaw przez CSS (klasę z font-size). W WordPressie zmień poziom bloku w edytorze Gutenberg. Nigdy nie używaj nagłówków H tylko po to, by powiększyć tekst, bo tworzysz fałszywe punkty nawigacji dla czytników ekranu."}}]}</script> <div class="fixed bottom-0 left-0 right-0 z-50 lg:hidden bg-white border-t border-neutral-200 shadow-lg px-4 py-3 safe-area-bottom" id="sticky-cta"> <div class="flex items-center gap-3 max-w-lg mx-auto"> <a href="tel:+48604939140" class="flex items-center justify-center gap-2 flex-1 py-2.5 bg-primary-600 text-white rounded-lg font-semibold text-sm no-underline hover:bg-primary-700 hover:text-white transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> Zadzwoń </a> <a href="/kontakt/" class="flex items-center justify-center flex-1 py-2.5 bg-accent-500 text-white rounded-lg font-semibold text-sm hover:bg-accent-600 transition-colors"> Bezpłatna wycena </a> </div> </div> <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","@id":"https://kcmobile.pl/baza-wiedzy/seo/jak-sprawdzic-naglowki-h1-h6-swojej-strony/#article","headline":"Jak sprawdzić nagłówki H1-H6 na stronie – narzędzia, błędy i najlepsze praktyki","description":"Jak sprawdzić nagłówki H1-H6 strony? Kod źródłowy, wtyczki, Screaming Frog, DevTools i WordPress. Najczęstsze błędy hierarchii i jak je naprawić.","image":"https://kcmobile.pl/images/kb/articles/seo--jak-sprawdzic-naglowki-h1-h6-swojej-strony.webp","url":"https://kcmobile.pl/baza-wiedzy/seo/jak-sprawdzic-naglowki-h1-h6-swojej-strony/","mainEntityOfPage":{"@type":"WebPage","@id":"https://kcmobile.pl/baza-wiedzy/seo/jak-sprawdzic-naglowki-h1-h6-swojej-strony/"},"isPartOf":{"@type":"CollectionPage","@id":"https://kcmobile.pl/baza-wiedzy/seo/#collection","name":"SEO i Pozycjonowanie","url":"https://kcmobile.pl/baza-wiedzy/seo/","isPartOf":{"@type":"WebPage","@id":"https://kcmobile.pl/pozycjonowanie-seo/#page","name":"Pozycjonowanie SEO"}},"datePublished":"2026-01-18","dateModified":"2026-06-05T10:00:00Z","wordCount":1728,"author":{"@id":"https://kcmobile.pl/#author"},"publisher":{"@id":"https://kcmobile.pl/#organization"},"speakable":{"@type":"SpeakableSpecification","cssSelector":[".quick-answer",".article-intro"]},"about":{"@type":"Service","@id":"https://kcmobile.pl/pozycjonowanie-seo/#service","name":"Pozycjonowanie SEO","provider":{"@id":"https://kcmobile.pl/#organization"}},"inLanguage":"pl-PL"}</script> </main> <footer class="bg-dark-deep text-neutral-300"> <!-- Main Footer --> <div class="container-default py-12 lg:py-16"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 lg:gap-10"> <!-- Brand --> <div class="col-span-2 md:col-span-3 lg:col-span-1"> <a href="/" class="flex items-center mb-4 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded"> <img src="/logo-white.svg" alt="KC Mobile" class="h-8 w-auto"> </a> <p class="text-sm text-neutral-400 mb-4 leading-relaxed"> Agencja interaktywna specjalizująca się w tworzeniu stron internetowych, pozycjonowaniu i marketingu online. </p> <!-- Badges --> <div class="flex flex-wrap items-center gap-3 mb-4"> <a href="https://www.google.com/partners/agency?id=4468565598" target="_blank" rel="noopener"><img src="https://www.gstatic.com/partners/badge/images/2025/PartnerBadgeClickable.svg" alt="Google Partner" class="h-12" width="100" height="48" loading="lazy"></a> <div class="flex flex-col gap-1"> <span class="inline-flex items-center gap-1 text-xs text-neutral-300 bg-dark-card px-2 py-1 rounded border border-primary-900/30"> <svg class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> 5,0/5 (1 opinia) </span> <span class="inline-flex items-center gap-1 text-xs text-neutral-300 bg-dark-card px-2 py-1 rounded border border-primary-900/30"> <svg class="w-3 h-3 text-success" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> </svg> 18+ lat doświadczenia </span> </div> </div> <!-- Social Links --> <div class="flex gap-3"> <a href="https://www.facebook.com/AI.KCMobile/" class="w-9 h-9 flex items-center justify-center rounded-lg bg-dark-card border border-primary-900/30 text-neutral-400 hover:bg-primary-600 hover:text-white hover:border-primary-600 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500" aria-label="Facebook" target="_blank" rel="noopener noreferrer"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"></path> </svg> </a> </div> </div> <!-- Services --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Usługi</h4> <ul class="space-y-2"> <li> <a href="/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Strony internetowe </a> </li><li> <a href="/pozycjonowanie-seo/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Pozycjonowanie SEO </a> </li><li> <a href="/social-media/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Social Media </a> </li><li> <a href="/facebook-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Facebook Ads </a> </li><li> <a href="/google-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Google Ads </a> </li><li> <a href="/sklepy-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Sklepy internetowe </a> </li><li> <a href="/wordpress/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> WordPress </a> </li><li> <a href="/automatyzacje/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Automatyzacje </a> </li><li> <a href="/wdrozenia-ai/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Wdrożenia AI </a> </li><li> <a href="/analityka-internetowa/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Analityka internetowa </a> </li><li> <a href="/pomiar-konwersji/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Pomiar konwersji </a> </li> </ul> </div> <!-- Knowledge Base --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Baza wiedzy</h4> <ul class="space-y-2"> <li> <a href="/baza-wiedzy/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Wszystkie artykuły </a> </li><li> <a href="/baza-wiedzy/wordpress/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> WordPress </a> </li><li> <a href="/baza-wiedzy/ecommerce/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> E-commerce </a> </li><li> <a href="/baza-wiedzy/seo/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> SEO </a> </li><li> <a href="/baza-wiedzy/google-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Google Ads </a> </li><li> <a href="/baza-wiedzy/facebook-ads/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Facebook Ads </a> </li><li> <a href="/baza-wiedzy/social-media/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Social Media </a> </li><li> <a href="/baza-wiedzy/marketing/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Marketing </a> </li><li> <a href="/narzedzia/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Narzędzia </a> </li><li> <a href="/materialy/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Materiały </a> </li> </ul> </div> <!-- Industries --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Dla branż</h4> <ul class="space-y-2"> <li> <a href="/dla/firma-hydrauliczna/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla hydraulików </a> </li><li> <a href="/dla/salon-fryzjerski/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla fryzjerów </a> </li><li> <a href="/dla/gabinet-stomatologiczny/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla dentystów </a> </li><li> <a href="/dla/warsztat-samochodowy/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla warsztatów </a> </li><li> <a href="/dla/restauracja/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla restauracji </a> </li><li> <a href="/dla/kancelaria-prawna/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla prawników </a> </li><li> <a href="/dla/biuro-rachunkowe/strony-internetowe/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Dla księgowych </a> </li> </ul> </div> <!-- Popular Cities --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Popularne miasta</h4> <ul class="space-y-2"> <li> <a href="/www/strony-internetowe-warszawa/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Warszawa </a> </li><li> <a href="/www/strony-internetowe-krakow/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Kraków </a> </li><li> <a href="/www/strony-internetowe-wroclaw/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Wrocław </a> </li><li> <a href="/www/strony-internetowe-poznan/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Poznań </a> </li><li> <a href="/www/strony-internetowe-gdansk/" class="text-sm text-neutral-400 hover:text-accent-400 transition-colors"> Gdańsk </a> </li> </ul> <a href="/www/" class="text-sm text-primary-400 hover:text-primary-300 transition-colors mt-3 inline-block"> Wszystkie miasta → </a> </div> <!-- Contact --> <div> <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Kontakt</h4> <ul class="space-y-3 text-sm"> <li class="flex items-start gap-2"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> <a href="tel:+48604939140" class="text-neutral-400 hover:text-white transition-colors" data-umami-event="click-phone" data-umami-event-location="footer"> +48 604 939 140 </a> </li> <li class="flex items-start gap-2"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> <a href="mailto:biuro@kcmobile.pl" class="text-neutral-400 hover:text-white transition-colors" data-umami-event="click-email" data-umami-event-location="footer"> biuro@kcmobile.pl </a> </li> <li class="flex items-start gap-2"> <svg class="w-5 h-5 text-accent-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span class="text-neutral-400">Pon-Pt 8:00-16:00<br>Sob 8:00-13:00</span> </li> </ul> </div> </div> </div> <!-- Bottom Bar --> <div class="border-t border-primary-900/30"> <div class="container-default py-6"> <div class="flex flex-col md:flex-row justify-between items-center gap-4"> <p class="text-sm text-neutral-500"> © 2026 KC Mobile. Wszelkie prawa zastrzeżone. </p> <div class="flex flex-wrap justify-center gap-4 md:gap-6"> <a href="/o-nas/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> O nas </a><a href="/o-mnie/krzysztof-czapnik/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> O autorze </a><a href="/cennik/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Cennik </a><a href="/artykuly/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Blog </a><a href="/kontakt/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Kontakt </a> <span class="text-primary-900/40">|</span> <a href="/polityka-prywatnosci/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Polityka prywatności </a><a href="/deklaracja-dostepnosci/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Deklaracja dostępności </a><a href="/regulamin/" class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"> Regulamin </a> </div> </div> </div> </div> </footer> <!-- Sticky Mobile CTA - visible only on mobile, hidden on desktop --><div class="fixed bottom-0 left-0 right-0 lg:hidden bg-white border-t border-neutral-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] p-3 z-40 flex gap-2 transition-transform duration-300" id="sticky-mobile-cta" data-astro-cid-avybc3i7> <a href="#" id="sticky-cta-wycena" class="btn-accent flex-1 text-center text-sm py-2.5" data-umami-event="click-cta" data-umami-event-location="sticky-mobile" data-astro-cid-avybc3i7> Bezpłatna wycena </a> <a href="https://api.whatsapp.com/send?phone=48604939140&text=Dzie%C5%84%20dobry%2C%20chcia%C5%82bym%20zapyta%C4%87%20o%20wycen%C4%99." target="_blank" rel="nofollow noopener noreferrer" class="flex items-center justify-center flex-none px-3 py-2.5 bg-[#25D366] text-white rounded-lg text-sm font-semibold hover:bg-[#20BD5A] transition-colors" aria-label="WhatsApp" data-umami-event="click-whatsapp" data-umami-event-location="sticky-mobile" data-astro-cid-avybc3i7> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-avybc3i7> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" data-astro-cid-avybc3i7></path> </svg> </a> <a href="tel:+48604939140" id="sticky-cta-phone" class="flex items-center justify-center flex-none px-3 py-2.5 btn-outline text-sm" aria-label="Zadzwoń: 604 939 140" data-umami-event="click-phone" data-umami-event-location="sticky-mobile" data-astro-cid-avybc3i7> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-avybc3i7> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" data-astro-cid-avybc3i7></path> </svg> </a> </div> <!-- Add bottom padding to body to prevent content being hidden behind sticky CTA --> <a href="https://api.whatsapp.com/send?phone=48604939140&text=Dzie%C5%84%20dobry%2C%20chcia%C5%82bym%20zapyta%C4%87%20o%20wycen%C4%99." target="_blank" rel="nofollow noopener noreferrer" class="fixed bottom-6 right-6 z-40 hidden lg:flex items-center gap-2 bg-[#25D366] hover:bg-[#20BD5A] text-white px-5 py-3 rounded-full shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5 group" aria-label="Napisz na WhatsApp" data-umami-event="click-whatsapp" data-umami-event-location="floating-button" id="whatsapp-fab"> <svg class="w-6 h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"></path> </svg> <span class="text-sm font-semibold">Napisz do nas</span> </a> <!-- Exit Intent Popup Overlay --><div id="exit-popup-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true" aria-labelledby="exit-intent-headline"> <div id="exit-popup" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-md bg-white rounded-2xl shadow-2xl p-6 md:p-8 scale-95 opacity-0 transition-all duration-300"> <!-- Close button --> <button id="exit-popup-close" class="absolute top-3 right-3 text-neutral-400 hover:text-neutral-700 transition-colors" aria-label="Zamknij"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Content --> <div class="text-center"> <h2 id="exit-intent-headline" class="text-xl md:text-2xl font-bold text-neutral-900 mb-3">Nie znalazłeś tego, czego szukasz?</h2> <p class="text-neutral-600 mb-6 text-sm md:text-base">Porozmawiajmy o Twoim projekcie. Bezpłatna konsultacja i wycena w ciągu 24h.</p> <!-- Form --> <form id="exit-popup-form" class="space-y-3 text-left"> <input type="hidden" name="source" value="exit-intent"> <input type="hidden" name="name" value="Zapytanie z exit popup"> <div> <label for="exit-email" class="sr-only">E-mail</label> <input type="email" id="exit-email" name="email" required placeholder="Twój adres e-mail" class="w-full px-4 py-3 border border-neutral-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"> </div> <div> <label for="exit-url" class="sr-only">Adres strony</label> <input type="url" id="exit-url" name="url" placeholder="Adres Twojej strony (opcjonalnie)" class="w-full px-4 py-3 border border-neutral-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"> </div> <button type="submit" class="w-full btn-accent py-3 text-sm font-semibold rounded-lg"> Wyślij – to nic nie kosztuje </button> </form> <!-- Success message (hidden by default) --> <div id="exit-popup-success" class="hidden py-6"> <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <h3 class="text-lg font-bold text-neutral-900 mb-1">Dziękujemy!</h3> <p class="text-neutral-600 text-sm">Odezwiemy się w ciągu 24 godzin.</p> </div> <!-- Dismiss link --> <button id="exit-popup-dismiss" type="button" class="mt-4 text-sm text-neutral-400 hover:text-neutral-600 transition-colors"> Nie, dziękuję </button> </div> </div> </div> <script> (function() { var STORAGE_KEY = 'kcm-exit-popup-shown'; var DELAY_MS = 5000; var MOBILE_TIMEOUT_MS = 30000; if (sessionStorage.getItem(STORAGE_KEY)) return; if (document.getElementById('form-success')) return; var overlay = document.getElementById('exit-popup-overlay'); var popup = document.getElementById('exit-popup'); var closeBtn = document.getElementById('exit-popup-close'); var dismissBtn = document.getElementById('exit-popup-dismiss'); var form = document.getElementById('exit-popup-form'); var successMsg = document.getElementById('exit-popup-success'); if (!overlay || !popup) return; var canShow = false; var shown = false; setTimeout(function() { canShow = true; }, DELAY_MS); function showPopup() { if (shown || !canShow) return; if (document.getElementById('form-success')) return; shown = true; sessionStorage.setItem(STORAGE_KEY, '1'); overlay.classList.remove('hidden'); requestAnimationFrame(function() { overlay.classList.add('opacity-100'); overlay.classList.remove('opacity-0'); popup.classList.add('scale-100', 'opacity-100'); popup.classList.remove('scale-95', 'opacity-0'); }); if (typeof umami !== 'undefined') { umami.track('exit-intent-show'); } } function hidePopup() { overlay.classList.remove('opacity-100'); overlay.classList.add('opacity-0'); popup.classList.remove('scale-100', 'opacity-100'); popup.classList.add('scale-95', 'opacity-0'); setTimeout(function() { overlay.classList.add('hidden'); }, 300); } // Desktop: mouse leaves viewport at top document.addEventListener('mouseout', function(e) { if (e.clientY <= 0 && e.relatedTarget === null) { showPopup(); } }); // Mobile: after 30 seconds var isMobile = window.innerWidth < 768; if (isMobile) { setTimeout(showPopup, MOBILE_TIMEOUT_MS); } // Close handlers if (closeBtn) closeBtn.addEventListener('click', hidePopup); if (dismissBtn) dismissBtn.addEventListener('click', hidePopup); overlay.addEventListener('click', function(e) { if (e.target === overlay) hidePopup(); }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && !overlay.classList.contains('hidden')) hidePopup(); }); // Form submission if (form) { form.addEventListener('submit', function(e) { e.preventDefault(); var formData = new FormData(form); var submitBtn = form.querySelector('button[type="submit"]'); if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Wysyłanie...'; } fetch('/api/contact.php', { method: 'POST', body: formData }).then(function(response) { if (response.ok) { form.classList.add('hidden'); if (dismissBtn) dismissBtn.classList.add('hidden'); if (successMsg) successMsg.classList.remove('hidden'); if (typeof umami !== 'undefined') { umami.track('exit-intent-submit'); } setTimeout(hidePopup, 3000); } else { if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Wyślij – to nic nie kosztuje'; } } }).catch(function() { if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Wyślij – to nic nie kosztuje'; } }); }); } })(); </script> </body></html>