Sprawdzanie mobilnej wersji Yandex. Sprawdzam optymalizację pod kątem urządzeń mobilnych. Konsola wyszukiwania Google. Elementy interaktywne są zbyt blisko
W bieżącym artykule porozmawiamy o tym, jak przeprowadzana jest weryfikacja wersja mobilna stronie, jej wygodzie, czytelności i poprawnym wyświetlaniu.
Sprawdzanie witryny pod kątem łatwości wyświetlania urządzenia mobilne ach możesz sprawdzić z różne usługi internetowe. W szczególności, ten serwis od Google umożliwia odpowiednią ocenę umiejętności korzystania z układu mobilnego.
Niedawno Google stwierdził, że witryny, które nie spełniają wymagań układu mobilnego, będą pesymizowane w wyszukiwaniach przeprowadzanych za pomocą urządzeń mobilnych. Ten algorytm już działa, a niektóre witryny, którym nie zależało na wyświetlaniu na platformach mobilnych, zostały rzeczywiście pominięte wyniki wyszukiwania dla urządzeń mobilnych.
Jeśli Twoja witryna jest trzykrotnie wygodna dla platform stacjonarnych, musisz sprawdzić jakość układu mobilnego, w przeciwnym razie stracisz imponującą część ruchu (udział platform mobilnych w wyszukiwaniu rośnie z roku na rok), co oznacza, że straci swoich klientów. Dlatego musisz dostosować swoje witryny do urządzeń mobilnych i sprawdzić poprawność wyświetlania witryn w przeglądarkach mobilnych.
Sprawdzanie jakości układu mobilnego za pomocą Google Chrome
Dla programistów Google ma świetne narzędzie do symulacji urządzeń mobilnych. To narzędzie jest wbudowane w przeglądarkę Google Chrome. Aby uzyskać do niego dostęp, naciśnij F12 w przeglądarce (przełącz w tryb programisty) i kliknij ikonę smartfona:
Strona zostanie przekonwertowana na tryb przełączania urządzeń, w którym można wybrać jedno z popularnych urządzeń mobilnych, typ sieci (GPRS, 2G, 3G, 4G itp.), określić ścisłe ustawienia wyświetlania. Pozwala to na symulację pracy serwisu na konkretnych urządzeniach mobilnych. Dostępne urządzenia obejmują różne wersje iPada, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy i kilka innych popularnych urządzeń.
Wybierając konkretne urządzenie, możesz sprawdzić witrynę na urządzeniu mobilnym. Na przykład wyświetlanie strony głównej serwisu „Nubex” na iPadzie 3:
A na Samsungu Galaxy S4:
Tutaj możesz nie tylko zobaczyć wyświetlanie witryny na konkretnym urządzeniu, ale także w pełni pracować z witryną, tak jakbyś miał przed sobą odpowiedni gadżet. Niewątpliwie narzędzie to jest po prostu niezbędne przy tworzeniu mobilnej wersji strony, ale w jaki sposób Twoja strona będzie się wyświetlać na prawdziwe urządzenia- muszą być przetestowane na prawdziwych urządzeniach. Jest to szczególnie ważne, jeśli chcesz sprawdzić wyświetlanie strony w „natywnych” przeglądarkach (Safari – dla iPad/iPhone, IE – dla Telefon Windows itp.).
Wersje witryny to nie tylko ewentualny kaprys programistów, dodatkowy wydatek (lub zarobki, jeśli mówimy o wykonawcach) i przejaw troski o odwiedzających zasoby. Zgodnie z najnowszymi zapowiedziami Google witryny, które nie spełniają wymagań dotyczących projektowania responsywnego, będą pesymizowane w wyszukiwarkach mobilnych. Krajowa wyszukiwarka Yandex wydała również zalecenia „Znaczenie bycia mobilnym” i zapewniła, że działając dla wygody użytkowników urządzeń mobilnych, będzie oznaczać wersje mobilne w wynikach wyszukiwania i preferować strony adaptacyjne.
Dlatego programiści muszą koniecznie dostosować witryny do smartfonów i sprawdzić poprawność wyświetlania zasobu. W przeciwnym razie wkrótce można spodziewać się utraty znacznej części ruchu, a co za tym idzie potencjalnych klientów, ponieważ nowe algorytmy pracy od Google i Yandex już działają. Możesz sprawdzić mobilną wersję strony różne sposoby: Zmiana przeglądarki podczas przełączania do trybu programisty, korzystania z emulatorów urządzeń mobilnych lub usług internetowych.
Przyjazność witryny dla urządzeń mobilnych
Możliwość dostosowania do urządzeń mobilnych jest oceniana przez różne parametry. Ważne jest, aby sprawdzić mobilną wersję strony nie tylko pod kątem prawidłowego wyświetlania, warto wziąć pod uwagę inne czynniki:
- brak animacji, "ciężki" design i zdjęcia;
- szybkość ładowania zasobów (powinna być minimalna);
- brak konieczności przewijania w poziomie;
- brak wtyczek Silverlight i apletów Java;
- prosta nawigacja w witrynie;
- Metatag okna roboczego jest zapisany w kodzie.
Jeżeli te warunki są spełnione, algorytmy najpopularniejszych wyszukiwarek rozpoznają stronę internetową jako odpowiednią dla urządzeń mobilnych i zwiększają pozycję strony w wynikach wyszukiwania w stosunku do zasobów, które nie są przystosowane.
Prawdziwe testowanie na urządzeniach mobilnych
Najwygodniej jest przetestować mobilną wersję strony na prawdziwych smartfonach. Ta metoda pozwoli na testowanie w rzeczywistych warunkach. Najlepiej byłoby sprawdzić zasób sieciowy na kilku urządzeniach, ale jeśli budżet projektu nie obejmuje kosztów zakupu kilku smartfonów najpopularniejszych modeli, urządzenie na Oparty na Androidzie lub Apple.
Zmiana rozmiaru okna przeglądarki
Najprostszym, ale nie optymalnym pod względem weryfikacji, jest zmiana rozmiaru okna przeglądarki. Jeśli strona jest wykonana przy użyciu technologii, możesz w ten sposób sprawdzić mobilną wersję serwisu. Ale w przypadkach, w których stosuje się oddzielny projekt, zasób wymaga wyraźnego wskazania, że użytkownik pochodzi ze smartfona, tabletu lub innego urządzenia mobilnego. Więc, tą drogą umożliwia sprawdzenie dostępności mobilnej wersji serwisu. Ale poprawność wyświetlania (pod względem technicznym) raczej nie zostanie oceniona.
Przełączanie w tryb programisty w przeglądarce
Bardziej optymalnym sposobem sprawdzenia mobilnej wersji witryny (Google lub Yandex, a także inne wyszukiwarki podkreślają adaptacyjność na liście najważniejszych czynników wpływających na ranking) jest przejście w tryb programisty w przeglądarce. Metoda działa podobnie w wielu przeglądarkach:
- Mozilla: możesz przejść do trybu programisty, wybierając opcję „Projekt responsywny” w menu „Rozwój”; naciskając kombinację Ctrl + Shift + M; klikając przycisk „Tryb projektowania responsywnego” na pasku narzędzi programisty;
- Chrome: przejdź do trybu mobilnego, naciskając F12, a następnie wybierz ikonę wersji mobilnej (smartfon w lewym górnym rogu wyświetlonego okna).
W Operze przejście do trybu programisty w celu sprawdzenia wersji mobilnej odbywa się poprzez naciśnięcie kombinacji Ctrl + Shift + i, ale jest inny sposób. Specjalna wersja przeglądarki - Opera Mobile Classic Emulator - pozwala kompleksowo ocenić projekt mobilny. Wersje programu istnieją dla głównych systemów operacyjnych.
Emulatory urządzeń mobilnych: Android Studio i Apple Xcode
Możesz sprawdzić mobilną wersję strony ("Yandex" i Google) za pomocą emulatorów urządzeń mobilnych, które dla Androida i Apple to odpowiednio Android Studio lub Apple Xcode.
Takie narzędzia dość dokładnie odwzorowują stronę tak, jak będzie wyglądać na urządzeniach mobilnych: w programach preinstalowane są najpopularniejsze wersje przeglądarek dla urządzeń mobilnych. Emulatory nie uwzględniają jednak szybkości pobierania i kilku innych niuansów, które można zaobserwować w rzeczywistych warunkach.
Aby to sprawdzić, po prostu zainstaluj jeden z powyższych programów na swoim komputerze i otwórz witrynę z emulatora.
Usługi internetowe do walidacji projektów mobilnych
Jest więcej proste sposoby sprawdź mobilną wersję strony. Na przykład usługa internetowa Responsinator pozwala ocenić poprawność wyświetlania zasobu na urządzeniach mobilnych oraz łatwość korzystania z serwisu przez użytkownika. Zasób wyświetla witrynę tak, jak wyglądałaby na szóstej różne urządzenia oparty na systemie Android lub Apple i w wielu orientacjach.
Sprawdzanie optymalizacji stron internetowych dla urządzeń mobilnych
Inne zasoby, które pozwalają sprawdzić mobilną wersję strony dodatkowo oceniają adaptacyjność, a nie tylko pokazują jak strona będzie wyglądać na różnych urządzeniach. Najbardziej autorytatywne usługi: Google Mobile Friendly i „Yandex Webmaster” (sprawdzanie stron internetowych). Kontroler Bing lub na przykład Mobile Checker z W3C również oceniają optymalizację witryny pod kątem urządzeń mobilnych.
Jedyne, co jest wymagane od webmastera przy ocenie wersji serwisu dla urządzeń mobilnych korzystających z usług online, to wpisanie adresu zasobu i poczekanie na zakończenie analizy. Większość z powyższych usług sprawdza optymalizację pod kątem parametrów dostosowania do urządzeń mobilnych wymienionych powyżej.
Istnieje więc kilka sposobów oceny zdolności adaptacyjnych zasobu internetowego: od testowania na prawdziwych smartfonach, tabletach lub innych urządzeniach mobilnych, zmiany rozmiaru okna przeglądarki internetowej, sprawdzania w emulatorach lub w trybie programisty przeglądarki internetowej, a kończąc na korzystaniu z usług firmy Yandex i Google. Bardzo łatwo jest kompleksowo sprawdzić mobilną wersję strony, a to pozwoli na dokonanie niezbędnych zmian i poprawienie pozycji strony w wynikach wyszukiwania.
Ech, znowu Google „zadowoli” nas swoimi regułami i algorytmami, wymyślając nowe „migreny” dla webmasterów. Tym razem proponujemy wypróbowanie nowego algorytmu przyjaznego dla urządzeń mobilnych, który zwiększy przystosowane witryny w wyszukiwarce mobilnej i zmniejszy zasoby „niemobilne”.
Jak to wszystko będzie działać?
Bardzo proste: wszystkie strony, które nie są przystosowane do urządzeń mobilnych (według Google) zostaną po prostu zignorowane wyszukiwarka i wyróżnij się w wyszukiwarce mobilnej na ostatnich miejscach, a zasoby mobilne wzrosną wyżej. Na przykład, jeśli istnieje wiele witryn podobne tematy, wówczas na tablecie użytkownik znajdzie te, które mają projekt dostosowany do przeglądania na urządzeniach mobilnych.
Moje wrażenia z tej innowacji są dwojakie: z jednej strony wszystko się zgadza, jeśli korzystam z wyszukiwania na tablecie lub smartfonie, to chcę zobaczyć te witryny, które zachowują się poprawnie na ekranie w wynikach wyszukiwania. Z drugiej strony algorytm wyznaczania „mobilności” jest tak dziwny, że każe się zastanowić nad słusznością takiego „know-how”. Oczywiście sprawdziłem moje strony pod kątem rekomendacji i znalazłem dziwne, delikatnie mówiąc, zachowanie Google w odniesieniu do analizy zasobów.
Warto powiedzieć, że zawsze przy tworzeniu stron sprawdzałem wygląd zewnętrzny na różnych urządzeniach ręcznie i przez usługi, więc byłem spokojny o „mobilność”, ale okazało się, że nie jest to takie proste. Dlatego Google zaleca sprawdzenie zasobów za pomocą testu przyjaznego dla urządzeń mobilnych:
Wystarczy wpisać adres witryny lub strony i kliknąć „Analizuj”. Sprawdzając podczas testu stronę główną witryny mojego krymskiego przyjaciela krimeo.ru, zauważyłem, że strona została zoptymalizowana pod kątem urządzeń mobilnych.
Nic dziwnego, że szablon jest responsywny, a strona świetnie się prezentuje różne urządzenia. Potem postanowiłem sprawdzić swoją stronę i jakie było moje zdziwienie, gdy ten zasób nie przeszedł testu.
Ciekawe... szablon tego bloga jest również responsywny, wielokrotnie logowałem się na tablecie i smartfonie... dlaczego wtedy Google się nie podobało?
Zacząłem analizować, co dokładnie na stronie mogło wywołać taki wynik. Rozwiązanie zostało znalezione tam, gdzie najmniej się tego spodziewałem: na mojej stronie miniatury artykułów były wyświetlane w prostokącie 720x350px, a to (według Google) nie czyni strony uważanej za mobilną. Zaskakująco, co? więcej zdjęć(przyciski) – tym łatwiej użytkownikom mobilnym trafić palcem… ale Google uważa inaczej.
Zaskakujące jest również to, że podczas przeglądania strony na smartfonie wszystkie obrazy idealnie dopasowują się do rozmiaru ekranu i nie obserwuje się żadnych „zakleszczeń”. Otóż postanowiłem przeprowadzić eksperyment i dostosowałem wielkość zdjęć, tj. im mniejszy rozmiar ekranu urządzenia, tym mniejszy obraz na stronie. Spróbuj chwycić myszą róg przeglądarki i pomniejsz ją..
Teraz niektórzy webmasterzy mogą mieć kolejny problem: jeśli Google zachował się w ten sposób z miniaturami duży rozmiar, wtedy podobnie będzie z ilustracjami do artykułów, a to jest o wiele ważniejsze niż Strona główna. Aby to zrobić, musisz dostosować obrazy dla całej witryny, uruchamiając skrypt js, ale to nie wszystko, folder pamięci podręcznej i reguła zapisywania obrazów powinny zostać zduplikowane w .htaccess
Zgadza się – te artykuły, które zawierają duże zdjęcia nie zdają testu Google, a te materiały, które nie mają bardzo dużych ilustracji są uważane za w pełni „zoptymalizowane pod kątem urządzeń mobilnych”. Zrzutów ekranu nie będę dostarczał - wystarczy wziąć adres URL osobnej publikacji i sprawdzić "mobilność".
Dlaczego Googlebot widzi, że blog nie jest zoptymalizowany pod kątem urządzeń mobilnych?
Ponieważ w robots.txt jest wiele niepotrzebnych ograniczeń.
W automatycznie generowanym WordPressie wirtualny plik robots.txt ma tylko jeden zakaz:
Nie zezwalaj: /wp-admin
A oto, co pisze Google o tym, dlaczego twórcy WordPressa ustawili robots.txt jako domyślny:
Aby mieć pewność, że Twoje strony są prawidłowo indeksowane i wyświetlane, musisz przyznać Googlebotowi dostęp do plików JavaScript, CSS i graficznych w Twojej witrynie. Googlebot powinien widzieć Twoją witrynę jako zwykły użytkownik. Jeśli dostęp do tych zasobów zostanie zablokowany w pliku robots.txt, to Google nie będzie w stanie poprawnie analizować i indeksować treści. Może to pogorszyć pozycję Twojej witryny w wyszukiwarce.
User-agent: * Disallow: /wp-admin Disallow: /wp-includes Disallow: /wp-content/plugins Host: TwojaWitryna Mapa witryny: http://TwojaWitryna/sitemap_index.xml (Mapa witryny przez WordPress SEO przez Yoast) Agent użytkownika : Googlebot-Image Allow: /wp-content/uploads/ User-agent: YandexImages Allow: /wp-content/uploads/
Mam nadzieję, że Google poprawi swój algorytm weryfikacji i da realne wyniki, bo wiele stron wygląda świetnie „w realu” na tabletach i smartfonach.
Taką niespodziankę w postaci algorytmu przyjaznego dla urządzeń mobilnych widzimy od 21 kwietnia 2015 roku. Google nas „psuje”)). Żyjesz spokojnie? Proszę, Panda! Mało? Nate też Pingwin! odszedł? Bądź przyjazny dla urządzeń mobilnych!
Wniosek
Zdecyduj sam, co zrobić z tymi informacjami, czy przejść na projekty adaptacyjne, czy nie, to osobista sprawa każdego webmastera, ale te nowe zasady już weszły w życie.
Nawiasem mówiąc, nie tylko adaptacyjny projekt witryny jest uważany za „zoptymalizowany pod kątem urządzeń mobilnych”, odpowiednia jest również oddzielna wersja mobilna i wtyczka do WordPressa, najważniejsze jest to, że witryna wygląda poprawnie na każdym urządzeniu. Weź to pod uwagę.
W przypadku swoich projektów prawdopodobnie już dawno zauważyłeś, że liczba użytkownicy mobilni stale się rozwija. Dla niektórych trend jest mniej zauważalny, aw przypadku niektórych projektów liczba ta wzrasta co roku 2 razy lub więcej. Według LiveInternet ponad 50% ruchu w rosyjskim Internecie pochodzi obecnie z urządzeń mobilnych. Nawiasem mówiąc, wielu czytelników tego bloga od dawna narzeka, że nie ma wersji mobilnej 🙂, która oczywiście zostanie naprawiona w najbliższej przyszłości.
Ten fakt mobilizacji nie może być ignorowany również przez platformy wyszukiwania. Stopniowo dają korzyści w wyszukiwarce mobilnej tym witrynom, które są dostosowane do urządzeń użytkowników.
Początkowo Google oznaczało witryny we fragmentach, że będą poprawnie wyświetlane na telefonach komórkowych.
Google stworzyło również narzędzie, które pomaga webmasterom sprawdzić poprawność wyświetlania witryny na urządzeniach mobilnych:
https://www.google.com/webmasters/tools/mobile-friendly/
21 kwietnia Google uruchomił nowy algorytm, na Zachodzie nazywał się Mobilegeddon. Teraz pomyślne ukończenie testu Mobile Friendly jest jednym z czynników SEO branych pod uwagę przez Google. Do tej pory nie było większych zmian w emisji, ale możesz się przygotować już teraz.
Jak sprawić, by strona internetowa była responsywna według Google? Sekret jest prosty - musisz postawić zadanie swoim programistom / projektantom layoutów. Cóż, jeśli nie ma czasu na czekanie, to ... możesz użyć MobileCheat 🙂
W rzeczywistości jest to technologia nieprzetestowana, nie wiadomo do czego doprowadzi w przyszłości, więc używaj jej tylko na własne ryzyko i ryzyko. Można tutaj wykonać przynajmniej serię testów.
Jak ominąć test Google za pomocą MobileCheat
Musisz tylko zrobić dwie rzeczy:
1. Dodaj metatag viewport do kodu.
2. Zamknij dostęp robota do plików CSS lub folderu, w którym się znajdują poprzez robots.txt
Na przykład tak mój blog przechodzi domyślny test:
Po zamknięciu CSS obraz zmienia się:
Wydaje się, że na stronie nic się nie zmieniło, ale wyniki testów są zupełnie inne. Nawiasem mówiąc, lubię wyłączać CSS na niektórych stronach, aby były wygodniejsze w przeglądaniu i używaniu 🙂 dlatego jest to całkowicie uzasadniony schemat. Ale jest prezentowany wyłącznie w celach informacyjnych.
Co o tym myślisz? Czy Google potraktuje to jako wzajemny ruch rycerski, czy też przemyśli to zawczasu i natychmiast zamatuje witrynę?
W wielu krajach smartfony są częściej używane do surfowania po Internecie niż komputery. Dlatego bardzo ważne jest dostosowanie serwisu do urządzeń mobilnych. Aby dowiedzieć się, czy Twoje strony są odpowiednie dla użytkowników smartfonów, pomoże Ci specjalne narzędzie w Search Console.
Stosowanie
Sprawdzenie, czy strona nadaje się do przeglądania na smartfonie, jest łatwe: wystarczy wpisać jej pełny adres URL. Sprawdzenie trwa zwykle mniej niż minutę. Jeśli na stronie znajdują się przekierowania, również zostaną przetworzone.
Na podstawie wyników sprawdzenia zobaczysz, jak strona wygląda na smartfonie, a także dowiesz się, jakie problemy mogą pojawić się podczas jej przeglądania. Najczęściej są to drobny druk (trudny do odczytania na małym ekranie) oraz elementy Flash (nieobsługiwane na większości urządzeń mobilnych).
Nie ustawiono wartości metatagu widocznego obszaru
Kod strony nie określa właściwości viewport, która informuje przeglądarkę, jak prawidłowo zmienić rozmiar elementów strony, aby pasowały do rozmiaru ekranu urządzenia. Aby zapewnić prawidłowe wyświetlanie witryny na ekranach różne rozmiary, dostosuj rzutnię za pomocą metatagu rzutni. Szczegółowe informacje na ten temat znajdziesz w naszym poradniku w sekcji Podstawy projektowania responsywnych stron internetowych.
Metatag widocznego obszaru musi mieć wartość szerokości urządzenia
Dostosowanie strony do ekranów o różnych rozmiarach jest niemożliwe, ponieważ właściwość viewport o stałej szerokości jest określona w jej kodzie. W takim przypadku musisz zastosować projekt responsywny, dostosowując skalowanie strony do rozmiaru ekranu.
Treść szersza niż ekran
Ten raport identyfikuje strony, na których należy przewijać w poziomie, aby wyświetlić tekst i obrazy. Ten problem występuje, gdy wymiary w style css są ustawione na wartości bezwzględne lub używane są obrazy zaprojektowane dla określonej szerokości okna przeglądarki. Upewnij się, że wartości szerokości i pozycji są elementy css są względne, a obrazy są skalowane. Szczegółowe informacje na ten temat znajdziesz w naszym poradniku w rozdziale Rozmiary zawartości w oknie roboczym.
Zbyt mała czcionka
Ten raport zawiera listę stron z mały druk, który wymaga od użytkowników używania gestów powiększenia do czytania. Po skonfigurowaniu rzutni należy określić rozmiary czcionek, aby wyświetlały się w niej poprawnie.
Elementy interaktywne są zbyt blisko
Ten raport zawiera listę stron, na których elementy nawigacyjne są tak blisko siebie, że użytkownikowi trudno jest dotknąć jednego bez dotykania drugiego. Zadbaj o najbardziej optymalne rozmiary przycisków, linków itp. oraz odległości między nimi, aby użytkownicy urządzeń mobilnych mogli z nimi łatwo wchodzić w interakcję.
Co dalej?
- Jak dowiedzieć się, jakie problemy z przeglądaniem witryny na urządzeniach mobilnych, korzystając ze specjalnego raportu (wymaga to zweryfikowania własności witryny na koncie Search Console)
- Jak zoptymalizować witrynę pod kątem urządzeń mobilnych (dla stron w WordPress, Joomla! i innych systemach zarządzania treścią)