Above the fold

Above the fold to część strony internetowej widoczna w oknie przeglądarki w momencie, gdy odwiedzający trafia na nią — zanim przewinie, kliknie lub w jakikolwiek sposób wejdzie w interakcję. Wszystko poza tą początkową granicą obszaru widoku to below the fold.

To określenie opisuje pierwszy ekran treści: nagłówek, obraz bohatera, nawigację i wszelkie wezwania do działania, które ładują się bez przewijania. Jest to strefa o najwyższej widoczności na każdej stronie.

Co oznacza „above the fold"?

W projektowaniu stron internetowych above the fold (często skracane jako ATF) oznacza widoczny obszar strony przed jakimkolwiek przewinięciem. „Zagięcie" (fold) to wyimaginowana linia na dole okna przeglądarki — granica między tym, co odwiedzający widzi natychmiast, a tym, co wymaga działania, by zostało odkryte.

Termin ten nie opisuje stałej wysokości w pikselach. Na 27-calowym monitorze stacjonarnym zagięcie może znajdować się około 900–1000 pikseli od góry. Na telefonie trzymanym pionowo może to być zaledwie 500–600 pikseli. Zagięcie zmienia się wraz z każdym urządzeniem, rozmiarem ekranu, paskami narzędzi przeglądarki i ustawieniami powiększenia.

Trzy pytania, na które obszar above the fold powinien odpowiedzieć niemal natychmiast:

1. O czym jest ta strona? — jasny, opisowy nagłówek
2. Dlaczego mam zostać? — propozycja wartości lub korzyści
3. Co powinienem zrobić dalej? — widoczne wezwanie do działania lub wskazówka nawigacyjna

Uruchom swój program partnerski już dziś

Skonfiguruj zaawansowane śledzenie w kilka minut. Karta kredytowa nie jest wymagana.

Poproś o demo Rozpocznij 30-dniowy bezpłatny okres próbny

Skąd pochodzi termin „above the fold"?

Termin wywodzi się z druku gazet. Fizyczne gazety były składane na pół na stoiskach prasowych. Tylko górna połowa pierwszej strony była widoczna dla przechodniów. Redaktorzy umieszczali najważniejsze nagłówki, efektowne zdjęcia i główne artykuły w tej przestrzeni, aby przyciągnąć uwagę i zwiększyć sprzedaż.

Ta sama logika przeniosła się do wczesnego projektowania stron internetowych w latach 90. Projektanci przyjęli koncepcję „zagięcia", aby opisać to, co użytkownicy widzą przed przewinięciem — cyfrowy odpowiednik ekspozycji na stoisku prasowym.

W przeciwieństwie do papieru gazetowego, strona internetowa nie ma jednak fizycznego zagięcia. Linia zagięcia jest wirtualna, definiowana wyłącznie przez obszar widoku odwiedzającego.

Dlaczego above the fold jest ważne?

Treść powyżej linii zagięcia decyduje o tym, czy odwiedzający pozostanie, czy opuści stronę.

Pierwsze wrażenie i współczynnik odrzuceń

Odwiedzający tworzy sobie wrażenie strony w ciągu około 50 milisekund. Jeśli obszar above the fold wygląda na zaśmiecony, mylący lub nieistotny, współczynnik odrzuceń rośnie. Strony, które jasno komunikują cel i wartość w początkowym obszarze widoku, odnotowują mierzalnie niższy wskaźnik porzuceń.

Wpływ na konwersję

Wezwania do działania, formularze rejestracyjne i kluczowe oferty umieszczone powyżej linii zagięcia konsekwentnie osiągają lepsze wyniki niż te zakopane głębiej na stronie.

Konsekwencje SEO

Sygnały dotyczące doświadczenia strony i Core Web Vitals od Google nagradzają strony, na których główna treść ładuje się szybko i jest natychmiast dostępna. Mimo że samo zagięcie nie jest bezpośrednim czynnikiem rankingowym, strony, które umieszczają istotną treść poniżej natrętnych reklam śródtekstowych lub dużych obrazów bohaterów, ryzykują obniżenie pozycji. Treść, do której trudniej dotrzeć, to treść, która rankinguje mniej konkurencyjnie.

Dołącz do naszego newslettera

Bądź pierwszym, który dowie się o nowych funkcjach i aktualizacjach produktu.

Adres e-mail

Zapisz się

Gdzie znajduje się linia zagięcia na stronie?

Nie ma jednej linii zagięcia. Zagięcie różni się w zależności od:

1. Rozmiaru ekranu i rozdzielczości — monitor 1920×1080 pokazuje znacznie więcej niż ekran telefonu 375×667
2. Elementów przeglądarki — paski narzędzi, paski zakładek i wiersze kart zmniejszają dostępną przestrzeń pionową
3. Orientacji urządzenia — orientacja pozioma vs. pionowa na tabletach i telefonach daje różne pozycje zagięcia

Najczęstszy obszar widoku na urządzeniach mobilnych to około 390×660 pikseli. Oznacza to, że odwiedzający mobilni widzą mniej więcej połowę treści pionowej, którą widzą użytkownicy komputerów stacjonarnych — co sprawia, że projektowanie above the fold na urządzenia mobilne jest bardziej ograniczone i bardziej krytyczne.

Jak mierzy się above the fold?

Projektanci stron i marketerzy używają kilku metod, aby zmierzyć, gdzie znajduje się linia zagięcia:

• Narzędzia map ciepła (Hotjar, Crazy Egg, Microsoft Clarity) — pokazują zagregowany zasięg przewijania w postaci gradientów kolorów
• BrowserStack i narzędzia do testowania responsywności — symulują obszary widoku na różnych profilach urządzeń
• Testowanie ręczne — zmiana rozmiaru przeglądarki do typowych punktów granicznych i sprawdzanie, gdzie treść się ucina

Zasada 600 pikseli z początku lat 2000. jest już nieaktualna. Projektanci traktują teraz zagięcie jako płynną koncepcję i testują na co najmniej pięciu szerokościach obszaru widoku: 390px (mały telefon), 428px (duży telefon), 768px (tablet w pionie), 1024px (tablet w poziomie / mały laptop) i 1440px (komputer stacjonarny).

Czy above the fold jest wciąż aktualne?

Tak — ale nie tak, jak rozumiano to dekadę temu. Pogląd, że wszystkie kluczowe treści muszą znajdować się ściśle powyżej linii zagięcia, jest przestarzały. Użytkownicy przewijają i robią to często. Kanały mediów społecznościowych, witryny z nieskończonym przewijaniem i platformy krótkich form wideo nauczyły ludzi przesuwania i przewijania jako drugiej natury.

Jednak treść above the fold wciąż decyduje o tym, czy odwiedzający w ogóle zdecyduje się przewinąć.

Nieaktualne porady:

• Wypychanie każdego CTA, nagłówka i obrazu powyżej sztywnej linii 600px
• Projektowanie tylko dla komputerów stacjonarnych i ignorowanie widoków mobilnych
• Zakładanie, że użytkownicy nigdy nie przewijają

Obecna najlepsza praktyka:

• Umieść główną propozycję wartości i jedno podstawowe CTA powyżej linii zagięcia
• Użyj wskazówek wizualnych — częściowej treści widocznej na granicy, strzałek kierunkowych, animacji wyzwalanych przewijaniem — aby zasygnalizować, że więcej treści znajduje się poniżej
• Projektuj najpierw dla najmniejszego typowego obszaru widoku, a następnie rozszerzaj na większe ekrany

Co powinno znajdować się powyżej linii zagięcia?

Dokładny zestaw elementów zależy od typu strony. Strona główna, strona docelowa i artykuł na blogu służą różnym celom.

Dla stron głównych i stron docelowych

1. Jasny nagłówek skoncentrowany na korzyściach — powiedz odwiedzającym, czym się zajmujesz i dlaczego to ma znaczenie
2. Wspierający podnagłówek — jedno zdanie, które dodaje kontekstu lub drugorzędnej korzyści
3. Główny przycisk wezwania do działania — wyraźnie umieszczony, z wysokim kontrastem, o działaniowym tekście
4. Obraz bohatera lub krótki film — odpowiednia grafika wzmacniająca przekaz bez dominowania nad przestrzenią
5. Nawigacja — czysta, minimalistyczna i intuicyjna

Dla artykułów na blogu i stron treściowych

1. Tytuł artykułu — opisowy i bogaty w słowa kluczowe
2. Obraz wyróżniający — przeskalowany, aby nie wypychać tekstu poniżej linii zagięcia
3. Akapit wprowadzający — określa temat i to, co czytelnik zyska
4. Spis treści — w przypadku dłuższych postów menu skokowe pomaga czytelnikom w nawigacji

Dla stron produktów e-commerce

1. Nazwa produktu i kluczowy obraz
2. Cena — widoczna bez przewijania
3. Przycisk „Dodaj do koszyka"
4. Ocena w gwiazdkach i liczba recenzji — dowód społeczny na pierwszy rzut oka
5. Kluczowy wyróżnik — darmowa wysyłka, gwarancja lub unikalna cecha

Jak above the fold ma zastosowanie w marketingu afiliacyjnym?

Marketerzy afiliacyjni — zarówno reklamodawcy, wydawcy, jak i menedżerowie programów — polegają na umieszczeniu treści powyżej linii zagięcia, aby zmaksymalizować widoczność, kliknięcia i konwersje.

Dla reklamodawców (marek prowadzących programy afiliacyjne)

Twoje strony docelowe dla afiliacji muszą natychmiast komunikować wartość. Jeśli polecony odwiedzający trafi na stronę, a nagłówek, oferta lub CTA są zakopane poniżej linii zagięcia, kliknięcie, za które zapłaciłeś, jest zmarnowane.

• Testuj nagłówki stron docelowych powyżej linii zagięcia ze swoimi najlepszymi afiliantami
• Utrzymuj formularz lub przycisk zakupu w początkowym obszarze widoku na urządzeniach mobilnych

Dla wydawców (afiliantów promujących oferty)

Linki afiliacyjne i banery umieszczone powyżej linii zagięcia generują znacznie więcej wyświetleń i kliknięć niż te w paskach bocznych lub stopkach. Jednak wytyczne Google dotyczące umieszczania reklam karzą strony, które wypychają treść poniżej nadmiaru reklam powyżej linii zagięcia.

• Integruj CTA afiliacyjne naturalnie — kontekstowe linki tekstowe w pierwszych dwóch akapitach często osiągają lepsze wyniki niż banery reklamowe
• Unikaj układania wielu banerów powyżej linii zagięcia na stronach treściowych
• Ujawniaj relacje afiliacyjne wyraźnie w pobliżu linku, a nie ukryte w stopce

Dla menedżerów programów afiliacyjnych

Przeglądając wnioski afiliacyjne i monitorując wyniki partnerów, oceń, gdzie Twoi afilianci umieszczają Twoje linki. Afilianci, którzy umieszczają Twoje oferty powyżej linii zagięcia na stronach o dużym ruchu, zazwyczaj generują najwięcej konwersji. Wykorzystaj te dane, aby:

• Zidentyfikować najlepsze miejsca docelowe i udostępnić te wzorce słabiej działającym afiliantom
• Dostarczyć materiały kreatywne (banery, linki tekstowe) o rozmiarach dostosowanych do typowych wymiarów above the fold
• Monitorować zgodność — upewnić się, że afilianci nie stosują zwodniczego umieszczania naruszającego Twoje warunki

Czy CTA powinny znajdować się powyżej czy poniżej linii zagięcia?

Krótka odpowiedź: umieść główne CTA powyżej linii zagięcia, a wspierające CTA poniżej.

CTA powyżej linii zagięcia przyciąga odwiedzających, którzy podejmują szybkie decyzje. To użytkownicy z wysoką intencją — przyszli wiedząc, czego chcą, i potrzebują tylko odpowiedniego impulsu, aby podjąć działanie.

CTA poniżej linii zagięcia obsługuje odwiedzających, którzy potrzebują więcej informacji. Po przeczytaniu korzyści, opinii lub szczegółów produktu, dokonują konwersji z większą pewnością. Te konwersje często mają wyższe średnie wartości zamówienia i niższe wskaźniki zwrotów.

Żadne z rozmieszczeń nie jest uniwersalnie lepsze. Najskuteczniejszy wzorzec, potwierdzony w tysiącach testów A/B, to:

• Pojedyncze główne CTA powyżej linii zagięcia — działanie, które większość odwiedzających jest gotowa podjąć natychmiast
• Drugorzędne CTA rozmieszczone poniżej linii zagięcia — umieszczone po każdej głównej sekcji, która przedstawia przekonujący argument
• Przyklejone CTA na urządzeniach mobilnych — stały przycisk zakotwiczony na dole ekranu podczas przewijania

Testuj oba rozmieszczenia. Śledź nie tylko kliknięcia, ale ukończone konwersje. CTA, które generuje wiele kliknięć powyżej linii zagięcia, ale mało finalizacji, może przyciągać niewłaściwą grupę odbiorców. CTA poniżej linii zagięcia z mniejszą liczbą kliknięć, ale wyższym współczynnikiem finalizacji, może być lepiej dopasowane.