Panel klienta
SEO

Mobile-first indexing w sklepie: co trzeba sprawdzić

Mobile-first indexing w sklepie oznacza w praktyce, że przy ocenie strony Google korzysta z wersji dostępnej dla mobilnego Googlebota. Jeśli na telefonie brakuje treści, linków, danych strukturalnych albo zasobów, problem dotyczy nie tylko wygody użytkownika, ale także tego, co wyszukiwarka może odczytać i zindeksować.

Tomasz Wierzba 12 min czytania
Mobile-first indexing w sklepie: co trzeba sprawdzić

Mobile-first indexing w sklepie: od czego zacząć kontrolę

W przypadku sklepu internetowego nie wystarczy sprawdzić, czy strona dobrze wygląda na smartfonie. Mobile-first indexing wymaga porównania tego, co Google może zobaczyć w wersji mobilnej, z tym, co znajduje się na desktopie. Dotyczy to przede wszystkim treści, linków, danych strukturalnych, metadanych, obrazów oraz zasobów potrzebnych do wyrenderowania strony.

Google korzysta z mobilnej wersji strony do indeksowania i oceny jej zawartości. Nie oznacza to, że istnieje osobny indeks mobilny. Chodzi o sposób, w jaki Google pozyskuje dane ze strony. Jeżeli sklep korzysta z responsywnego układu i serwuje ten sam HTML niezależnie od urządzenia, ryzyko rozbieżności jest mniejsze. Przy dynamicznym serwowaniu albo osobnych adresach mobilnych trzeba już dokładnie porównać obie wersje.

W sklepie kontrolę najlepiej zacząć od kilku reprezentatywnych adresów: strony głównej, kategorii, produktu oraz strony z treścią poradnikową. Jeżeli na każdej z nich mobilna wersja jest pełna, kolejne sprawdzenie można rozszerzyć na szablony i elementy wspólne dla całego serwisu.

Jak sprawdzić dostępność produktów w sklepie przydaje się szczególnie wtedy, gdy mobilna nawigacja ma mniej kategorii, filtrów lub odnośników niż wersja desktopowa. Ograniczona liczba linków może utrudniać Google odkrywanie kolejnych adresów.

Co dokładnie porównać między desktopem a mobile

Najprostsza metoda polega na stworzeniu listy elementów, które powinny występować w obu wersjach. Nie chodzi o identyczny wygląd strony. Mobilny interfejs może być zupełnie inaczej zaprojektowany. Istotne jest to, czy po zmianie układu nie zniknęły informacje potrzebne do zrozumienia strony.

W pierwszej kolejności porównaj główną treść. Na karcie produktu sprawdź nazwę, opis, parametry, informacje o zastosowaniu, dane dotyczące wariantów oraz inne elementy, które opisują produkt. Jeżeli desktop pokazuje rozbudowany opis, a mobile pozostawia tylko krótkie streszczenie, powstaje realna różnica w materiale dostępnym dla Google.

Nie trzeba jednak kopiować całego układu jeden do jednego. Treść może być na urządzeniu mobilnym umieszczona w akordeonie, zakładce albo innym elemencie interfejsu. Problem pojawia się wtedy, gdy informacja jest ładowana dopiero po interakcji użytkownika, której Googlebot nie wykonuje.

Sprawdź również nagłówki. Tytuł strony, nagłówki sekcji i nazwy najważniejszych elementów powinny przekazywać te same informacje. Jeżeli na desktopie znajduje się rozbudowana sekcja opisująca kategorię, a wersja mobilna całkowicie ją usuwa, nie traktuj tego jako zwykłej zmiany wizualnej.

Kolejny punkt to linki. Porównaj menu, breadcrumbs, linki do kategorii nadrzędnych, powiązanych produktów, podkategorii i stron informacyjnych. Jeżeli na desktopie produkt jest dostępny z kilku miejsc, a mobilna nawigacja usuwa część tych połączeń, zmienia się sposób, w jaki Google może przechodzić przez sklep.

W praktyce dobrze sprawdzić również kod HTML wyrenderowanej strony. Sam widok przeglądarki może być mylący, szczególnie gdy sklep mocno korzysta z JavaScriptu. To, co użytkownik widzi po załadowaniu strony, nie zawsze odpowiada temu, co zostało dostarczone i wyrenderowane w sposób dostępny dla Google.

Klient przy regale sprawdzający telefon trzymany jedną ręką

Wersja mobilna sklepu a treść produktów i kategorii

Najczęstszy problem w sklepach pojawia się tam, gdzie projekt mobilny został potraktowany jako skrócona wersja desktopu. Projektant usuwa długie opisy, dodatkowe sekcje, parametry albo linki, żeby ograniczyć długość strony. Dla użytkownika może to wyglądać rozsądnie. Dla indeksowania jest to już różnica, którą trzeba świadomie ocenić.

Na karcie produktu porównaj przede wszystkim opis główny. Jeżeli na komputerze użytkownik widzi pełny opis produktu, informacje techniczne, zastosowanie, instrukcję i sekcję pytań, sprawdź, czy te elementy są dostępne również na telefonie. Mogą być zwinięte, ale nie powinny zostać bez powodu usunięte.

Następnie sprawdź zdjęcia. Mobile nie powinien dostawać gorszej jakości materiałów tylko dlatego, że ekran jest mniejszy. Porównaj adresy obrazów, teksty alternatywne i sposób ich ładowania. Szczególną uwagę zwróć na zdjęcia główne oraz obrazy, które niosą informacje o produkcie.

Podobnie potraktuj filmy. Jeżeli materiał wideo jest istotnym elementem strony produktu, sprawdź jego dostępność w mobilnej wersji oraz sposób osadzenia. Google wskazuje również na znaczenie danych strukturalnych związanych z materiałami wideo.

Na stronach kategorii sprawdź opis kategorii, nagłówki, linkowanie wewnętrzne i elementy pomagające przejść do podkategorii. Filtry nie muszą być przedstawione identycznie jak na desktopie, ale nie powinny przypadkowo usuwać podstawowej architektury linków sklepu.

Jeżeli w sklepie występują bardzo rozbudowane opisy kategorii, nie chowaj całej wartościowej treści wyłącznie po to, aby skrócić mobilny ekran. Możesz zmienić sposób prezentacji. Nie zmieniaj bez potrzeby samej zawartości.

Linki i nawigacja w mobile

Linkowanie jest jednym z elementów, które łatwo przeoczyć podczas kontroli wersji mobilnej. Menu mobilne często powstaje jako osobny komponent. W efekcie desktop może zawierać odnośniki do wielu kategorii, a mobile tylko do części z nich.

Przejdź przez sklep jak robot, a nie jak klient. Weź stronę główną i sprawdź, do ilu istotnych kategorii prowadzą standardowe linki w wersji mobilnej. Następnie przejdź na kategorię i porównaj odnośniki do produktów, podkategorii oraz stron powiązanych.

Zwróć uwagę na linki tworzone przez JavaScript. Jeżeli kliknięcie elementu tylko uruchamia skrypt, a w HTML nie ma standardowego, crawlable linku, sprawdź dokładnie, jak Google interpretuje taki element. W tym miejscu pomocna będzie analiza linków JavaScript pod kątem SEO, szczególnie jeśli na mobile nawigacja została zbudowana od zera.

Sprawdź również breadcrumbs. Mobilny układ może pokazywać krótszą ścieżkę, ale nie powinien przypadkowo usuwać informacji o hierarchii strony. Przy większych sklepach jest to szczególnie istotne, ponieważ breadcrumbs pomagają zarówno użytkownikowi, jak i wyszukiwarce zrozumieć relację między stronami.

Nie ograniczaj kontroli do widocznego menu. Porównaj także linki w stopce, sekcje produktów powiązanych, linki do regulaminów, dostawy, kontaktu oraz inne odnośniki, które są częścią architektury serwisu. Nie każdy z nich ma takie samo znaczenie SEO, ale różnica między wersjami powinna być świadoma.

Telefon na statywie ustawiony nad produktem do zdjęcia

Dane strukturalne, title i meta description

Mobile-first indexing obejmuje nie tylko tekst widoczny na stronie. Jeżeli sklep wykorzystuje dane strukturalne, sprawdź, czy mobilna wersja zawiera te same informacje co desktop.

W sklepie szczególnie istotne są dane związane z produktami, breadcrumbs i filmami. Jeżeli JSON-LD znajduje się tylko w desktopowej wersji HTML, a mobile otrzymuje inny kod, Google może nie mieć dostępu do tych samych informacji podczas indeksowania.

Porównaj również adresy URL zapisane w danych strukturalnych. Przy osobnych wersjach mobilnych łatwo pozostawić stare adresy, błędne adresy desktopowe albo adresy prowadzące do innej wersji strony.

Następnie przejdź do metadanych. Title i meta description powinny być równoważne między wersjami. Nie chodzi o identyczne formatowanie kodu, ale o przekazywanie tych samych informacji o stronie.

Sprawdź także robots meta tag. Jeżeli desktop ma możliwość indeksowania i podążania za linkami, a mobile dostaje przypadkowo noindex albo nofollow, problem jest znacznie poważniejszy niż różnica wizualna.

Przy osobnych adresach mobilnych warto dodatkowo sprawdzić canonicale i relacje między wersjami. Jeżeli sklep był wielokrotnie przebudowywany, nie zakładaj, że mechanizm ustawiony przez CMS działa poprawnie na każdym szablonie. Błędy kanoniczne w sklepie wielojęzycznym są dobrym przykładem problemu, który może wymagać kontroli osobno na wersjach mobilnych i desktopowych.

JavaScript, lazy loading i zasoby strony

W nowoczesnym sklepie część zawartości jest generowana dopiero po uruchomieniu JavaScriptu. Sama obecność skryptu nie jest problemem. Problem pojawia się wtedy, gdy mobilna wersja strony uzależnia istotną treść od działania, którego Googlebot nie wykonuje.

Sprawdź przede wszystkim elementy ładowane po kliknięciu, przewinięciu, przesunięciu albo wpisaniu danych. Jeżeli dopiero wtedy pojawia się podstawowa treść produktu, opis kategorii albo istotne obrazy, nie zakładaj, że Google zobaczy dokładnie to samo co użytkownik.

Dotyczy to również lazy loadingu. Opóźnione ładowanie jest normalnym rozwiązaniem technicznym, ale podstawowa treść nie powinna być ukryta za interakcją użytkownika. Jeżeli na desktopie zdjęcia produktów są dostępne od razu, a mobile pokazuje je dopiero po ręcznym rozwinięciu galerii, trzeba sprawdzić, jak rozwiązanie zostało zaimplementowane.

Kolejny punkt to zasoby blokowane przez robots.txt. Obraz, arkusz CSS albo skrypt może mieć inny adres na urządzeniu mobilnym. Jeżeli crawler nie może pobrać zasobu, wynik renderowania może różnić się od tego, co widzi użytkownik.

Przy problemach z renderowaniem sprawdź także ciężkie skrypty. JavaScript blokujący renderowanie strony może prowadzić do sytuacji, w której mobilna wersja sklepu zachowuje się inaczej niż desktopowa, szczególnie jeśli oba warianty wykorzystują inne komponenty.

Lada sklepowa z terminalem płatniczym i telefonem obok

Jak sprawdzić mobile-first indexing w Search Console

Jeżeli zastanawiasz się, jak sprawdzić mobile-first indexing, zacznij od Google Search Console. Najbardziej praktycznym narzędziem do kontroli konkretnego adresu jest URL Inspection.

Wklej adres produktu lub kategorii i sprawdź informacje dotyczące indeksowania. Następnie uruchom test adresu na żywo. Google pozwala zobaczyć informacje o pobranej stronie, a przy teście można przejść do widoku wyrenderowanej strony i HTML.

To ważniejsze niż samo otwarcie strony w Chrome na telefonie. W przeglądarce widzisz efekt końcowy dla użytkownika. W Search Console możesz sprawdzić, jak Google pobrał i wyrenderował stronę.

Przy kontroli porównuj przede wszystkim:

  • główną treść produktu lub kategorii,
  • nagłówki i tytuł strony,
  • linki wewnętrzne,
  • obrazy i ich adresy,
  • dane strukturalne,
  • robots meta tagi,
  • zasoby potrzebne do renderowania,
  • canonical i pozostałe informacje techniczne.

Nie wyciągaj wniosku wyłącznie na podstawie jednego adresu. Jeśli sklep ma osobne szablony dla produktów, kategorii i stron informacyjnych, przetestuj przynajmniej po jednym reprezentancie każdego typu.

Tabela poniżej pozwala zrobić szybki audyt różnic przed wejściem w szczegóły techniczne.

ElementDesktopMobileCo sprawdzić
Główna treśćPełny opisPełny lub równoważny opisCzy nie usunięto istotnych informacji
NagłówkiH1, H2 i kolejneH1, H2 i kolejneCzy struktura przekazuje te same informacje
LinkiMenu, breadcrumbs, linki kontekstoweMenu, breadcrumbs, linki kontekstoweCzy ważne strony nadal są osiągalne
Dane ProductObecneObecneCzy dane są dostępne także w mobile
BreadcrumbObecnyObecnyCzy struktura i adresy są poprawne
TitleUstawionyUstawionyCzy treść metadanych jest równoważna
Meta descriptionUstawionyUstawionyCzy opis nie został przypadkowo zmieniony
Robots metaIndex/follow lub zgodna konfiguracjaTaka sama konfiguracjaCzy mobile nie ma noindex lub nofollow
ObrazyPełne materiałyPełne materiałyAdresy, alt, dostępność dla Google
WideoDostępneDostępneFormat, osadzenie i dane strukturalne
JavaScriptRenderuje treśćRenderuje treśćCzy mobile nie wymaga interakcji użytkownika
ZasobyDostępne dla GoogleDostępne dla Googlerobots.txt, CSS, JS, obrazy

Czy wersja mobilna sklepu jest indeksowana tak samo jak desktopowa?

Pytanie „czy wersja mobilna sklepu jest indeksowana” wymaga rozróżnienia dwóch sytuacji. Przy responsywnym projekcie desktop i mobile korzystają z tego samego adresu URL, a strona może zmieniać układ zależnie od szerokości ekranu. W takim przypadku nie tworzysz dwóch niezależnych stron do indeksowania.

Przy dynamicznym serwowaniu albo osobnych adresach mobilnych sytuacja jest bardziej złożona. Google może otrzymywać inny HTML zależnie od urządzenia, dlatego trzeba sprawdzić, czy mobilna odpowiedź zawiera komplet informacji potrzebnych do indeksowania.

Google używa mobilnej wersji treści do indeksowania. Dlatego pytanie nie powinno brzmieć wyłącznie „czy strona działa na telefonie?”. Lepsze pytanie brzmi: „czy Googlebot Smartphone otrzymuje wszystko, czego potrzebuje do oceny tej strony?”.

Jeżeli odpowiedź brzmi nie, poprawka powinna objąć konkretną różnicę. Nie ma sensu przebudowywać całego sklepu tylko dlatego, że wersja mobilna wygląda inaczej. Trzeba znaleźć element, którego brakuje, sprawdzić sposób jego dostarczania i ponownie przetestować adres.

Typowe problemy po przebudowie sklepu

Najwięcej różnic wychodzi przy zmianie szablonu, wdrożeniu nowej wersji mobilnej albo migracji platformy. Programista może uprościć menu, zmienić komponent produktu albo przenieść część danych do skryptu. Projekt wizualny wygląda wtedy poprawnie, ale struktura strony może się zmienić.

Jednym z problemów jest skrócenie opisów produktów i kategorii. Drugim brak części linków. Trzecim brak danych strukturalnych. Czwartym zmiana robots meta. Kolejnym ograniczenie dostępu do zasobów przez robots.txt.

Osobnej kontroli wymagają przekierowania. Jeżeli wersja desktopowa prowadzi do odpowiedniego produktu, a mobilny adres przekierowuje na stronę główną albo inną kategorię, Google może nie mieć odpowiednika właściwej strony. W takim przypadku trzeba przeanalizować mapę adresów i zachowanie serwera dla różnych urządzeń.

Jeżeli sklep ma kilka języków, wariantów produktów lub rozbudowaną strukturę kategorii, zakres testu powinien być większy. Konflikt canonical i redirectów w sklepie warto sprawdzić wtedy, gdy po wdrożeniu mobilnej wersji pojawiają się niespójne sygnały dotyczące adresu kanonicznego.

Problemy mogą dotyczyć też wydajności. Sam mobile-first indexing nie oznacza, że każda wolna strona zostanie przez to wykluczona z wyników. W praktyce jednak bardzo ciężki JavaScript, problemy z renderowaniem albo niedostępne zasoby mogą utrudniać prawidłowe odczytanie strony. Dlatego kontrolę indeksowania dobrze połączyć z analizą techniczną sklepu.

Prosty audyt mobile SEO dla sklepu internetowego

Jeżeli chcesz wykonać kontrolę bez angażowania programisty od pierwszej minuty, zacznij od najważniejszych typów stron. Wybierz stronę główną, reprezentatywną kategorię, produkt, stronę informacyjną i, jeśli występuje, stronę wariantu produktu.

Otwórz wersję desktopową i mobilną. Porównaj treść, nagłówki, linki, obrazy, dane strukturalne i metadane. Następnie użyj Search Console, aby sprawdzić konkretny adres z perspektywy Google.

Jeżeli znajdziesz różnicę, zapisz ją w prostym zestawieniu: adres, element desktopowy, element mobilny, potencjalny skutek i sposób naprawy. Dzięki temu nie skończysz z ogólnym wnioskiem „mobile ma problemy”, tylko z listą konkretnych zmian.

Przy większym sklepie nie sprawdzaj ręcznie każdej karty produktu. Najpierw znajdź różnice w szablonach. Jeżeli wszystkie produkty korzystają z jednego komponentu, problem znaleziony na jednej karcie może dotyczyć całej grupy adresów.

Tak samo postępuj z kategoriami. Jeden szablon kategorii, jeden szablon produktu i jeden szablon strony informacyjnej często pozwalają znaleźć problemy wspólne dla wielu adresów. Dopiero później sprawdzaj wyjątki.

Jeżeli po zmianach sklep nadal ma niejasne problemy z indeksowaniem, można połączyć kontrolę mobile z pełniejszym audytem technicznym. Audyt sklepu internetowego i kontrola techniczna SEO pozwala uporządkować takie problemy według konkretnych adresów i elementów wymagających poprawy.

Mobile SEO a sklep internetowy: co sprawdzić przed wdrożeniem zmian

Przed publikacją nowego szablonu sprawdź mobilną wersję na środowisku testowym, jeśli jest dostępne. Nie ograniczaj testu do wyglądu. Porównaj HTML, treść, linki, metadane i dane strukturalne.

Po wdrożeniu ponownie przetestuj kilka reprezentatywnych adresów w Search Console. Jeżeli zmiana dotyczy całego szablonu, nie czekaj z kontrolą do momentu, w którym pojawi się spadek widoczności. Sprawdź od razu strony, które zostały objęte zmianą.

Mobile SEO w sklepie internetowym to również kwestia utrzymania. Każda większa zmiana menu, filtrów, kart produktu, systemu rekomendacji, lazy loadingu albo JavaScriptu może zmienić zawartość dostępną w mobile. Dlatego kontrola nie powinna być jednorazowym zadaniem wykonywanym tylko podczas migracji.

Najprostsza zasada jest praktyczna: jeżeli informacja jest potrzebna do zrozumienia strony, sprawdź, czy Google może ją zobaczyć również w mobilnej wersji. Jeżeli link jest potrzebny do przejścia do istotnej części sklepu, sprawdź jego obecność i sposób implementacji. Jeżeli dane strukturalne opisują produkt, breadcrumbs albo wideo, sprawdź ich obecność w mobile. Jeżeli element jest ładowany przez JavaScript, sprawdź wyrenderowany wynik zamiast zakładać, że sam kod źródłowy wystarczy.

Właśnie tak należy podejść do mobile-first indexing w sklepie: nie jako do osobnej wersji SEO, lecz jako do kontroli tego, jakie informacje faktycznie otrzymuje Googlebot Smartphone. Gdy mobilny HTML jest uboższy od desktopowego, trzeba znaleźć konkretną różnicę i usunąć ją tam, gdzie powstaje.

Najczęstsze pytania

Jak sprawdzić mobile-first indexing w sklepie internetowym?

Zacznij od Google Search Console i narzędzia URL Inspection. Sprawdź reprezentatywne adresy produktów, kategorii i stron informacyjnych, a następnie porównaj wersję mobilną z desktopową pod kątem treści, linków, danych strukturalnych, metadanych i dostępności zasobów.

Czy wersja mobilna sklepu jest indeksowana zamiast wersji desktopowej?

Google korzysta z mobilnej wersji treści do indeksowania w ramach mobile-first indexing. Nie oznacza to istnienia osobnego indeksu mobilnego. Przy responsywnym sklepie desktop i mobile zwykle korzystają z tego samego adresu, ale przy różnych odpowiedziach HTML trzeba kontrolować ich zawartość.

Czy opis produktu może być krótszy na telefonie?

Układ mobilny może być inny, a treść może być umieszczona na przykład w akordeonie lub zakładce. Nie powinno się jednak usuwać istotnej zawartości tylko dlatego, że jest ona niewygodna do pokazania na małym ekranie. Sprawdź, czy Google może ją zobaczyć bez wymagania interakcji użytkownika.

Czy dane strukturalne muszą być dostępne w mobilnej wersji sklepu?

Tak. Jeżeli sklep korzysta z danych strukturalnych, sprawdź ich obecność także w mobilnej wersji strony. Szczególną uwagę zwróć na Product, Breadcrumb oraz VideoObject, a także na poprawność adresów URL zapisanych w danych.

Co najczęściej powoduje różnice między desktopem a mobile?

Typowe źródła problemów to skrócone opisy, usunięte linki, brak danych strukturalnych, inne robots meta tagi, niedostępne zasoby, błędny lazy loading, treść zależna od interakcji użytkownika oraz przekierowania przygotowane tylko dla jednej wersji strony.

Źródła

  1. Mobile site and mobile-first indexing best practices · Google for Developers
  2. Mobile-First indexing, structured data, images, and your site · Google for Developers
  3. Announcing mobile-first indexing for the whole web · Google for Developers
  4. Inspect and troubleshoot a single page · Google Search Console Help
  5. View the rendered source for a page · Google Search Console Help
mobile SEOmobile-first indexingSEO sklepu internetowegoGooglebot SmartphoneGoogle Search Consoleindeksowanie mobilne

Zacznijmy od tego, co naprawdę hamuje Twoją sprzedaż

Napisz krótko, czym się zajmujesz i co Cię gryzie. Odpiszę osobiście, bez automatów i bez nacisku na sprzedaż.

WhatsApp