Above the fold Google

Przychodzą w życiu SEO’wca takie chwile, że musi wejść w skórę UX, a może raczej UI designera (czy to się nie może jakoś po polsku nazywać?). Zaprojektowanie skutecznego w kontekście SEO above the fold na szczęście wcale nie jest takie trudne.

To, że widok above the fold ma impact na SEO nie ulega wątpliwości. Pierwsze wzmianki na temat tego, że to, jaka zawartość zostanie wyświetlona użytkownikowi bez konieczności scrollowania pojawiły się w 2012 r. Wtedy jeszcze adaptacja technologii RWD (przynajmniej) w Polsce była jeszcze w powijakach i jedynym zmartwieniem webmasterów były doświadczenia na desktopach [1] – przypomnę, że w 2012 r. desktopy były już w odwrocie, ale i tak odpowiadały za 85 – 90% całego ruchu online. Dwa lata wcześniej Google uruchomiło Browser Size w usłudze Google Labs, dzięki którym deweloperzy mogli testować above the fold w oparciu o predefiniowane widoki [2]. Wyglądało to mniej więcej tak, a deweloperzy stali przed wyzwaniem, aby projekt strony był na tyle skomplikowany, żeby obsłużył różne urządzenia. Dziś wydaje się to już abstrakcją, ale miło powspominać.

Dziś to, że zawartość above the fold koreluje z organikiem (przypominam korelacja nie jest jednoznaczna z przyczynowością) dostrzeżecie np. w Surferze SEO. Surfer w kontekście above the fold ocenia ilość znaków, występowanie słów exact match’owych, ich nasycenie w relacji do całej treści oraz liczbę partiali. Rzecz jasna kaloryczność samego above the fold jest różna w zależności od kontekstu zapytania i branży, niemniej jednak dziś chciałbym przepracować z Wami przykładową, prostą modyfikację above the fold na urządzeniu mobilnym dla jednego z e-commerce’ów z branży akcesoriów do smartfonów.

Projekt wygląda typowo, dlatego zakryłem dane kontaktowe sklepu i logo – to zbędne do tej analizy. Głównym problemem above the fold, które widzicie jest fakt, że jego zawartość niezależnie od wybranej kategorii – jest w zasadzie taka sama. Czy wybiorę Apple, Nokia, Sony, czy LG, to jedyną różnicą między ekranami jest fakt wytłuszczenia aktualnej kategorii i oznaczenie tego linka w kolorze niebieskim. Efekt jest taki, że niezależnie od mojego położenia w architekturze informacji, widok above the fold dla mobilnego Googlebota jest w zasadzie ten sam.

Jak można w prosty sposób poprawić ten widok? Zacznijmy od wyciągnięcia nagłówka H1 do górnej części, tuż pod breadcrumbs. H1 o ile nie musi dominować całego projektu, to powinno być wyraźnie oznaczone. Dalej proponuję na osadzenie miniaturki kategorii – najlepiej, gdyby była to bitmapa unikalna, tj. nie bitmapa stockowa występująca pod setką duplikatów w wynikach organicznych, a zdjęcie wykonane samodzielnie. Trzeba zapamiętać, aby taką bitmapę nazwać w odpowiedni sposób, np. akcesoria.jpg i przypisać jej atrybut alt np. „akcesoria” oraz title.

Nie będę wchodził tutaj w szczegóły i tłumaczył, że nazwa kategorii „akcesoria” w architekturze to kiepski pomysł, bo co prawdopodobne – nikt nie kupi etui do Motorolii z frazy „akcesoria”, ale myślę, że to oczywiste.

Aha i tą bitmapę możecie usunąć lub nie – pewnie w procesie zakupowym nie jest szczególnie potrzebna, ale pamiętajcie, że ten materiał dotyczy przede wszystkim kontekstu SEO i jest jakimś półśrodkiem między oczekiwaniami użytkowników a optymalizacją w kontekście algorytmu wyszukiwarki.

Wracając do above the fold. Pod bitmapą osadzamy fragment opisu zawartości kategorii – 1-2 zdania, które nie będą zajmowały zbyt dużej przestrzeni użytkowej, ale zarazem będą mieściły się w above the fold – dobrze, jeśli w tym miejscu będą padały exacty lub/i partial keywords.

Dalej pozostają podstawowe funkcjonalności, które mogą okazać się użyteczne dla konsumenta. Ja dodałem „filtruj po marce” i „sortuj według”, ale możecie dodać tutaj co chcecie – starałem się Wam pokazać, jak pogodzić oczekiwania algorytmu search z interesami użytkowników.

I ostatnimi elementami, które będzie renderował robot w widoku above the fold, będą pierwsze produkty z kategorii, w jakiej się znajdujemy. W naszym przykładzie dwa uchwyty.

Tak przygotowany widok above the fold to w naszej ocenie dobry początek – mamy H1, odpowiednio opisaną bitmapę, fragment treści, elementy nawigacji i zawartość w postaci produktów. Rzecz jasna above the fold można byłoby zubożyć o np. klawisze „filtruj po marce” i „sortuj według” po to, aby odzyskać wolną przestrzeń i móc eksponować użytkownikowi tytuły produktów, które wyświetlałyby się tuż pod miniaturkami, ale jako, że wszystko „zależy” i above the fold powinien być wypadkową SEO i UX oraz potrzeb biznesowych, danych analitycznych, dlatego nie traktujcie mojego przykładu za jedyny wzorcowy. Chciałem pokazać Wam, jak należy myśleć o above the fold w ogóle – w tym ze szczególnym uwzględnieniem zawartości dla Googlebota mobilnego.