Mobile SEO

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 jest kluczowym składnikiem strategii SEO.

Mobile SEO definicja

Mobile SEO część kluczowa audytu SEO, czyli optymalizacja pod kątem urządzeń mobilnych, to proces optymalizacji strony internetowej tak, aby zapewnić doskonałe doświadczenia użytkownikom na urządzeniach mobilnych, takich jak smartfony i tablety.

W praktyce oznacza to upewnienie się, że strona ładuje się szybko, jest łatwa do nawigacji na małych ekranach, ma czytelne czcionki, linki są łatwe do dotknięcia, a wszystkie funkcje strony działają prawidłowo na urządzeniach mobilnych. Może to również obejmować stosowanie technik takich jak „responsive web design”, który automatycznie dostosowuje wygląd strony do rozmiaru ekranu urządzenia.

Mobile SEO jest niezwykle ważne, ponieważ coraz więcej osób korzysta z urządzeń mobilnych do przeglądania internetu. W 2015 roku Google wprowadził aktualizację znaną jako „Mobilegeddon”, która zaczęła faworyzować strony zoptymalizowane pod kątem urządzeń mobilnych w wynikach wyszukiwania na urządzeniach mobilnych.

Dodatkowo, od lipca 2019 roku, Google stosuje tzw. „Mobile-first indexing”, co oznacza, że Google domyślnie używa wersji mobilnej strony do indeksowania i rankingu. To sprawia, że Mobile SEO jest teraz kluczowym elementem strategii SEO dla każdej strony internetowej.

Różnica między SEO dla komputerów stacjonarnych a Mobile SEO

Różnice między SEO dla komputerów stacjonarnych a Mobile SEO wynikają głównie z odmiennych sposobów, w jakie użytkownicy korzystają z tych dwóch typów urządzeń. Podczas gdy podstawowe zasady SEO, takie jak używanie odpowiednich słów kluczowych czy tworzenie wartościowej treści, są uniwersalne dla obu typów urządzeń, istnieją pewne szczególności, które muszą być uwzględnione podczas optymalizacji dla urządzeń mobilnych.

Przede wszystkim, optymalizacja pod kątem urządzeń mobilnych wymaga specjalnej uwagi na wydajność i dostępność strony. Strony muszą ładować się szybko i być łatwe do nawigowania na małych ekranach. Responsywny design, który automatycznie dostosowuje wygląd strony do rozmiaru ekranu urządzenia, jest tu kluczowy.

Mobile SEO co to jest?

Dodatkowo, Mobile SEO bierze pod uwagę fakt, że użytkownicy mobilni często korzystają z wyszukiwania w kontekście lokalnym. Lokalne SEO, które obejmuje optymalizację dla wyników wyszukiwania związanych z lokalizacją, jest więc bardziej istotne dla Mobile SEO.

Również warto zauważyć, że Google przechodzi na tzw. „Mobile-first indexing”. To oznacza, że wersja mobilna strony jest teraz głównym punktem odniesienia dla indeksowania i rankingu Google. To jest ważne, ponieważ nawet jeśli strona jest dobrze zoptymalizowana dla komputerów stacjonarnych, może nie osiągnąć dobrych wyników w rankingu, jeśli jej wersja mobilna nie jest odpowiednio zoptymalizowana.

Podsumowując, podczas gdy podstawowe zasady SEO są takie same dla komputerów stacjonarnych i urządzeń mobilnych, istnieją pewne unikalne aspekty optymalizacji dla urządzeń mobilnych, które muszą być uwzględnione. Dlatego skuteczna strategia SEO powinna uwzględniać zarówno SEO dla komputerów stacjonarnych, jak i Mobile SEO.

Responsive Web Design a mobile SEO

Responsywny design, inaczej Responsive Web Design (RWD), to podejście do projektowania stron internetowych, które zapewnia poprawne wyświetlanie strony na różnych urządzeniach o różnych rozdzielczościach i rozmiarach ekranu. Głównym celem RWD jest zapewnienie doskonałego doświadczenia użytkownika niezależnie od tego, czy korzysta on z komputera stacjonarnego, laptopa, tabletu czy smartfona.

Responsywny design odgrywa kluczową rolę w kontekście Mobile SEO. Google wyraźnie zaleca stosowanie responsywnego designu jako preferowanego podejścia do optymalizacji stron mobilnych. Głównym powodem jest fakt, że strony z responsywnym designem mają ten sam URL i ten sam kod HTML niezależnie od urządzenia, co ułatwia Google indeksowanie i rozumienie strony. Ponadto, z punktu widzenia użytkownika, responsywny design zapewnia lepszą użyteczność i spójność doświadczeń na różnych urządzeniach.

Zastosowanie responsywnego designu obejmuje wiele aspektów, takich jak skalowalne obrazy, które automatycznie dostosowują swój rozmiar do szerokości ekranu, elastyczne siatki layoutu, które umożliwiają strukturę strony do zmiany w zależności od rozmiaru ekranu, i media queries, które pozwalają na zastosowanie różnych stylów CSS w zależności od charakterystyki urządzenia. Ważne jest jednak pamiętanie, że responsywny design to nie tylko kwestia techniczna. To jest również kwestia projektowania i strategii treści, które muszą być skuteczne i angażujące na każdym urządzeniu.

UX dla urządzeń mobilnych a mobile SEO

Dostarczenie doskonałego doświadczenia użytkownikowi (UX) na urządzeniach mobilnych jest kluczowym elementem Mobile SEO. Wynika to z faktu, że Google coraz bardziej koncentruje się na jakości doświadczenia użytkownika jako kluczowym czynniku rankingu, a strony, które oferują lepsze doświadczenia na urządzeniach mobilnych, są nagradzane wyższymi pozycjami w wynikach wyszukiwania.

Po pierwsze, strona powinna być łatwa do nawigacji na urządzeniu mobilnym. Oznacza to, że elementy interaktywne, takie jak przyciski czy linki, powinny być wystarczająco duże i odpowiednio rozmieszczone, aby użytkownicy mogli łatwo z nich korzystać na ekranach dotykowych. Menu i struktura strony powinny być proste i intuicyjne, umożliwiając użytkownikom łatwe odnalezienie poszukiwanych informacji.

Warto także zwrócić uwagę na szybkość ładowania strony. Użytkownicy mobilni często korzystają z internetu w miejscach z ograniczonym połączeniem, dlatego strony, które ładują się wolno, mogą skutkować wysokim współczynnikiem odrzuceń. W tym kontekście ważne jest optymalizowanie obrazów, minimalizowanie kodu CSS i JavaScript, a także korzystanie z technologii takich jak przyspieszanie mobilnych stron (AMP) od Google.

Treści również powinny być dostosowane do małych ekranów. Długie bloki tekstu mogą być trudne do czytania na urządzeniach mobilnych, dlatego warto stosować krótkie akapity, podtytuły, listy i inne elementy, które ułatwiają skanowanie treści.

Wreszcie, ważne jest, aby wszelkie funkcje strony, takie jak formularze czy sklepy internetowe, działały poprawnie na urządzeniach mobilnych. Użytkownicy powinni mieć możliwość łatwego i bezproblemowego korzystania ze wszystkich aspektów strony na swoich urządzeniach.

Pamiętaj, że Mobile SEO nie jest tylko o technicznej optymalizacji strony pod kątem urządzeń mobilnych, ale także o dostarczaniu doskonałego doświadczenia użytkownikom tych urządzeń. Dlatego praca nad UX dla urządzeń mobilnych powinna być kluczowym elementem każdej strategii Mobile SEO.

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.

Jak optymalizować strony mobilne

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.

Optymalizacja dla dotyku a mobile SEO

Pamiętaj, że użytkownicy urządzeń mobilnych korzystają z ekranów dotykowych, więc wszystkie elementy interaktywne, takie jak przyciski, linki i formularze, powinny być wystarczająco duże i łatwe do dotknięcia

Testowanie i monitorowanie a mobile SEO

Na koniec, ale nie mniej ważne, powinieneś regularnie testować swoją stronę na różnych urządzeniach i monitorować jej wydajność za pomocą narzędzi takich jak Google Search Console, aby upewnić się, że wszystko działa tak, jak powinno.

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 7 dni