Nagłówek i stopka strony internetowej - co powinny zawierać i dlaczego

Każda strona internetowa ma dwa elementy, które użytkownik widzi niezależnie od tego, którą podstronę odwiedza. Nagłówek u góry i stopka na dole tworzą coś w rodzaju ramy całej witryny. Większość odwiedzających nie zastanawia się nad nimi świadomie, ale natychmiast to poczuje, gdy ich nie ma albo gdy są źle zrobione.

Pracuję ze stronami i sklepami od ponad dekady. Przez ten czas widziałem nagłówki tak przeładowane, że nikt nie wiedział, gdzie kliknąć, i stopki tak puste, że strona wyglądała jak opuszczony projekt. W tym artykule opisuję, co powinno znaleźć się w każdym z tych elementów, dlaczego to ważne i jakich błędów unikać - niezależnie od branży i rozmiaru firmy.

Nagłówek - co to jest i po co jest

Nagłówek (ang. header) to poziomy pasek widoczny u samej góry każdej podstrony. Zazwyczaj zawiera logo firmy, menu nawigacyjne i jakiś element kontaktowy lub przycisk akcji (CTA). Na urządzeniach mobilnych zamienia się zwykle w zwinięte "hamburger menu" - ikonę trzech kresek, pod którą kryje się cała nawigacja.

Header jest pierwszą rzeczą, którą użytkownik widzi po wejściu na stronę. Spędza na nim ułamek sekundy, ale w tym czasie podejmuje kluczowe decyzje: czy jest w dobrym miejscu, jak stąd przejść dalej i czy firma wygląda profesjonalnie. Dobrze zbudowany nagłówek sprawia, że te odpowiedzi są oczywiste.

Logo i nawigacja - dwa fundamenty

Logo w nagłówku pełni dwie funkcje jednocześnie: brandingową i nawigacyjną. Użytkownicy od lat przyzwyczajeni są do tego, że kliknięcie logo wraca ich na stronę główną. To konwencja tak głęboko zakorzeniona, że jej złamanie dosłownie dezorientuje odwiedzających. Logo powinno być wyraźne, nie przeskalowane i umieszczone po lewej stronie lub centralnie.

Menu nawigacyjne to mapa witryny w miniaturze. Reguła, którą stosuję u każdego klienta, jest prosta: jeśli pozycja menu nie odpowiada na pytanie "gdzie chcę teraz iść?", należy ją albo usunąć, albo przenieść w inne miejsce. Liczba 5-7 elementów w menu głównym to nie przypadek - tyle pozycji człowiek ogarnia wzrokiem bez konieczności analizowania.

U klienta z branży usług budowlanych mieliśmy sytuację, gdzie nagłówek zawierał 11 pozycji menu. Użytkownicy spędzali długo na stronie głównej, ale konwersja była niska. Po uproszczeniu menu do 6 pozycji i dodaniu widocznego przycisku "Zadzwoń" czas do pierwszego kliknięcia w CTA skrócił się zauważalnie. To typowy przykład tego, jak przeładowany header szkodzi zamiast pomagać.

Nagłówek a mobilność

Od pewnego czasu ruch mobilny dominuje na większości stron. To oznacza, że nagłówek zaprojektowany wyłącznie "pod desktop" to nagłówek zaprojektowany źle. Na małym ekranie nie zmieszczą się wszystkie pozycje menu rozłożone poziomo, więc standardem stało się hamburger menu.

Ważne jest jednak, żeby to zwinięte menu naprawdę działało - otwierało się szybko, było czytelne i miało wyraźny przycisk zamknięcia. Widziałem strony, gdzie menu mobilne technicznie działało, ale wymagało precyzyjnego trafienia w miniaturowy przycisk palcem. To dyskwalifikuje projekt.

Stopka - niedoceniany element każdej strony

Stopka (ang. footer) to sekcja na samym dole strony, widoczna po przewinięciu do końca. Wbrew intuicji, użytkownicy naprawdę do niej docierają - szczególnie wtedy, gdy szukają czegoś konkretnego: danych kontaktowych, informacji o firmie, polityki prywatności lub linku, który nie znalazł się w menu głównym.

Stopka pełni funkcję katalogową. Tam trafia wszystko, co jest ważne, ale nie wymaga eksponowania w głównej nawigacji. Dla wyszukiwarek to także sygnał wiarygodności - kompletna stopka z prawdziwymi danymi firmy mówi Google'owi, że za stroną stoi realna organizacja.

Stopka a SEO - konkretne korzyści

Linkowanie wewnętrzne to jeden z fundamentów pozycjonowania. Stopka jest miejscem, gdzie możesz wzmocnić kluczowe podstrony bez zakłócania treści artykułów czy opisów usług. Każdy link w stopce, prowadzący do ważnej podstrony, przekazuje tzw. link juice - sygnał wartości dla algorytmów wyszukiwarek.

Praktyczny przykład: jeśli prowadzisz stronę firmową i Twoją najważniejszą podstroną jest oferta usług, umieszczenie do niej linku w stopce sprawia, że każda podstrona witryny linkuje do oferty. To prosta i skuteczna metoda wzmocnienia pozycji tej podstrony w wynikach wyszukiwania.

Drugi aspekt to E-E-A-T (doświadczenie, wiedza, autorytet, wiarygodność) - zestaw sygnałów, które Google bierze pod uwagę przy ocenie jakości witryny. Kompletne dane firmy, linki do dokumentów prawnych i czytelne informacje kontaktowe to elementy, które budują ten sygnał. Stopka bez danych firmy to jak wizytówka bez nazwiska.

Zaufanie - czego użytkownik szuka w stopce

Pomyśl o stopce jak o dowodzie tożsamości strony. Kiedy ktoś trafia na witrynę nieznanej firmy i rozważa zamówienie usługi lub produktu, niemal odruchowo jedzie wzrokiem na sam dół strony. Szuka adresu, telefonu, NIP-u, polityki prywatności. Jeśli ich nie znajdzie - zaczyna wątpić.

To nie teoria. W e-commerce widać to w danych porzuconych koszyków. Część użytkowników rezygnuje z zakupu nie dlatego, że cena jest za wysoka, ale dlatego, że strona nie wzbudziła wystarczającego zaufania. Kompletna stopka to jeden z elementów, który to zaufanie buduje - i to całkowicie za darmo.

Dlatego przy każdej stronie firmowej, którą projektuję, stopka dostaje tyle samo uwagi co nagłówek. Zrobiłem to też przy swojej własnej witrynie - tutaj, na dawidweb.com, stopka zawiera pełne dane, linki do najważniejszych usług i politykę prywatności. Klient, który dotrze do dołu strony i wszystko tam znajdzie, ma wyższy próg zaufania do kontaktu.

Typowe błędy - co najczęściej idzie nie tak

Po latach pracy z różnymi projektami widzę te same błędy wracające cyklicznie. Zebrałem najczęstsze po obu stronach - zarówno w nagłówku, jak i stopce.

W nagłówku problem numer jeden to przeładowanie. Firmy chcą pokazać wszystko na raz: logo, hasło, 10 pozycji menu, numer telefonu, e-mail, social media, godziny otwarcia i baner promocyjny. Efekt jest odwrotny do zamierzonego - użytkownik nie wie, na czym skupić wzrok. Nagłówek powinien hierarchizować informacje, nie wyświetlać wszystkich jednocześnie.

W stopce problem jest odwrotny - zbyt mała ilość treści lub jej brak. Widziałem strony z jednolinijkową stopką zawierającą tylko copyright. To marnowanie cennej przestrzeni, która mogłaby pracować na SEO i zaufanie. Z drugiej strony są stopki wyglądające jak losowy zbiór linków bez żadnej struktury - sześćdziesiąt odnośników w jednej kolumnie.

Inny częsty błąd to brak responsywności. Header zajmujący połowę ekranu telefonu to nie nagłówek, to problem UX. Stopka z kolumnami, które zawijają się chaotycznie na wąskim ekranie, nie spełnia swojej funkcji. Oba elementy wymagają osobnej weryfikacji na urządzeniach mobilnych.

Wreszcie - nieaktualne dane. Stary numer telefonu, zmieniony adres, zamknięty profil na Facebooku, do którego wciąż prowadzi ikona w stopce. Stopka pojawia się na każdej podstronie, więc błędy w niej mają wielokrotną widoczność. Raz zrobiona poprawka naprawia problem wszędzie.

Zasady layoutu, które działają zawsze

Zarówno header, jak i footer mają swoje sprawdzone wzorce układu, które użytkownicy internetu rozpoznają intuicyjnie. Odchodzenie od tych wzorców bez wyraźnego powodu to ryzyko bez korzyści.

Nagłówek: logo po lewej (lub centralnie), menu po prawej (lub centralnie pod logo na mobile), CTA po prawej skrajnie. Tło jednolite lub półprzezroczyste. Cień lub linia oddzielająca od reszty strony. Wysokość proporcjonalna do skali strony - minimalistyczna witryna portfolio może mieć mikroheader, sklep internetowy potrzebuje więcej miejsca na logo i kategorie.

Stopka: ciemniejsze tło niż reszta strony (klasyczna czerń lub granat), linki w kolumnach tematycznych, dane firmy wyraźnie oddzielone, copyright na samym dole w centrum lub po lewej. Takie ułożenie odpowiada oczekiwaniom większości użytkowników i nie wymaga od nich żadnego uczenia się.

Jeśli budujesz stronę wizytówkową lub firmową, możesz też sięgnąć po wzorce opisane w artykule o tym, czym jest strona firmowa i z czego się składa, a jeśli zastanawiasz się, jaki typ strony wybrać, przydatny będzie przegląd rodzajów stron internetowych.

Jak to wygląda w WordPress

W WordPress nagłówek i stopka są elementami motywu. W klasycznych motywach PHP to pliki header.php i footer.php. W nowoczesnych motywach blokowych (block themes) edytujesz je bezpośrednio w Edytorze Witryny (Site Editor) bez dotykania kodu.

Większość popularnych motywów, jak Blocksy czy Astra, oferuje rozbudowane panele ustawień nagłówka i stopki. Możesz układać elementy metodą przeciągnij-i-upuść, wybierać kolory, ustawiać lepki header, dodawać widget areas w stopce. To wygodne rozwiązanie, które dla zdecydowanej większości małych firm jest wystarczające bez pisania kodu.

Jeśli potrzebujesz czegoś niestandardowego - niestandardowego układu nagłówka dopasowanego do projektu graficznego albo rozbudowanej stopki ze specyficznymi sekcjami - to już zadanie dla developera. Nie jest to szczególnie skomplikowane, ale wymaga zrozumienia struktury motywu i CSS. Jeśli chcesz porozmawiać o tym, jak może wyglądać Twoja strona, zajrzyj do kontaktu.