Sekcja Above The Fold (powyżej linii zgięcia – ATF) oznacza widoczną górną część strony internetowej zanim użytkownik zacznie ją przewijać. Linią zgięcia jest więc miejsce, w którym nieprzewijana strona ucina się na dole. Wszystko co wymaga przewinięcia znajduje się poniżej linii zgięcia. Uwaga – określenie „powyżej linii zgięcia” Above The Fold pochodzi z publikacji gazet. Gazety są zwykle eksponowane na stojakach, gdy są zgięte na pół, więc edytorzy umieszczają najwięcej elementów przyciągających uwagę powyżej linii zgięcia.
Dlaczego sekcja Above The Fold jest istotna?
Treść ATF na stronie internetowej jest ważna, ponieważ to ona buduje pierwsze wrażenie użytkownika. Jest to miejsce, w którym użytkownicy spodziewają się zobaczyć określone funkcje serwisu (np. link do rejestracji). Jeśli użytkownicy natychmiast nie znajdą tego, czego szukają, mogą opuścić stronę.
Takie zachowanie może wpłynąć niekorzystnie na skuteczność Twojej działalności i SEO. Wyszukiwarki takie jak Google chcą bowiem zapewniać rezultaty, które pozytywnie angażują użytkowników. Ponadto Google uznaje za najważniejsze treści, które pojawiają się blisko górnej części strony.
Oznacza to, że treść ATF ma większy wpływ na pozycję na stronie z wynikami wyszukiwania niż treść w sekcji BTF (Below The Fold – pod linią zgięcia). Dlatego właśnie SEO Above The Fold powinno być priorytetem.
Najlepsze praktyki związane z sekcją Above the Fold
Treść powyżej linii zgięcia odgrywa kluczową rolę w zwracaniu uwagi użytkowników. Istnieje wiele praktyk, które wpływają korzystnie na doświadczenia użytkowników (UX) i prowadzą do zwiększenia dochodów.
Istnieją również specjalne strategie SEO Above The Fold, które ułatwią lepsze pozycjonowanie stron w Google. Oto najważniejsze, najlepsze praktyki dotyczące projektów ATF.
Stosowanie responsywnego projektu strony internetowej
Responsywny projekt strony internetowej automatycznie dopasowuje się ro rozmiaru i kształtu wyświetlacza w urządzeniu użytkownika. Dzięki temu rozwiązaniu można mieć pewność, że ilustracje, tekst i inne elementy są dobrze dopasowane.
Optymalizacja nagłówka strony internetowej
Nagłówek jest znajdującym się najwyżej elementem strony, zwykle jest on kopiowany i umieszczany na każdej stronie w ramach serwisu. Zawiera on kluczowe elementy w tym samym miejscu, które jest łatwe do znalezienia. Wpływa to korzystnie na UX.
Nagłówek strony zwykle obejmuje logo marki, które zawiera link przenoszący do strony głównej. Użytkownicy mogą więc szybko przenieść się do tej kluczowej strony. Ponadto nagłówek zwykle obejmuje również główne menu nawigacyjne zawierające linki do głównych sekcji Twojego serwisu.
Wielu twórców stron internetowych oszczędza miejsce umieszczając główne elementy nawigacyjne w menu o układzie „hamburgera”, szczególnie w mobilnych wersjach strony. To jednak oznacza, że użytkownik musi dodatkowo kliknąć, aby uzyskać dostęp do kluczowych stron.
Poniżej przedstawionych zostało kilka innych elementów, które warto wziąć pod uwagę w nagłówku serwisu:
- baner – użyj banera serwisu, aby zareklamować unikalne cechy sprzedaży, takie jak na przykład darmowa dostawa,
- linki do rejestracji – zachęć użytkowników do założenia konta lub rejestracji. Pozwoli Ci to na łatwiejsze śledzenie zachowania użytkowników i zwiększenie zaangażowania,
- flaga region/języka – jeśli posiadasz stronę dla wielu regionów lub w wielu wersjach językowych, pozwalaj użytkownikom na przełączanie dostępnych opcji,
- funkcja wyszukiwania – umieść pasek lub ikonę wyszukiwania. Dzięki temu użytkownicy będą mogli szybko znaleźć to czego szukają,
- ikona koszyka sklepowego – jeśli posiadasz sklep internetowy, jak najbardziej ułatwiaj klientom rozpoczęcie procesu płatności i finalizacji zakupu.
Dodatkowe elementy w nagłówku serwisu mogą zwiększyć jego funkcjonalność. Jednak projekt stworzony bez ładu może zajmować sporo cennego miejsca ATF oraz może utrudnić użytkownikom nawigację. Twórca strony musi więc zadbać o właściwy balans.
Uwzględnij unikalny nagłówek
Każda strona powinna posiadać unikalny, opisowy nagłówek wyświetlany w sekcji Above The Fold. To pozwoli użytkownikom szybko zrozumieć jaki jest cel istnienia danej strony i czego mogą się spodziewać. Skorzystanie z unikalnego nagłówka wpływa również pozytywnie na SEO Above The Fold.
Zapytany o wpływ ATF na pozycjonowanie, przedstawiciel Google, John Mueller powiedział: „Istotne jest dla nas to, aby w sekcji ATF znajdowała się pewna ilość unikalnej treści. Jeśli posiadasz na górze baner i ogólną ilustrację, jest to w porządku. Jednak części zawartości ATF powinna być unikalna w przypadku takiej strony. Tym czymś może być nagłówek”.
Aby jeszcze bardziej udoskonalić optymalizację SEO strony, zastosuj oznaczenie H1 nagłówka (jest to największy typ nagłówka w HTML). Upewnij się również, że nagłówek zawiera podstawowe słowo kluczowe (najważniejsze zapytanie, dla którego chcesz pozycjonować stronę).
Przejdź do sedna
Użytkownicy powinni być w stanie szybko i łatwo znaleźć to czego szukają. W związku z tym przejdź jak najszybciej do sedna. Najlepiej, jeśli zrobisz to w sekcji Above The Fold. Takie szybkie dostarczanie wartości wpływa pozytywnie zarówno na SEO, jak i na doświadczenia użytkowników.
Tworząc stronę internetową, zadaj sobie następujące pytania:
- Co chce osiągnąć osoba, która trafią na tę stronę?
- Jak mogę pomóc tej osobie w szybkim osiągnięciu celu?
Przykładami mogą być strony wielu sklepów internetowych. Kupujący prawie natychmiast są witani różnymi opcjami produktów wraz z ich zdjęciami, bez konieczności przewijania.
Zachowaj równowagę pomiędzy reklamami i oryginalną treścią
Jeśli zarabiasz na swoim serwisie za sprawą Google AdSense lub innego programu reklamowego, może zależeć Tobie na wyświetlaniu reklam w sekcji Above The Fold. Tam większość użytkowników może je zobaczyć i kliknąć.
Nie jest to niczym złym, ale istotne jest zachowanie równowagi pomiędzy reklamami i własną treścią. Jeśli użytkownicy są witani dużymi blokami reklam (a nie po to trafili na stronę), mogą opuścić serwis i udać się do konkurencji. Dodatkowo brak zrównoważenia wpływa niekorzystnie na SEO Above The Fold, w szczególności na urządzeniach mobilnych, w których reklamy mogą zająć większość ekranu.
W 2012 roku firma Google opublikowała dużą aktualizację algorytmu układu strony, która zdegradowała strony korzystające z reklam w sekcji ATF „w nadmiernym stopniu”.
Oto treść obwieszczenia: „Jeśli klikniesz dany serwis i część strony, którą widzisz na początku nie posiada zbyt wiele widocznej treści w sekcji ATF lub przeznacza zbyt dużą część tej sekcji na reklamy, nie jest to dobre z perspektywy doświadczeń użytkowników. Takie strony mogą znaleźć się nisko w rankingach”.
Google zaleca przestrzeganie Standardów Lepszych Reklam (Better Ads Standards), które odradzają stosowania wielu elementów, takich jak między innymi:
- wyskakujące okienka z reklamami,
- duże, „przyklejające się” reklamy,
- zagęszczenie reklam powyżej 30%.
Przykładem może być strona telewizji ESPN, na której reklamy mobilne znajdują się w sekcji ATF w celu maksymalizacji kliknięć. Trzeba jednak zwrócić uwagę, że ilość reklam jest zrównoważona z dużą ilością oryginalnej zawartości.
Zwiększenie prędkości wczytywania stron
Zawartość w sekcji Above The Fold powinna wczytywać się szybko. Jeśli użytkownicy muszą zbyt długo czekać, prawdopodobnie opuszczą Twoją stronę. Ponadto prędkość wczytywania ma istotny wpływ na pozycjonowanie SEO.
Najważniejsze wskaźniki prędkości strony internetowej to Core Web Vitals (podstawowe wskaźniki internetowe):
| Wątek | Wyjaśnienie |
|---|---|
| Największe wyrenderowanie treści (Largest Contentful Paint – LCP) | Czas potrzebny do wczytania największej ilustracji lub bloku tekstu. |
| Opóźnienie przy pierwszym działaniu (First Input Delay – FID) | Czas potrzebny stronie na odpowiedź na pierwszą interakcję użytkownika. |
| Zbiorcze przesunięcie obrazu (Cumulative Layout Shift – CLS) | Pomiar niespodziewanych ruchów i przesunięć, które pojawiają się podczas wczytywania. |
Podstawowe wskaźniki internetowe możesz sprawdzić za pomocą Google Search Console.
Oto kilka najlepszych praktyk z zakresu poprawy czasu ładowania sekcji ATF:
- ustrukturyzowanie HTML tak, aby zawartość ATF wczytywała się pierwsza,
- uproszczenie kodu i minimalizacja HTML, CSS oraz JavaScript, tak aby całość była przetwarzana szybciej,
- wbudowanie krytyczngo CSS – pod pojęciem krytycznego CSS kryje się technika, która wydobywa CSS z treści ATF i umieszcza ją w sekcji <head> w HTML. Pomaga to w szybszym ładowaniu zawartości w sekcji Above The Fold,
- optymalizacja ilustracji – zmiana rozmiaru, formatu oraz kompresowanie plików ilustracji, tak aby były jak najmniejsze, bez negatywnego wpływu na jakość,
- wstępne załadowanie zasobów – użyj atrybutu linku rel=”preload”, aby wczytać górne element ATF jak najwcześniej w procesie renderowania.
Zadbaj o dobry wygląd
Twoja zawartość ATF powinna funkcjonować prawidłowo, ale musi również dobrze wyglądać. Jeśli użytkownikom nie podoba się to co widzą, istnieje duże prawdopodobieństwo, że odejdą.
Projekty stron internetowych mają zaledwie 0,05 sekundy na zrobienie dobrego pierwszego wrażenia, zgodnie z badaniami Zachowania i Technologii Informacyjnej (Behaviour & Information Technology).
Oto kilka porad dotyczących projektu strony w sekcji ATF:
- upewnij się, że tekst jest łatwy do czytania i posiada wyraźną, widoczną hierarchię,
- dodaj unikalne elementy wizualne, aby rozbić tekst i ułatwić jego zrozumienie,
- umieść odpowiednie materiały wideo oraz animacje, aby przyciągnąć uwagę użytkowników,
- oszczędzaj miejsce korzystając z rozpoznawalnych ikon – sprawdź opcje dostępne w Google Material Symbols,
- wykorzystuj puste przestrzenie (często opisywane jako przestrzenie ujemne lub białe), aby twój układ nie wyglądał na przeładowany i bez ładu,
- upewnij się, że projekt pasuje do elementów identyfikacyjnych marki i je dopełnia,
- upewnij się, że Twoja strona spełnia wytyczne dotyczące dostępności.
Analizuj wskaźniki efektywności
Wskaźniki efektywności informują co działa dobrze i źle w Twoim projekcie ATF. Najważniejsze wskaźniki zależą od Twoich konkretnych celów. Jednak te przedstawione poniżej są godne brania pod uwagę. Są one dostępne w Google Analytics.
| Wskaźnik | Opis | Dlaczego jest ważny? |
|---|---|---|
| Współczynnik odrzuceń | Procentowa ilość odwiedzających, którzy odeszli ze strony nie podejmując żadnego działania. | Lepsza zawartość ATF może zmniejszyć współczynniki odrzuceń |
| Wskaźnik opuszczania stron | Procentowa ilość odwiedzających, którzy odeszli z serwisu na aktualnej stronie. | Lepsza zawartość ATF może zmniejszyć wskaźnik opuszczania stron. |
| Głębokość przewijania | Ilość strony, jaką widzi przeciętny użytkownik. | Wykazuje czy zawartość ATF nakłania użytkowników do dalszego przewijania strony. |
| Współczynnik docelowej konwersji | Procentowa liczba odwiedzających, którzy wykonali pożądaną czynność (np. dokonali zakupu). | Lepsza zawartość ATF może zwiększyć współczynnik konwersji. |
| Ruch organiczny | Liczba nieopłaconych wizyt na stronie pochodzących z wyszukiwarek, takich jak Google. | Dobre SEO Above The Fold może zwiększyć ruch organiczny. |
Czy wezwania do działania (CTA) powinny znajdować się w sekcji ATF czy może poniżej (BTF)?
Każda strona docelowa powinna posiadać przynajmniej jedno wezwanie do działania (CTA), które nakłania odwiedzających do podjęcia konkretnego działania (np. „Dodaj do koszyka” lub „Zarejestruj się teraz”). Niektórzy marketingowcy uważają, że CTA powinno zawsze znajdować się w sekcji Above The Fold. Dzięki temu użytkownicy je widzą i mogą dokonać szybkiej interakcji.
Odwiedzający nie są jednak zawsze gotowi do podjęcia działania od razu, gdy wylądują na Twojej stronie. Możesz więc uzyskać lepsze rezultaty umieszczając CTA na dole, gdzieś w sekcji BTF. Dzięki temu użytkownicy mają szansę pozyskać więcej informacji przed podjęciem decyzji.
Aby dowiedzieć się co działa najlepiej na Twoich Stronach, przeprowadź testy A/B (lub testy podziału).
Oto krótkie wytyczne mówiące o tym jak to działa:
- Zdecyduj, które lokalizacje CTA chcesz przetestować i stwórz nowy projekt strony internetowej.
- Przedstaw nowy projekt (wariant) 50% odwiedzających oraz istniejący projekt (kontrolny) pozostałej połowie.
- Wdroż w pełni wersję, która generuje więcej konwersji.
Podsumowanie
Jak widać, sekcja Above The Fold odgrywa istotną rolę w działaniach SEO. Warto więc przestrzegać powyższych wytycznych, aby generować jak najwięcej wyświetleń, sprzedaży i zysków.
