Mobile SEO 2021 i mobile first index w 2021

Zgodnie z informacjami płynącymi z samego Google jak również z publikacji specjalistów SEO wynika, że nasza uwaga powinna się skupić na optymalizacji stron mobilnych. Pozycjonowanie stron bez optymalizacji mobile, może być bardzo nieefektywne. W poprzednim wpisie na temat Mobile First Index podałem wiele danych statystycznych pokazujących znaczenie mobile w poszczególnych kategoriach.

Mobile SEO podstawowe rekomendacje w czasach mobile first index

Niektóre kategorie przekroczyły już 50% udziału ruchu mobilnego. W innym artykule na temat głównych czynników wpływających na wyniki SEO wskazałem znaczący wzrost mobile w hierarchii parametrów rangujących w Google. Składając w całość przemyśleń chciałbym poniżej podsumować wszystkich listując jakie to elementy mają główny wpływ na ocenę naszych stron Mobilnych. Chciałbym zarekomendować kilka rozwiązań, które w znaczący sposób pomogą nam zwiększyć wiarygodność, użyteczność naszych stron.

Rekomandacje Mobile SEO

Włączenie kompresji danych (Enable compression) w mobile SEO

Większość przeglądarek internetowych obsługuje kompresję GZIP w trakcie komunikacji z serwerami. Umożliwienie kompresji danych gzip może przyspieszyć transmisję danych nawet o 90% co ma niebagatelny wpływ na główny parametr czyli szybkość ładowania się strony. Ta poprawka ma wpływ również ostatecznie na UX naszego serwisu.

Minimalizacja kodów CSS, JavaScript i HTML (Minify CSS, JavaScript and HTML) w mobile SEO

Minimalizacja kodu jest dobra praktyką. Główną zasadą jest pisanie kodu z jak najmniejszą ilością treści, tekstu. Jeśli możemy uniknąć w wersji końcowej komentarzy to nie umieszczajmy ich. Usuwamy kod, który nie jest używany, który jest niepotrzebny.

Minimalizacja przekierowań w Mobile SEO (Reduce redirects) w mobile SEO

Unikamy niepotrzebnych przekierowań, szczególnie przekierowań cyklicznych. Przekierowania powinny być w najprostszej formie (HTTP request-response) zapytanie i odpowiedź serwera nie powinny generować dodatkowych zapytań. Im prostsza komunikacja tym lepiej. W przypadku stron responsywnych ten warunek jest spełniony z natury tego typu stron gdzie ilość przekierowań jest zminimalizowana. W przypadku rozwiązań pośrednich takich jak dedykowana strona mobilna sytuacja jest zgoła inna. Częstym błędem jest cykl przekierowań domena.pl -> www.domena.pl -> mobile.domena.pl

Optymalizacja przesyłu danych (Leverage browser caching) w mobile SEO

Przesyłanie danych pomiędzy serwerem a przeglądarką wymaga wielu odwołań i transferu danych. W przypadku mojej strony w trakcie pobierania strony głównej przez przeglądarkę dochodzi do 46 zapytań serwera. Łączna waga transferowanych danych to 1,2 MB. Leverage browser caching zmniejsza ilość zapytań do tych, które ponownie nie mogą być wykorzystane.

Nie blokuj CSS, JavaScript ani obrazów w mobile SEO

W zamierzchłych czasach niektóre urządzenia mobilne nie obsługiwały wszystkich tych elementów, więc twórcy stron mobilnych blokowali jeden lub wszystkie trzy typy. Obecnie GoogleBot chce widzieć i klasyfikować te same treści, które widzą użytkownicy. Więc nie ukrywaj CSS, JavaScript ani obrazów. Te elementy są również niezbędne, aby bot Google mógł zrozumieć, jaką wersję witryny mobilnej posiadasz.

Używaj danych strukturalnych Schema.org w mobile SEO

Ze względu na ograniczoną przestrzeń ekranu wynik wyszukiwania z fragmentami rozszerzonymi jeszcze bardziej się wyróżnia niż na komputerze. Zastosowanie tego typu rozszerzeń pomaga wygenerować wyższy współczynnik klikalności CTR.

Zoptymalizuj wyszukiwanie lokalne w mobile SEO

Jeśli Twoja firma ma odziały lokalne, pamiętaj o optymalizacji treści mobilnych na potrzeby wyszukiwania lokalnego. Obejmuje to standaryzację imienia i nazwiska, adresu i numeru telefonu, a także uwzględnienie nazwy miasta w metadanych witryny.

Czas odpowiedzi serwera (Improve server response time) w mobile SEO

Czas odpowiedzi serwera jest jednym z głównych czynników wpływających na ocenę naszej strony. Definiuje się go jako czas potrzebny do załadowania kodu HTML. Wpływ na ten parametr ma wiele czynników takich jak opóźnienia serwerów, czas ładowania kodu i plików.

Optymalizacja obrazów i grafik (Optimize images)

Optymalizacja obrazów ma na celu zmniejszenie ich rozmiaru tak by nie tracić na ich jakości. Dotyczy to obrazów umieszczanych jako grafiki jak również obrazów będących elementami składowymi szaty graficznej strony. Ten element może znacząco poprawić użyteczność naszej strony jak również ocenę wystawianą przez Google. W kilku projektach zmiana była znacząca. Optymalizacja obrazów poprawiła ocenę strony w PageSpeed Inside z 30 do 60. Taka zmiana ma realny wpływ na rangowanie naszej strony.

Minimalizacja kodu poprzedzającego właściwe treści (Reduce the size of the above-the-fold content) w mobile SEO

Jeśli wymagana ilość przesyłanych danych przekracza “initial congestion window” (zazwyczaj skompresowane 14.6kB ), będzie wymagało dodatkowych połączeń pomiędzy między serwerem a przeglądarką użytkownika. Dla użytkowników w sieciach o małej przepustowości, takimi jak sieci komórkowe, może to powodować znaczne opóźnienia podczas ładowania strony. Możemy przyspieszyć ładowanie stron, wymaga to byśmy ograniczyli rozmiar danych (znaczniki HTML, obrazy, CSS, JavaScript) które są generowane przed właściwymi treściami.

Remove Render-Blocking JavaScript

Zanim przeglądarka może wyświetlić stronę, musi wygenerować drzewo struktury HTML DOM. Podczas tego procesu, gdy analizator składni natrafi na skrypt, musi go zatrzymać proces i wykonać, zanim będzie mógł kontynuować analizowanie kodu HTML. W przypadku skryptu zewnętrznego analizator składni jest zmuszony czekać na pobranie zasobu. Powoduje to ponowne uruchomienie jednej lub kilku pętli i opóźnienie czasu pierwszego renderowania strony. Unikaj takich sytuacji i zdarzeń, w których blokujemy proces, przez generowanie kodu JavaScript, zwłaszcza zewnętrznych skryptów, które muszą zostać pobrane, zanim zostaną wykonane.

Optymalizacja CSS (Optimize CSS Delivery)

Zanim przeglądarka może wyrenderować treść, musi przetworzyć wszystkie style dla bieżącej strony. W rezultacie przeglądarka musi zablokować renderowanie, dopóki zewnętrzne arkusze stylów nie będą pobrane i przetworzone, co może wymagać wielu sprzężeń i w znaczący sposób opóźni czas ładowania. Jeśli zewnętrzny kod CSS jest mały, można go wstawić bezpośrednio do dokumentu HTML. Umieszczenie małego CSS w ten sposób pozwala przeglądarce na kontynuowanie renderowania strony bez wstrzymania procesu.

Przygotowanie strony przyjaznej Mobile SEO(Adapted to various mobile devices)

Jest kilka podejść które możemy zastosować przy projektowaniu strony mobilnej

mobile-friendly approach:

• Responsive web design (RWD) – To rozwiązanie pozwala generować identyczny kod HTML dla stron urządzeń mobilnych jak również desktop.  RWD jest rekomendowanym rozwiązaniem przez Google.
• Dynamic serving – przypadku tego rozwiązania pod jednym adresem generowane są dwie różne wersje HTML dla mobile i dla desktop. Dzieje się to na poziomie zapytanie i odpowiedzi serwera, który rozpoznaje typ urządzenia i odpowiednio generuje właściwy HTML.
• Oddzielny URL (mobile) – rozwiązanie, które wykorzystuje przekierowania w celu zaserwowania właściwej strona, która fizycznie jest dedykowana stroną mobilną. To rozwiązanie nie jest rekomendowane ze względu na zastosowane przekierowania.

Projektowanie skierowane na łatwość użytkowania (Design for touch)

W tym punkcie rekomenduję projektowanie przyjazne użytkownikowi. Jest to kluczowy element z punktu widzenia Google. Projekty powinny uwzględniać użyteczność dla użytkowników smartfonów i tabletów. Ważne jest by pamiętać o takich elementach jak wielkość przycisków, dostępność do wszystkich elementów nawigacyjnych, treści. Przyjmuje się, że optymalny rozmiar przycisku powinien oscylować wokół 44px x 44px), odległość pomiędzy przyciskami około 28x28px. Umożliwi to łatwy dostęp do przycisków. Istotne jest też to by nie przeładować jednej strony nadmiarem elementów klikalnych.

Łatwość czytania na małych ekranach (Easy reading on a small screen)

Tekst powinien być łatwy do czytania na małych ekranach jeśli tak nie będzie Google szybko obniża pozycje w wynikach organicznych stronom niespełniającym tego warunku. Elementy, które wpływają na czytelność to wielkość czcionka, jej rodzaj jak również hierarchizacja treści. Rekomendowana wielkość czcionki to 16 pikseli. Istotne jest by odnosić się do tej wartości jako do bazowej w przypadku zwiększania i zmieszczanienia rozmiarów(skalowania).

Manu nawigacyjne (Mobile navigation menu)

Rekomenduję ustawienie menu na górze lub na dole ekranu. W zależności od rozłożenia treści i jej ilości menu powinno być dostępne a jednocześnie nie powinno zasłaniać kluczowych treści. W trakcie przewijania powinno być dostępne i nie utrudniać nawigacji. Skutecznym rozwiązaniem jest opcja częściowego ukrywającego się menu.

Prostota i czytelność treści (Simple, clean content)

Ostatnią uwagą dotyczącą mobile jest czystość i przejrzystość treści. Treść powinna uwzględniać rozmiar małych ekranów stąd najważniejsze elementy powinny znajdować się w górnej cześć dostępne w pierwszym widoku. Treść nie powinna wychodzić poza obszar ramki wymaganej danym rozmiarem wyświetlacza, nie powinna zmuszać do skrolowania horyzontalnego.

Strony AMP

Ważnym elementem optymalizacyjnym jest implementacja Accelerated Mobile Pages czyli w skrócie AMP. Ten typ stron dedykowany jest wynikom wyszukiwania w wersji mobile. Dzięki unifikacji i odchudzeniu stron do minimum strony te generują się bardzo szybko. Niestety odchudzenie technologii powoduje, że strony AMP mają też kilka ograniczeń.

źródło: https://developers.google.com/

Polecam szkolenia seo dla zaawansowanych i początkujących!

Artykuł uaktualniony 1 rok