Typowe błędy

Na tej stronie opisaliśmy typowe błędy webmasterów podczas projektowania treści dostosowanych do urządzeń mobilnych.

Zablokowane pliki JavaScript, CSS i pliki obrazów

W celu zapewnienia optymalnego renderowania i indeksowania stron zawsze umożliwiaj Googlebotowi dostęp do plików JavaScript, CSS oraz plików obrazów, których używa Twoja witryna, by mógł widzieć ją tak, jak widzi ją użytkownik. Jeśli plik robots.txt Twojej witryny blokuje indeksowanie tych zasobów, bezpośrednio obniża to jakość renderowania i indeksowania jej zawartości przez nasze algorytmy. Może to doprowadzić do uzyskania przez witrynę gorszej pozycji w rankingu.

  1. Użyj narzędzia Pobierz jako Google w Google Search Console, by upewnić się, że Googlebot może indeksować pliki JavaScript, CSS oraz pliki obrazów. Pokazuje ono, jak Googlebot rozpoznaje i renderuje treść Twojej witryny, a także pomaga zidentyfikować i rozwiązać problemy z indeksowaniem stron Twojej witryny.

  2. Sprawdź i przetestuj plik robots.txt w Google Search Console.

  3. Przetestuj swoje strony mobilne za pomocą testu optymalizacji mobilnej, by zobaczyć, czy nasze systemy identyfikują Twoją witrynę jako kompatybilną z urządzeniami tego typu.

  4. Jeśli używasz osobnych adresów URL w przypadku stron mobilnych, pamiętaj, by przetestować zarówno adresy URL przeznaczone dla wersji mobilnej, jak i na komputery. Upewnisz się w ten sposób, że przekierowanie jest rozpoznawane i umożliwia indeksowanie.

Zawartość, której nie można odtworzyć

Niektórych typów filmów i materiałów nie da się odtworzyć na urządzeniach mobilnych. Dotyczy to materiałów licencjonowanych lub wymagających Flasha albo innych odtwarzaczy, które nie zawsze są obsługiwane przez takie urządzenia. Zawartość witryny, której nie można odtworzyć, może bardzo irytować użytkowników.

Użytkownikom odwiedzającym stronę z zawartością nieobsługiwaną przez urządzenie mobilne wyświetli się komunikat błędu podobny do pokazanego poniżej:

Filmy, których nie da się odtworzyć

To bardzo obniża komfort obsługi strony na urządzeniu mobilnym.

Zamiast korzystać z firmowego odtwarzacza wideo lub umieszczać zawartość w nieobsługiwanych formatach, do zamieszczania filmów i animacji stosuj tagi w standardzie HTML5.

W przypadku zawartości animowanej renderowanej za pomocą Flasha lub innych odtwarzaczy multimedialnych rozważ użycie animacji w standardzie HTML5 obsługiwanym przez wszystkie przeglądarki internetowe. Tworzenie takich animacji w standardzie HTML5 ułatwia Google Web Designer.

  • Używaj animacji w standardzie HTML5, by zapewnić ich wyświetlanie wszystkim użytkownikom.
  • Filmy osadzaj na stronach w sposób umożliwiający ich odtwarzanie na wszystkich urządzeniach.
  • Pomyśl o transkrypcji filmów w postaci dostępnej dla wszystkich rodzajów urządzeń. Dzięki niej Twoja witryna będzie dostępna dla osób, które korzystają z technologii wspomagających przeglądanie lub używają przeglądarek, które nie odtwarzają licencjonowanych formatów.

Więcej informacji zawiera artykuł opisujący sprawdzone metody publikowania filmów na stronie Podstawy pracy w sieci.

Błędne przekierowania

Jeśli używasz osobnych adresów URL dla stron mobilnych, musisz przekierować użytkowników z każdego adresu w wersji na komputery do jego odpowiednika w wersji mobilnej. Przeniesienie na inne strony (np. zawsze na stronę główną) nie jest dobrym rozwiązaniem.

Przykłady:

  • Serwer Twojej witryny w wersji na komputery jest tak skonfigurowany, że przekierowuje użytkowników mobilnych na stronę główną przygotowanej dla nich wersji witryny. Robi to niezależnie od tego, który adres URL wybiera użytkownik, i tego, że wersja mobilna ma odpowiednik strony na komputery, z której następuje przekierowanie.
  • Adresy URL Twojej witryny na komputery są generowane dynamicznie za pomocą parametrów adresów URL sprawiających problemy podczas mapowania na mobilną wersję adresu URL. Na przykład użytkownik poszukujący na komputerze rozkładu jazdy pociągów w określony dzień będzie się irytować, jeśli będzie ciągle przekierowywany do strony ogólnej rozkładu jazdy w wersji mobilnej. W przypadku posiadania odpowiednika strony na urządzenia mobilne zalecamy prawidłowe skonfigurowanie przekierowania, by użytkownicy trafiali na stronę, która ich interesuje.

  • Strona na komputery przekierowuje tylko niektóre urządzenia mobilne. Na przykład witryna może przekierowywać do witryn na urządzenia mobilne tylko użytkowników Androida, a nie użytkowników iPhone'a czy telefonów Windows Phone.

  • Użyj Google Search Console. Jeśli jesteś zweryfikowanym użytkownikiem, powiadomimy Cię, jeśli wykryjemy, gdy którakolwiek ze stron Twojej witryny będzie przekierowywać użytkowników smartfonów do strony głównej. W sekcji Błędy indeksowania na potrzeby smartfonów w Search Console wskażemy Ci również wszelkie wykryte błędne przekierowania. Jako punkt wyjścia do naprawienia błędu w miejscu jego wystąpienia w konfiguracji serwera pobierz przygotowane przez nas przykładowe adresy URL w Search Console.

  • Skonfiguruj serwer tak, by przekierowywał użytkowników smartfonów do odpowiedniego mobilnego adresu URL.

  • Jeśli strona Twojej witryny nie ma odpowiednika na smartfony, lepiej pozostawić użytkowników na stronie dla komputerów, niż przekierowywać ich na stronę główną w wersji na smartfony. W tym przypadku lepiej jest nic nie zrobić, niż zrobić coś źle.

  • Spróbuj elastycznego projektowania witryn, które umożliwia wyświetlanie tych samych treści na komputerach i smartfonach.

Błędy 404 wyświetlane tylko na urządzeniach mobilnych

Niektóre witryny serwują swoją zawartość użytkownikom komputerów wybierającym dany adres URL, ale użytkownikom urządzeń mobilnych wyświetlają stronę błędu.

Błędy 404 wyświetlane tylko na urządzeniach mobilnych

Jeśli zauważysz, że użytkownicy odwiedzają wersję na komputery z poziomu urządzeń mobilnych, a posiadasz jej odpowiednik dla urządzeń mobilnych pod innym adresem URL, zamiast wyświetlać błąd 404 lub pozorny błąd 404 przekieruj ich pod ten adres – umożliwi to najlepszą możliwą obsługę strony. Upewnij się też, że strona w wersji na urządzenia mobilne nie zwraca kodu błędu.

Prawidłowe przekierowania
  • Użyj Google Search Console. Jeśli jesteś zweryfikowanym użytkownikiem witryny, zobaczysz od nas powiadomienie w Centrum wiadomości.

  • Jeśli Twoja witryna w wersji na smartfony korzysta z osobnego adresu URL, skonfiguruj serwer tak, by przekierowywał użytkowników smartfonów do odpowiedniego adresu URL witryny w wersji na smartfony.

  • W przypadku serwowania dynamicznego zadbaj o poprawność wykrywania klientów użytkownika.

  • Jeśli strona Twojej witryny nie ma odpowiednika w wersji na smartfony, zatrzymaj użytkowników na stronie w wersji na komputery. Wyświetlenie poszukiwanych przez użytkownika treści jest o wiele lepszym rozwiązaniem, niż wyświetlenie strony błędu.

  • Jeśli to możliwe, używaj elastycznego projektowania witryn. Taka konfiguracja umożliwia serwowanie użytkownikom tej samej treści niezależnie od używanego urządzenia.

  • Sprawdź raport Błędy indeksowania w Google Search Console; karta Smartfony będzie zawierać listę wykrytych adresów URL, które wyświetlają błędy 404 tylko użytkownikom smartfonów.

Unikanie stosowania reklam pełnoekranowych

W wielu witrynach wyświetlają się reklamy pełnoekranowe lub nakładki, które częściowo lub całkowicie zasłaniają zawartość strony odwiedzanej przez użytkownika. Reklamy pełnoekranowe, które promują produkty lub aplikację natywną witryny i zachęcają do zapisania się na listę adresową, często utrudniają przeglądanie witryn na urządzeniach mobilnych. W skrajnych przypadkach reklamy pełnoekranowe są zaprojektowane tak, by znacznie utrudnić użytkownikowi ich zamknięcie i wyświetlenie właściwej zawartości strony. Miejsce na ekranie urządzeń mobilnych jest ograniczone, dlatego każda reklama pełnoekranowa obniża komfort przeglądania witryny przez użytkownika.

Pełnoekranowe reklamy aplikacji do pobrania

Wielu webmasterów promuje aplikacje natywne swoich firm gościom witryny w wersji na urządzenia mobilne. Jeśli nie robią tego wystarczająco ostrożnie, mogą wystąpić problemy z indeksowaniem utrudniające korzystanie z witryny.

Unikanie stosowania reklam pełnoekranowych
Reklama pełnoekranowa przeszkadza użytkownikowi w wykonywaniu zadań.
Baner aplikacji
Baner pozwala użytkownikom wykonywać zadania podczas prezentacji aplikacji.
  • Użyj prostego, wbudowanego w treść strony banera do promowania swojej aplikacji. Sposoby zaimplementowania takich banerów:

    • baner obsługiwany przez przeglądarkę, na przykład banery aplikacji mobilnych w przeglądarce Safari lub banery aplikacji natywnych w przeglądarce Chrome,
    • baner lub obraz HTML, jak w przypadku typowej, niewielkiej reklamy z linkiem do sklepu, z którego można pobrać aplikację.
  • Jeśli masz aplikację na Androida, rozważ skorzystanie z indeksowania aplikacji: gdy zaindeksowane treści z Twojej aplikacji odpowiadają określonemu zapytaniu, w wynikach wyszukiwania wyświetli się przycisk instalacji, dzięki czemu użytkownicy będą mogli pobrać aplikację i przejść bezpośrednio do jej konkretnej strony.

Powszechną praktyką w przypadku serwowania przez witrynę osobnych mobilnych adresów URL jest stosowanie linków do wersji komputerowej i odwrotnie – linku ze strony komputerowej do strony mobilnej. Częstym błędem jest stosowanie linków wskazujących na nieodpowiednią stronę, na przykład linków na stronach mobilnych wskazujących na stronę główną w wersji komputerowej.

  • Sprawdź linki, by się upewnić, że przenoszą użytkownika na poprawny odpowiednik strony.

Powolne działanie stron mobilnych

Zapewnienie krótkiego czasu wczytywania witryny jest szczególnie ważne. Zbyt długi czas oczekiwania na wyświetlenie zawartości witryny może irytować użytkownika.

Użyj narzędzia Google PageSpeed Insights i sprawdź, czy na stronach Twojej witryny występują błędy, które spowalniają jej działanie. Kluczowe informacje znajdziesz w podsekcji „Szybkość działania strony”. Spróbuj rozwiązać problemy oznaczone jako „Należy poprawić:”.

Więcej informacji:

Poprawnie ustaw widoczny obszar

Ponieważ goście Twojej witryny korzystają z różnych urządzeń o ekranach różnych rozmiarów, określ widoczny obszar na Twoich stronach za pomocą metatagu viewport. Ten tag informuje przeglądarki o sposobie dostosowania rozmiaru strony oraz jej skalowaniu pod kątem dopasowania do urządzenia. Poniżej opisujemy dwa najczęstsze problemy:

  • Korzystanie z widocznych obszarów o stałej szerokości Powoduje to nieprawidłowe skalowanie strony do urządzeń różnych rozmiarów (a jest ich sporo). Więcej informacji
  • Założenie nierealnej szerokości minimalnego widocznego obszaru, co zmusza internautów korzystających z małych urządzeń do przewijania strony w poziomie, by przeczytać jej treść. Dzieje się tak, gdy strony korzystają z wartości bezwzględnych w deklaracjach CSS lub korzystają z obrazów zaprojektowanych pod kątem określonych szerokości przeglądarek (np. 980 pikseli). Aby rozwiązać ten problem, upewnij się, że strony korzystają z wartości względnych szerokości oraz pozycji elementów CSS i dopilnuj, by obrazy również się skalowały. Więcej informacji

Mały rozmiar czcionki

Nie stosuj zbyt małej czcionki, która jest po prostu nieczytelna i wymaga powiększania widoku strony w celu przeczytania jej treści. Po określeniu obszaru widocznego swoich stron internetowych ustaw odpowiednie skalowanie czcionek wyświetlanego w nim tekstu. Sprawdzone metody postępowania z czcionkami opisuje artykuł Używaj czytelnych rozmiarów czcionek.

Elementy dotykowe zbyt blisko siebie

Nie umieszczaj elementów dotykowych, takich jak przyciski czy linki, bardzo blisko siebie – użytkownik mobilny będzie miał wtedy trudności z dotknięciem palcem wybranego elementu bez dotykania elementu sąsiadującego. Aby naprawić te błędy, ustaw odpowiedni rozmiar i odstępy między przyciskami oraz linkami nawigacyjnymi, mając na uwadze ich obsługę z poziomu urządzeń mobilnych. Więcej informacji zawiera artykuł Dobierz odpowiedni rozmiar elementów dotykowych.

Wyślij opinię na temat...