Podstawy mobile seo

Marta Gryszko
Łukasz Suchy
Podstawy mobile SEO
2022

Korektor: Gabriel Wyględacz
Projekt okładki (Canva): Bartosz Cymes
Wydawca: SeoStation
© Marta Gryszko, 2022
© Łukasz Suchy, 2022
Książka powstała w inteligentnym systemie wydawniczym Ridero

SPIS TREŚCI
Wstęp 6
1. Sygnały dotyczące jakości strony 8
2. Mobilność strony — co to właściwie jest? 11
3. Krótka historia Mobile-First Index 15
4. Core Web Vitals 20
LCP (Largest Contentful Paint) 20
FID (First Input Delay) 21
CLS (Cumulative Layout Shift) 21
5. Czy moja strona jest przystosowana do obsługi
na urządzeniach mobilnych? 26
5. 1. Błędy i problemy techniczne w mobile SEO 26
Wtyczka Lighthouse do Google Chrome 28
Google Search Console: obsługa na urządzeniach
mobilnych 29
5.2. Szybkość stron mobilnych 32
Narzędzie PageSpeed Insights 32
Google Search Console 34
Inne przydatne narzędzia 35
5.3. Problemy związane z użytecznością serwisu
na urządzeniach mobilnych 36
Zakończenie 41

Cześć!
Cieszymy się, że zainteresowała Cię tematyka „mobile SEO”.
Na temat wskaźników Core Web Vitals oraz zmian w algorytmie
Google, dotyczących Mobile First Index, napisane zostało
już wiele. My postanowiliśmy tę wiedzę uporządkować i podać
Ci ją w postaci skondensowanej. Nie znajdziesz tu rozległych
opisów i niepotrzebnych ozdobników. Jak mawiają w branży
SEO — to samo „mięsko” ;)
Część tematów, o których tutaj piszemy, znajdziesz również
w Bazie Wiedzy SeoStation. Całość postanowiliśmy jednak zna-
cząco poszerzyć i udostępnić Ci w bardziej przystępnej formie.
W ten sposób oddajemy w Twoje ręce zestawienie najważniej-
szych rzeczy, na które w kontekście „mobile SEO” należy zwró-
cić uwagę i o których po prostu powinno się wiedzieć.
Życzymy Ci miłej lektury!
Marta Gryszko
Łukasz Suchy
5

WSTĘP
Żyjemy w czasach, w których większość treści w Internecie
„konsumowana” jest z wykorzystaniem smartfonów. Ilość urzą-
dzeń mobilnych oraz procent ruchu, który generują one w sieci
z roku na rok się zwiększa.
Źródło: Wykres przygotowany na podstawie danych własnych z Go-
ogle Analytics
6

Źródło: Udział organicznego ruchu mobilnego (kolor niebieski)
w ogólnym ruchu organicznym (kolor zielony) — narzędzie SeoSta-
tion.pl
Obecnie niezwykle ważne jest to, aby zadbać o przystosowa-
nie swojej strony internetowej do jej poprawnego działania i wy-
świetlania na urządzeniach mobilnych. Mobilność Twojej strony
jest jednym z sygnałów rankingowych, który może mieć realny
wpływ na jej widoczność w wynikach wyszukiwania.
7

1. SYGNAŁY DOTYCZĄCE
JAKOŚCI STRONY
Google bierze pod uwagę kilkaset czynników rankingowych,
na które składają się zarówno czynniki online (związane z opty-
malizacją strony), jak i te offline (związane głównie z pozyski-
waniem odnośników). W ostatnich latach najgłośniej jest o naj-
nowszej grupie sygnałów dotyczących jakości strony, których
analiza ma za zadanie premiować witryny szybkie i wygodne
w użytkowaniu.
Aktualnie wyszukiwarka kładzie nacisk na cztery najważ-
niejsze sygnały dotyczące jakości strony. Należą do nich:
— dostosowanie strony do urządzeń mobilnych — wią-
że się to z coraz powszechniejszym stosowaniem różnych urzą-
dzeń (w tym smartfonów) do korzystania ze stron internetowych
i tym samym z koniecznością zadbania o to, aby na każdym
urządzeniu strona wyświetlała się prawidłowo oraz szybko;
— podstawowe wskaźniki internetowe — mowa tu
o trzech składnikach pomocnych w pomiarze jakości strony, któ-
re określamy mianem Core Web Vitals. Należą do nich: najwięk-
sze wyrenderowanie treści (LCP), opóźnienie przy pierwszym ła-
dowaniu (FID) oraz skumulowane przesunięcie układu (CLS).
Wskaźniki te zostaną omówione w rozdziale „Core Web Vitals”;
— użycie protokołu HTTPS — zapewnia ono bezpieczne
połączenie użytkowników z daną stroną poprzez szyfrowanie
8

danych przekazywanych pomiędzy komputerem użytkownika
a stroną. Szczegóły na ten temat znajdują się w pomocy Google
[https://support.google.com/transparencyreport/answer/7381231].
Źródło: SEO checklista po wdrożeniu SSL
9

— brak uciążliwych reklam pełnoekranowych — 10
stycznia 2017 r. Google poinformowało o możliwym obniżeniu
pozycji tych stron, na których pełnoekranowe reklamy utrudnia-
ją dostęp do najważniejszych treści. Dotyczyło to zarówno sa-
modzielnych reklam zajmujących pełen widok strony, jak i tzw.
pop-upów przysłaniających stronę tylko częściowo. Szczegóły
na ten temat są dostępne w tzw. Centrum Wyszukiwarki Google
[https://developers.google.com/search/blog/2016/08/helping-users-
easily-access-content-on?hl=pl].
Źródło: https://developers.google.com/search/blog/2020/11/ti-
ming-for-page-experience
10

2. MOBILNOŚĆ STRONY —
CO TO WŁAŚCIWIE JEST?
Przez mobilność strony internetowej należy rozumieć to,
iż jest ona odpowiednio zoptymalizowana lub też przystosowa-
na do wyświetlania i obsługi zarówno na komputerach, lapto-
pach, jak i oczywiście urządzeniach mobilnych.
Mam tutaj na myśli to, że strona nie tylko wyświetla się tam
w sposób poprawny, ale prezentuje w odpowiedni sposób treści,
działa odpowiednio szybko, a także umożliwia wygodne zreali-
zowanie celów i zadań użytkownikom takiego serwisu,
czy też aplikacji.
Źródło: Panel użytkownika w SeoStation.pl
11

Jeśli chodzi o możliwości optymalizacji swojego serwisu
pod kątem mobile, mamy tutaj kilka możliwych ścieżek
już na etapie budowy samej witryny. Możemy mieć tutaj dedy-
kowane wersje mobilne, jak i strony responsywne, które bazują
na tym samym kodzie HTML:
Źródło: https://developers.google.com/search/mobile-sites/mobile-
seo
Zdecydowanie najbardziej popularnym rozwiązaniem jest
oczywiście: „Elastyczne projektowanie witryn”, które skojarzysz
najpewniej z wyrażeniem „responsywnych stron interneto-
wych”.
12

Źródło: Makiety responsywnej strony internetowej — https://deve-
lopers.google.com/search/mobile-sites/get-started
Popularność responsywnych stron internetowych wynika
m.in. z zachowania tego samego kodu HTML serwisu. A więc za-
zwyczaj jednej bazy danych, jednego panelu zarządzania tre-
ściami itd. Najczęściej widok szablonu strony zbudowany jest
z kolumn i wierszy, a jej szerokość opiera się np. na procento-
wych wartościach.
Dzięki takiemu rozwiązaniu poszczególne elementy danego
widoku przeskakują pod siebie w zależności od szerokości ekra-
nu użytkownika. W ten sposób ta sama treść jest odpowiednio
prezentowana na wielu różnych urządzeniach mobilnych,
bez konieczności dostosowywania zawartości serwisu do danych
zakresów rozdzielczości lub utrzymywania dedykowanej wersji
mobilnej strony. Jest to rozwiązanie niezwykle wygodne, popu-
larne i po prostu wydajne.
Pozostałe dwa rozwiązania, to jest dynamiczne serwowanie
treści oraz osobne adresy URL (np. w przypadku dedykowanej
13

aplikacji lub subserwisu), są nieco mniej popularne. Bardzo czę-
sto są też znacznie droższe i trudniejsze w utrzymaniu oraz za-
rządzaniu. Dlatego zdecydowanie się na takie rozwiązanie po-
winno wynikać raczej z bardzo specyficznych potrzeb właściciela
serwisu, aniżeli chęci spróbowania czegoś innego, czy zachcia-
nek deweloperów.
Warto wspomnieć tutaj również o dedykowanych aplikacjach
na Androida i iOS, które także można indeksować w Google. Jest
to jednak rozwiązanie niezwykle rzadkie i mające swoje zastoso-
wanie tylko w konkretnych projektach.
Obecnie większość stron internetowych jest po prostu re-
sponsywnych, a w przypadku istnienia aplikacji, stanowi ona
odrębny projekt dedykowany rynkowi aplikacji mobilnych.
Przeczytaj również o…
— Mobilność strony [https://www.seostation.pl/wiedza/mobil-
nosc-strony]
14

3. KRÓTKA HISTORIA MOBILE-
FIRST INDEX
Już od 2014 roku Google kładło spory nacisk na edukowanie
webmasterów w zakresie konieczności dostosowania swoich
stron do urządzeń mobilnych. W międzyczasie pojawiały się
informacje o tym, że posiadanie wersji mobilnej stało się kolej-
nym czynnikiem rankingowym. Następnie strony niedostosowa-
ne do poprawnego wyświetlania na różnych urządzeniach miały
spaść w wynikach wyszukiwania Google, aż w końcu — od jesie-
ni 2017 roku — wyszukiwarka stopniowo zaczęła ustalać pozycje
stron w oparciu o ich wersję mobilną.
Garry Illyes podczas konferencji PubCon w 2017 r. poinfor-
mował, że w pierwszej kolejności aktualizacja Mobile-First In-
dex będzie dotyczyć tylko tych stron, które są już dostosowane
do urządzeń mobilnych. Miało to zapobiegać gwałtownym zawi-
rowaniom w SERPach w początkowym okresie wdrażania tej
zmiany. Strony, które nie były na nią gotowe, jeszcze przez jakiś
czas miały być oceniane na podstawie wersji desktopowej.
For now, sites that are not ready are not being moved to the mobile first
index. (cyt. Garry Illyes)
Z kolei w marcu 2018 roku oficjalnie rozpoczęło się wdra-
żanie Mobile-First Index, które odbywało się stopniowo,
i ostatecznie od 1 lipca 2019 roku obowiązywał domyślny spo-
sób indeksacji wersji mobilnej strony. O tym, że strona zaczęła
być indeksowana w oparciu o jej wersję dostępną dla urządzeń
15

mobilnych, informowały komunikaty wysyłane przez Google
mailowo oraz wyświetlane w panelu Google Search Console.
Źródło: Powiadomienie mailowe z Google Search Console
Źródło: Status strony w Google Search Console
16

Wiosną 2021 roku strony nieprzystosowane do urządzeń
mobilnych miały całkowicie znikać z indeksu Google,
a przynajmniej takie informacje pojawiały się w sieci. W rzeczy-
wistości tak się nie stało, co potwierdza poniższy widok.
Źródło: Status strony w Google Search Console
Co więcej, od lutego do końca marca 2022 roku planowane
jest wdrażanie rankingu jakości stron na komputery wg kryte-
riów obowiązujących dotychczas strony mobilne.
„Ten nowy ranking będzie oparty na tych samych sygnałach dotyczących
jakości stron, które wdrożyliśmy w tym roku dla urządzeń mobilnych.
Chcemy pomóc właścicielom witryn w analizowaniu wpływu jakości stron
na komputery na pozycję witryny w rankingu.” (cyt.: https://develo-
pers.google.com/search/blog/2021/11/bringing-page-experience-to-desk-
top)
17

Źródło: https://developers.google.com/search/blog/2021/11/brin-
ging-page-experience-to-desktop
— Mobile First Index i zero desktop result [https://www.se-
ostation.pl/wiedza/mobile-first-index-i-zero-desktop-result-wiel-
kie-zmiany-w-marcu]
— Q&A dot. Mobile First Index — Hubert Litwin [https://
www.seostation.pl/wiedza/qa-mobile-first-index]
— Mobile first indexing i wszystko co musisz o tym wiedzieć
[https://www.seostation.pl/wiedza/mobile-first-indexing-i-wszyst-
ko-co-musisz-o-tym-wiedziec]
18

Kupon SeoStation: www.seostation.pl/kupon.html
19

4. CORE WEB VITALS
Mianem Core Web Vitals określa się zestaw czynników ran-
kingowych wdrożonych podczas aktualizacji algorytmu Google
w 2021 roku. Czynniki te są ściśle związane z dbaniem o wygodę
użytkowników odwiedzających strony, dlatego istotny wpływ
na nie ma szybkość wczytywania witryny, aczkolwiek nie powi-
nieneś poprzestawać tylko na tym wskaźniku.
Na pełen zestaw Core Web Vitals składają się trzy wskaźniki.
Aby liczyć na lepszą pozycję w Google, należy chociaż w mini-
malnym stopniu zastosować każdy z nich, uzyskując wynik
oznaczony kolorem zielonym:
LCP (LARGEST CONTENTFUL PAINT)
To tzw. największe wyrenderowanie treści. Jest to czas nie-
zbędny do pełnego wczytania największego elementu w postaci
grafiki lub bloku tekstu, który wyświetla się na widocznym ob-
szarze strony. Czas ten powinien wynosić maksymalnie 2,5 se-
kundy.
Wpływ na wartość wskaźnika LCP mają m.in.:
— czas odpowiedzi serwera,
— cachowanie plików statycznych takich jak obrazy czy sty-
le CSS,
— kompresja obrazów i plików tekstowych.
20

FID (FIRST INPUT DELAY)
Określany jako opóźnienie przy pierwszym działaniu jest
miarą interaktywności. Jest to czas reakcji na wykonanie przez
użytkownika jakiegokolwiek działania, np. kliknięcie w przycisk
wysłania formularza. FID powinien zmieścić się w 100 milise-
kundach.
Wpływ na wartość FID mają m.in.:
— liczba zapytań do serwera,
— zewnętrzne skrypty.
CLS (CUMULATIVE LAYOUT SHIFT)
To tak zwane skumulowane przesunięcie układu. Analizuje,
czy poszczególne elementy nie zaczynają zmieniać swojego po-
łożenia wraz z wczytywaniem innych elementów (np. reklam)
lub próbą wykonania przez użytkownika jakiejś akcji. Wskaźnik
CLS jest wyrażony liczbą od 0 do 1 i powinien być mniejszy
bądź równy 0,1.
Aby zapobiec związanym z tym problemom, warto bezpo-
średnio w kodzie określić wymiary przestrzeni, w której poja-
wi się doczytany później element. Pozwoli to uniknąć sytuacji,
w której użytkownik próbuje kliknąć link w menu, a ostatecznie
klika w załadowany w ostatniej chwili banner.
Zmiany związane z ulepszeniami na stronie, które mają
na celu poprawienie wskaźników Core Web Vitals, powinny być
wprowadzane przez deweloperów. Główną zmianą, jaką Google
zaleca osobom niedoświadczonym, jest rozpoczęcie od zmniej-
szenia rozmiaru strony tak, aby nie przekraczał 500 KB. Inną
sugestią jest zmniejszenie do 50 liczby zasobów wczytywa-
nych na stronie.
Pozostałe zmiany warto nanosić na podstawie raportów wy-
21

generowanych przez popularne narzędzia, które zostaną opisa-
ne w kolejnych rozdziałach. Należą do nich m.in.:
— upewnienie się co do wydajności serwera i tego, że używa
najnowszej wersji PHP (przy jej zmianie należy upewnić się,
że nie wpłynęła ona na poprawność działania strony);
— sprawdzenie wydajności innych motywów graficznych
używanych CMS-ów i porównanie ich z obecnym;
— analiza używanych wtyczek i wyłączenie lub zamiana
tych, które wczytują nieużywany na stronie kod CSS oraz JS, al-
bo które generują duże ilości zbędnego kodu wydłużającego czas
ładowania strony;
— łączenie wielu mniejszych plików (np. CSS) oraz usuwanie
nieużywanych fragmentów kodu;
— minifikacja kodu HTML, CSS i JS polegająca na usunięciu
nadmiarowych znaków w postaci komentarzy, spacji, znaków
nowej linii itp., które znacząco zwiększają wagę tych plików;
— optymalizacja obrazków przed wgraniem ich na serwer,
co pozwala obniżyć ich wagę i przyspiesza ich załadowanie;
— wczytywanie obrazków w rozmiarach, w jakich mają się
wyświetlać na stronie i uwzględnienie ich rozmiarów w kodzie
HTML (ustalenie ich szerokości i wysokości), co pozwala ograni-
czyć przesunięcie układu podczas ładowania poszczególnych
elementów strony;
— korzystanie z pamięci podręcznej, dzięki czemu przeglą-
darka nie będzie musiała za każdym razem pobierać wszystkich
zasobów łącznie z tymi, które są stałe.
22

Więcej wskazówek na temat optymalizacji wskaźników Core
Web Vitals znajdziesz na stronach:
— Web Vitals [https://web.dev/vitals/] (EN)
— Core Web Vitals. Jak zoptymalizować serwis [https://digi-
talhill.pl/seo/core-web-vitals-nowy-czynnik-rankingowy-google-
jak-zoptymalizowac-serwis/#Jak_zoptymalizowac_strone_pod_Co-
re_Web_Vitals] (PL)
— Core Web Vitals — kompleksowy poradnik [https://octa-
media.pl/blog/core-web-vitals/] (PL)
Aktualizacja dotycząca jakości stron (czyli związana m.in.
ze wskaźnikami Core Web Vitals) była wdrażana stopniowo
od połowy czerwca do końca sierpnia 2021 roku. Od tej pory
pod potrzeby ustalania rankingu były brane pod uwagę zarówno
wskaźniki LCP, FID oraz CLS, jak i dostosowanie stron pod ką-
tem urządzeń mobilnych, zabezpieczenie połączenia z nimi po-
przez zastosowanie protokołu HTTPS, a także unikanie inwazyj-
nych reklam.
Źródło: Ocena wydajności przykładowej strony
23

Źródło: Zmiany widoczności przykładowej strony zaprezentowane
w Google Search Console
— Optymalizacja CLS pod Core Web Vitals
na przykładzie Prestashop [https://
www.seostation.pl/wiedza/optymalizacja-cls-
cumulative-layout-shift-core-web-vitals-
prestashop]
24

oferta: www.lexy.com.pl/blog/produkt/kurs-pozycjonowania-dla-
poczatkujacych
25

5. CZY MOJA STRONA JEST
PRZYSTOSOWANA
DO OBSŁUGI
NA URZĄDZENIACH
MOBILNYCH?
Aby móc odpowiednio przystosować swój serwis do jego po-
prawnego działania na urządzeniach mobilnych, konieczne jest
najpierw zbadanie i zdefiniowanie ewentualnych problemów
w tej kwestii.
Możemy rozróżnić tutaj dwa elementy, które należy spraw-
dzić podczas optymalizacji swojej strony internetowej dla mo-
bile.
Pierwszym z nich są błędy i problemy techniczne (mobil-
ność i szybkość), a drugim problemy związane z użyteczno-
ścią serwisu na urządzeniach mobilnych.
5. 1. BŁĘDY I PROBLEMY TECHNICZNE
W MOBILE SEO
Błędy i problemy techniczne w mobile SEO dotyczą naj-
częściej kodu Twojego serwisu. A to, jak pod tym względem wy-
pada Twój serwis, sprawdzisz w kilku poniższych narzędziach.
Narzędzie: Test optymalizacji mobilnej
Podstawowym narzędziem, którym sprawdzisz pojedynczy
adres URL pod względem jego przystosowania do wyświetla-
nia na urządzeniach mobilnych, jest „Test optymalizacji mo-
26

bilnej” od Google [https://search.google.com/test/mobile-frien-
dly].
W narzędziu tym przetestujesz dowolny adres URL i spraw-
dzisz to, czy działa on poprawnie lub czy posiada jakieś pro-
blemy.
Oprócz samego testu, zobaczysz tutaj również wstępnie wy-
renderowany kod HTML testowanego adresu URL, jak i zrzut
ekranu. I tutaj uwaga — w przypadku zrzutu, bardzo często do-
świadczysz sytuacji jak na poniższym screenie, w którym pewny
element strony (logo) nie został poprawnie załadowany. Jest
to naturalne zjawisko, z jakiegoś powodu narzędzie to bardzo
często nie doładowuje niektórych elementów. Po sprawdzeniu
okazuje się, że są one ogólnodostępne i nieblokowane. Oczywi-
ście warto to prześledzić.
Najważniejszy dla Ciebie jest jednak sam komunikat, który
powie Ci, czy testowany adres URL jest dostosowany do obsługi
na urządzeniach mobilnych, czy też nie:
27

Źródło: Zrzut z narzędzia Test optymalizacji mobilnej
WTYCZKA LIGHTHOUSE DO GOOGLE
CHROME
Jako alternatywę powyższego narzędzia wykorzystać można
nieco bardziej precyzyjną wtyczkę Lighthouse [https://develo-
pers.google.com/web/tools/lighthouse] do Google Chrome. Dostar-
czy ona Ci nieco więcej informacji na temat danego adresu URL.
Ja sam wykorzystuję ją jednak nie tyle do testów, ile do pracy
z konkretnymi adresami URL, na których znalezione zostały błę-
dy z mobilnością, a błędów tych w codziennej pracy najczęściej
28

szukam w kolejnym narzędziu.
Źródło: Lighthouse dostępny z poziomu narzędzi dla deweloperów
w Google Chrome
GOOGLE SEARCH CONSOLE: OBSŁUGA
NA URZĄDZENIACH MOBILNYCH
Google Search Console [https://search.google.com/search-
console/] to narzędzie w przeglądarce, w którym znajdziesz sze-
reg przydatnych informacji. Jedną z nich jest właśnie kondycja
Twojej witryny pod względem obsługi na urządzeniach mobil-
nych.
Zaletą tego narzędzia jest to, że monitoruje ono samodziel-
nie daną domenę i w razie wykrycia błędów, informuje o proble-
matycznych adresach URL:
29

Źródło: Google Search Console — Obsługa na urządzeniach mobil-
nych
Dostaniesz więc tutaj próbki adresów URL, na których wy-
stąpiły problemy z mobilnością.
Mając konkretne przykłady, możesz wykorzystać właśnie
Lighthouse do zdefiniowania konkretnych problemów z mobil-
nością (jak zbyt małe czcionki, zbyt małe odległości pomiędzy
elementami dotykowymi itd.) dla zgłaszanych przez narzędzie
adresów URL.
Jako że dane w Search Console odświeżają się z dużym opóź-
nieniem, właśnie z wykorzystaniem Lighthouse czy narzędzia
Test optymalizacji mobilnej, będziesz mógł badać swoje zmiany
na bieżąco.
Warto dodać tutaj, że aby przyspieszyć proces sprawdzania
błędów mobilnych w Search Console, w widoku konkretnej gru-
py błędów należy kliknąć „Sprawdź poprawkę”.
30

Źródło: Google Search Console
Przedstawione powyżej narzędzia pozwolą Ci na podstawo-
wą analizę swoich stron internetowych pod kątem ich mobilno-
ści. Warto sprawdzić tutaj stronę główną, widok kategorii, widok
karty produktowej, koszyk, wpis blogowy itd., czyli każdy poje-
dynczy widok.
Nieodłącznym elementem badania mobilności serwisu
powinny być też testy na prawdziwym urządzeniu mobil-
nym.
31

5.2. SZYBKOŚĆ STRON MOBILNYCH
Drugim elementem składowym „Mobile SEO” jest szybkość
działania strony.
Szybkość, szczególnie ta mobilna, odgrywa bardzo ważną
rolę w procesie optymalizacji pod mobilne SEO i pozycjonowa-
nia takich podstron. Szybkość jest oczywiście kolejnym czynni-
kiem rankingowym, tak jak przystosowanie do obsługi na urzą-
dzeniach mobilnych.
Szybkość ma wpływ na ranking, ale także na odczucia i za-
chowanie użytkowników, którzy przeglądają Twój serwis.
Z uwagi na to, bardzo ważne jest, aby stale badać i optymali-
zować strony internetowe pod tym kątem. Podobnie jak w przy-
padku badania tego, czy strona jest mobilna, tak i tutaj mamy
odpowiednie ku temu narzędzia.
NARZĘDZIE PAGESPEED INSIGHTS
Pierwszym z nich jest PageSpeed Insights [https://pagespe-
ed.web.dev] — narzędzie w wersji online.
Zbadasz tu jeden konkretny adres URL pod kątem szybkości
jego działania na urządzeniach mobilnych oraz komputerach
stacjonarnych.
W narzędziu otrzymacie również dane dot. wskaźników Core
Web Vitals (o których szerzej pisaliśmy w rozdziale 4), wchodzą-
cych w skład Page Experience Signals.
Badając tutaj konkretny adres URL, warto zwrócić uwagę
właśnie na wskaźniki Core Web Vitals i to, czy w wyniku badania
posiadamy „Passed” czy „Failed”, szczególnie dla widoku Ko-
mórka:
32

Źródło: Wskaźniki Core Web Vitals w narzędziu PageSpeed Insights
W kolejnym kroku należy przejść do zbiorczej oceny szyb-
kości działania testowanego adresu URL, która znajduje się po-
niżej.
W tym miejscu narzędzie w 100 punktowej skali przedstawi
Ci ogólną ocenę szybkości działania testowanego adresu URL:
33

Źródło: Ocena szybkości działania testowanego adresu na stronie
zegluj.mobi
Warto dążyć tutaj przynajmniej do tych 50–60 punktów.
W przypadku rozbudowanych podstron, z dużymi ilościami gra-
fik i elementów, uzyskanie 100 punktów jest bardzo trudne.
GOOGLE SEARCH CONSOLE
Zbiorcze informacje na temat szybkości Twojej strony inter-
netowej znajdziesz oczywiście w narzędziu Google Search Con-
sole [https://search.google.com/search-console].
W zakładce jakość strony znajdziesz % adresów URL, które
oceniane są jako dobrej jakości, a ponadto szczegółowe raporty
dot. szybkości (wskaźniki internetowe CWV) i wspomnianej
już mobilności.
34

Źródło: Search Console — Jakość strony, szybkość, mobilność
i HTTPS
INNE PRZYDATNE NARZĘDZIA
Bardziej szczegółowe (techniczne) dane dotyczące szybkości
wczytywania znajdziesz również w kilku innych przydatnych na-
rzędziach. Np. we wspomnianej już wtyczce Lighthouse, konsoli
przeglądarki Chrome, czy narzędziu GTmetrix [https://gtme-
trix.com].
W kwestii szybkości należy także testować poszczególne wi-
doki swojego serwisu.
35

— Google Mobile Speed Scorecard [https://www.seostation.pl/
wiedza/google-mobile-speed-scorecard]
5.3. PROBLEMY ZWIĄZANE
Z UŻYTECZNOŚCIĄ SERWISU
NA URZĄDZENIACH MOBILNYCH
Pracując z dostosowaniem swoich stron do urządzeń mobil-
nych, nie powinniśmy skupiać się tylko i wyłącznie na elemen-
tach technicznych. Oczywiście są one bardzo ważne, ale powin-
ny iść w parze z optymalizacją użyteczności samego serwisu
pod kątem użytkowników, którzy go odwiedzają. Warto monito-
rować ich zachowania, np. poprzez aplikacje, jak Hotjar [https://
www.hotjar.com].
Należy pamiętać o tym, że dobra strona mobilna, to strona,
która dla użytkowników urządzeń mobilnych będzie wygodna
w obsłudze. Mam tutaj na myśli wyświetlanie tej strony, ale tak-
że wygodne i szybkie realizowanie zakładanych celów i potrzeb
tych użytkowników.
Podstawowymi elementami, które należy mieć na uwadze
podczas projektowania/optymalizacji widoków mobilnych jest
to, że użytkownicy mobilni:
— posiadają bardzo małą przestrzeń roboczą,
— obsługują telefon poprzez dotyk, najczęściej jednym pal-
cem,
— stosunkowo często mają problem z dostępem do szybkie-
go i stabilnego Internetu,
— często uciekają ze stron, które się wolno ładują i wracają
do wyników wyszukiwania,
36

— mogą mieć problem z odbiorem bardzo rozbudowanych
i rozpraszających podstron.
Należy więc możliwie jak najbardziej ułatwiać im korzysta-
nie z Twojej strony internetowej i szczegółowo zbadać widoki
mobilne.
Dobrą praktyką jest po prostu przetestowanie wszystkich
ścieżek realizowanych celów na fizycznym urządzeniu mobil-
nym. Chodzi mi np. o pozornie prostą rzecz, jak przejście
na urządzeniu mobilnym procesu zakupowego. Przykładowo:
— od produktu do zakupu,
— od strony głównej do kategorii, produktu i zakupu,
— od strony głównej do wyszukiwarki, produktu i zakupu.
Szczegółowe prześledzenie tego procesu, najlepiej z wyko-
rzystaniem osób postronnych (nawet kogoś z rodziny), pozwoli
Ci na podstawowe zbadanie ścieżek, które prowadzą do konwer-
sji. Jednocześnie możesz wyłapać potencjalne błędy czy proble-
matyczne miejsca i elementy strony.
Warto zwrócić również uwagę na najważniejsze elementy
swojego serwisu, które mogą mieć realny wpływ na odczucia
i poruszanie się użytkowników po serwisie:
— Menu nawigacyjne — serwis musi posiadać odpowiednio
przemyślane i zbudowane mobilne menu nawigacyjne. Warto
rozważyć tutaj to, aby bardzo rozbudowane menu z komputera,
na mobile nieco uprościć. Pamiętajmy o tym, że użytkownicy
mobilni obsługują telefon poprzez dotyk, a przy tym posiadają
bardzo mały wyświetlacz. Duża ilość kliknięć i przewinięć w me-
nu może być problematyczna;
37

— Ekspozycja treści na 1 ekranie — jest to bardzo ważny
element zarówno pod względem użyteczności, jak i SEO. Pracu-
jąc z wersją mobilną serwisu, należy mieć na uwadze to,
aby pierwszy ekran załadowanej podstrony, na którą trafia użyt-
kownik, ładował się możliwie najszybciej, treść na nim nie prze-
skakiwała podczas ładowania. Dodatkowo, pierwszy widok powi-
nien jasno informować użytkownika, czego dotyczy ta podstrona
oraz prezentować mu właściwą jej treść, z którą może podjąć in-
terakcję. W przypadku sklepu internetowego mam tutaj na myśli
np. nazwę kategorii oraz listę produktów. W przypadku usługi —
nazwę usługi i jej opis;
— Rozmieszczenie podstawowych elementów nawiga-
cyjnych — pamiętaj o tym, aby w widoku mobilnym podstawo-
we elementy znalazły się w miejscach, w których będą szukać
ich użytkownicy. Pamiętaj o ikonie menu nawigacyjnego w gór-
nej części serwisu, pamiętaj o umieszczeniu ikony wyszukiwarki.
Przydatne będą też okruszki nawigacyjne, które umożliwią wy-
godny powrót np. do kategorii wyżej, dodatkowe menu w stopce
(o nas, regulamin, zwroty, kontakt itd.);
— Angażowanie użytkownika — pamiętaj, że użytkownik
mobilny przewija stronę palcem i często nie widzi wielu elemen-
tów Twojej strony. Dlatego miej na uwadze to, aby optymalizo-
wać widok mobilny i co jakiś czas starać się podsuwać mu przy-
datne elementy nawigacyjne lub treści:
— użytkownik dotarł na sam dół karty produktowej? Pod-
suń mu inne przydatne treści (podobne produkty, powiązane
artykuły),
— użytkownik przewija opis Twojej usługi? Nie zapomnij
o wezwaniu do działania — np. przycisku, który poprowadzi go
do formularza kontaktowego albo umożliwi bezpośredni kontakt
przez telefon,
38

— użytkownik czyta Twój wpis na blogu? Podsuń mu boksy
powiązanych produktów.
— Czy Twoja strona jest mobile-friendly? [https://www.se-
ostation.pl/wiedza/czy-strona-jest-mobile-friendly]
39

ZAKOŃCZENIE
Cyfryzacja i pośpiech sprawiają, że zamiast z tradycyjnych
komputerów coraz częściej korzystamy z urządzeń mobilnych.
Czytamy, kupujemy, komunikujemy się, czy załatwiamy sprawy
formalne, wykorzystując do tego smartfony. Nie wyobrażamy
sobie już życia bez telefonu z dostępem do Internetu. Nawet
na zakupach stacjonarnych przeglądamy cyfrowe gazetki pro-
mocyjne, czy sprawdzamy cenę danego produktu w sklepie onli-
ne. Z kolei w niektórych restauracjach zamiast tradycyjnego, pa-
pierowego menu, pojawiły się już QR-kody, za pomocą których
można zapoznać się z pełną listą dań dostępną z poziomu wła-
snego smartfona.
Źródło: Restauracja “Głową w piach”
41

Przystosowanie stron mobilnych z pewnością jest procesem
czasochłonnym i dość skomplikowanym. Natomiast nie podlega
dyskusji, że takie działania muszą zostać podjęte. Aktualnie po-
nad połowa wyszukiwań w Google, to właśnie wyszukiwania
z urządzeń mobilnych. Dlatego tak ważnym jest, aby strona in-
ternetowa była właściwie zoptymalizowana pod tym kątem. Za-
pewni to nie tylko komfort przeglądania treści jej użytkownikom,
ale także pomoże osiągać wyższe pozycje w wynikach wyszuki-
wania. Brak dostosowania witryny do urządzeń mobilnych
to spadek ruchu na stronie, a co za tym idzie utrata potencjal-
nych klientów i konwersji.
42

Podstawy mobile seo

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Podstawy mobile seo

Ähnlich wie Podstawy mobile seo (20)

Podstawy mobile seo