Якщо Google пише «Сторінку не оптимізовано для мобільних пристроїв. Перевірка оптимізації для мобільних телефонів. Google Search Console Як обійти тест Google за допомогою MobileCheat

Перевірити мобільну версію сайту на предмет помилок завдання просте. Відповідальність на пошуковому оптимізаторі. Наявність оптимізованої версії є фактором ранжування документів сайту.

Інструменти для мобільних сайтів

Як перевірити мобільну версію сайту

Перевірити сайт під мобільні пристрої можна за допомогою сервісів:

• Google Mobile-Friendly
• Google PageSpeed ​​Insights;
• WebPage Test;
• ScreenFly;
• WebPage Test;
• BrowserStack.

Mobile-Friendly

Сервіс під назвою Mobile-Friendly покаже наскільки сайт оптимізовано під мобільні пристрої та які є помилки щодо оптимізації:

PageSpeed ​​Insights

Перевірити мобільну версію сайту під Google можна також за допомогою інструмента від пошукової системи Google, який показує.

Сервіс називається просто - PageSpeed ​​Insights.

WebPage Test

Перевірку завантаження сайту правильно проводити для різних пристроїв і з різних регіонів. Зробити перевірку можна за допомогою WebPage Test.

Сервіс абсолютно безкоштовний.

ScreenFly

Використовуючи спеціальний інструмент для мобільного розробки можна перевірити як відображається сайт. Сервіс призначений для перегляду сайту у вигляді, в якому сайт відображатиметься на мобільних пристроях, але для вирішення завдання достатньо використовувати браузер.

Інструмент безкоштовний.

Adobe Edge Inspect

Якщо є парк пристроїв для перевірки сайту, можна використати девайси. Завдання завантаження сайту на всіх пристроях займає певний час, але завдання вирішується.

Якщо використовувати спеціально створене для відкриття сайту на різних пристроях програму під назвою Adobe Edge Inspect, завдання спрощується.

Інструмент безкоштовний.

Програма крос-платформна.

BrowserStack

BrowserStack є найвідомішим сервісом серед розробників сайту. Сервіс показує сумісність сайту реальних пристроях.

Інструмент платний.

Bing Mobile Test

Перевірити безкоштовновеб-сайт на відповідність вимогам мобільних пристроєм можна за допомогою інструменту Mobile Test від пошукової системи Bing.
Посилання на сервіс -

Доброго часу доби, мої друзі і гості мого блогу. Сьогодні у мене стаття буде досить коротка, але не втрачає своєї актуальності сьогодні. А саме хочу розповісти вам про таку річ, як Google перевірка мобільної версії сайту. І може я навіть не писав би таку очевидну статтю, якби ця перевірка нещодавно не поставила б мене в глухий кут.

Перевірка за допомогою Google

Раніше народ не морочився з приводу адаптивного дизайну чи мобільної версії. Але потім, коли з'явилася інформація про те, що пошукові системи будуть знижувати у видачі сайти, що не мають мобільної версії, то народ напружився (як і у випадку з HTTPS). Народ одразу став замовляти мобільні версії у фрілансерів, дехто ставив спеціальні плагіни, які могли працювати криво.

І ось, коли хтось обзаводився адаптивною версткою або мобільною версією, то перевіряли її відразу на спеціальному сервісі гугла, який дивиться, наскільки ваша верстка відповідає вимогам. Тепер інтерфейс трохи змінився, але суть залишилася незмінною.

Щоб перевірити цю справу в себе, вам потрібно зайти на цей сервіс. search.google.com/search-console/mobile-friendly. Після цього в рядку URL введіть адресу цього сайту та чекайте. Через недовго вам видасться вся інформація про те, чи задовольняє ваш сайт вимогам гугла по мобільній верстці.

Щось я не зрозумів...

Я чудово знаю, що мій сайт адаптований, тим більше нещодавно я підлатав верстку. Але недавно, заради приколу, я зайшов на цей сервіс, щоб подивитися, що скаже старовина Гоша, і був дуже здивований. Справа в тому, що сервіс видав мені, що мій блог ніколи не адаптований і погано читаємо для мобільних пристроїв.

Я ніяк не міг зрозуміти, в чому річ, тому поліз шукати рішення в інтернеті. І ось на одному сайті я знайшов його. Виявляється вся справа була у файлі robots.txt. У мене в ньому чорним по білому було написано, щоб пошукові системи не індексували файли моєї теми, тому він і не бачив жодної мобільної версії.

Після того, як я прибрав один рядок з роботса ( Disallow: /wp-content/themes/моя тема), то сервіс відразу визначив, що моя мобільна версія в нормі. Так що не переживайте, якщо раптом у вас буде те саме. Швидше за все, ви просто не дозволили гуглу індексувати вашу тему.

Ну а на цьому я мабуть свою сьогоднішню статтю закінчуватиму. Сподіваюся, вона була для вас корисною. Як бачите, google перевірка мобільної версії сайту дозволяє побачити, наскільки сайт підходить під його вимоги. Але насправді вже рідко зустрінеш сайт, який не має власної мобільної версії або адаптивності. Пройде ще трохи часу, і всі нові створені сайти автоматично будуть мати SSL сертифікат.

Дякую вам за те, що читаєте мене. Я неодмінно знову чекатиму вас на сторінках мого блогу. А поки що рекомендую вам почитати інші статті. Я впевнений, що ви знайдете багато цікавого для себе. Удачі вам. Бувай!

З повагою, Дмитро Костін.

Версії сайту - це не тільки можлива забаганка розробників, додаткова стаття витрат (або заробітку, якщо говорити про підрядників) та прояв турботи про відвідувачів ресурсу. Згідно з останніми заявами представників корпорації Google, сайти, що не відповідають вимогам адаптивного дизайну, будуть песимізовані у пошуку мобільних пристроїв. Вітчизняна пошукова система Яндекс також випустила рекомендації "Як важливо бути мобільним" і запевнила, що, діючи заради зручності користувачів мобільних пристроїв, маркуватиме у пошуковій видачі мобільні версії та віддаватиме перевагу адаптивним сторінкам.

Так, розробникам обов'язково необхідно адаптувати сайти для смартфонів і перевіряти справність відображення ресурсу. В іншому випадку незабаром очікується втрата значної частини трафіку, а значить, і потенційних клієнтів, адже нові алгоритми роботи від Google та "Яндекс" вже діють. Перевірити мобільну версію сайту можна у різний спосіб: зміною браузера при переході в режим розробника, за допомогою емуляторів мобільних пристроїв або веб-сервісів.

Доброзичливість сайту мобільним пристроям

Адаптивність до мобільних пристроїв оцінюється за різними параметрами. Важливо перевірити мобільну версію сайту не тільки щодо коректного відображення, варто врахувати й інші фактори:

• відсутність анімації, "важкого" дизайну та картинок;
• швидкість завантаження ресурсу (має бути мінімальною);
• відсутність необхідності горизонтального прокручування;
• відсутність Silverlight-плагінів та Java-аплетів;
• проста навігація по сайту;
• у коді прописаний мета-тег viewport.

Якщо перелічені умови виконані, алгоритми найпоширеніших пошукових систем розпізнають веб-сторінку як придатну для мобільних пристроїв та підвищують позицію сайту у видачі щодо ресурсів, які не адаптовані.

Реальне тестування на мобільних пристроях

Найзручніше протестувати мобільну версію сайту на реальних смартфонах. Цей спосіб дозволить провести випробування в реальних умовах. В ідеалі перевіряти веб-ресурс краще на кількох пристроях, але якщо бюджет проекту не передбачає витрати на придбання кількох смартфонів найпопулярніших моделей, достатньо буде пристрої на базі Android або Apple.

Зміна розміру вікна браузера

Найпростішим, але не оптимальним у плані перевірки є зміна розмірів вікна браузера. Якщо сторінка зроблена за допомогою застосування технології, перевірити мобільну версію сайту таким чином можна. Але в тих випадках, коли застосований окремий дизайн, ресурс потребує ясної вказівки того, що користувач прийшов зі смартфона, планшета або іншого мобільного пристрою. Так, цей спосіб дозволяє перевірити наявність мобільної версії сайту. А ось коректність відображення (технічно) оцінити навряд чи вдасться.

Перехід у режим розробника у браузері

Більш оптимальний спосіб перевірити мобільну версію сайту (Google або "Яндекс", як і інші пошукові системи виділяють адаптивність у списку найважливіших факторів, що впливають на ранжування) - це перейти в режим розробника в браузері. Спосіб працює подібним чином із кількома браузерами:

• Перейти в режим розробника можна, вибравши опцію "Адаптивний дизайн" у меню "Розробка"; натиснувши комбінацію Ctrl+Shift+M; натиснувши кнопку "Режим адаптивного дизайну" на панелі інструментів веб-розробника;
• Chrome: перехід у мобільний режим здійснюється натисканням F12, потім слід вибрати значок мобільної версії (смартфон у лівому верхньому куті вікна).

У Opera перехід у режим розробника для перевірки мобільної версії здійснюється натисканням комбінації Ctrl+Shift+i, але є й інший спосіб. Спеціальна версія браузера – Opera Mobile Classic Emulator – дозволяє різнобічно оцінити мобільний дизайн. Версії програми є для основних операційних систем.

Емулятори мобільних пристроїв: Android Studio та Apple Xcode

Перевірити мобільну версію сайту ("Яндекс" та Google) можна за допомогою емуляторів мобільних пристроїв, якими для Android та Apple є відповідно Android Studio або Apple Xcode.

Подібні інструменти досить точно відтворюють сайт у тому вигляді, як він виглядатиме на мобільних пристроях: у програмах встановлені найпоширеніші версії браузерів для мобільних пристроїв. Однак емулятори не враховують швидкість завантаження та деякі інші нюанси, які можна спостерігати в реальних умовах.

Для перевірки достатньо встановити одну з перерахованих вище програм на комп'ютер і відкрити сайт з емулятора.

Веб-сервіси перевірки мобільного дизайну

Існують і простіші способи перевірити мобільну версію сайту. Наприклад, онлайн-сервіс Responsinator дозволяє оцінити коректність відображення ресурсу на мобільних пристроях та зручність користування сайтом з боку користувача. Ресурс відображає сайт у тому вигляді, як він виглядав би на шести різних пристроях на базі Android або Apple і кількох орієнтаціях.

Перевірка оптимізації веб-сторінок для мобільних пристроїв

Інші ресурси, що дозволяють перевірити мобільну версію сайту, додатково оцінюють адаптивність, а не тільки показують, як виглядав би майданчик на різних пристроях. Найавторитетніші сервіси: Google Mobile Friendly та "Яндекс ВебМастер" (перевірка веб-сторінок). Оцінюють оптимізацію сайту для мобільних пристроїв також засіб перевірки Bing або, наприклад, Mobile Checker W3C.

Все, що потрібно від веб-майстра при оцінці версії сайту для мобільних пристроїв за допомогою онлайн-сервісів, так це ввести адресу ресурсу та дочекатися закінчення аналізу. Більшість вищезгаданих сервісів перевіряють оптимізацію за параметрами дружелюбності до мобільних пристроїв, перерахованих вище.

Отже, оцінити адаптивність веб-ресурсу можна декількома способами: починаючи від тестування на реальних смартфонах, планшетах або інших мобільних пристроях або зміни розмірів вікна веб-браузера, перевірки в емуляторах або режимі розробника веб-браузерів і закінчуючи використанням сервісів від "Яндекс" та "Гугл". Перевірити мобільну версію сайту всебічно дуже просто, а це дозволить внести необхідні редагування та покращити позиції сайту в пошуковій видачі.

Для своїх проектів ви, мабуть, давно помітили, що кількість мобільних користувачів постійно зростає. У когось тенденція менш помітна, а на деяких проектах за кожен рік ця цифра збільшується вдвічі і більше. За даними LiveInternet, у Рунеті зараз понад 50% трафіку припадає на мобільні пристрої. До речі, багато читачів цього блогу вже давно скаржаться, що тут немає мобільної версії 🙂, що буде, звичайно, виправлено в найближчому майбутньому.

Цей факт мобілізації неспроможна ігноруватися і пошуковими платформами. Поступово вони дають переваги в мобільному пошуку тим сайтам, адаптованим під пристрої користувачів.

Спочатку Google давав сайтам позначку в сніпетах, що вони коректно відображатимуться на мобільних телефонах.

Також Google створив інструмент на допомогу вебмайстрам для перевірки коректності відображення сайту на мобільних пристроях:
https://www.google.com/webmasters/tools/mobile-friendly/

З 21 квітня Google запустив новий алгоритм, на заході його назвали Mobilegeddon. Тепер успішне проходження тесту на Mobile Friendly є одним із seo-факторів, що враховується гуглом. Поки що сильних змін у видачі не було, але готуватися можна вже зараз.

Як зробити сайт адаптивним з точки зору гугла? Секрет простий – потрібно поставити завдання вашим програмістам/верстальникам. Ну а якщо немає часу чекати, то… можна використовувати MobileCheat 🙂

Насправді це неперевірена технологія, яка невідомо до чого призведе надалі, тому використовувати тільки на свій страх та ризик. Щонайменше серію тестів можна тут провести.

Як обійти тест Google за допомогою MobileCheat

Необхідно зробити лише дві речі:

1. Додати код мета-тег viewport.

2. Закрити роботу доступ до CSS-файлів або папки, де вони лежать через robots.txt

Наприклад, так мій блог проходить тест за замовчуванням:

При закритті CSS зображення змінюється:

Начебто на сайті нічого не змінилося, але результати тесту зовсім інші. До речі, на деяких сайтах сам люблю відключати CSS, щоб їх було зручніше переглядати та використовувати 🙂 тому цілком виправдана схема. Але представлена ​​лише з ознайомлювальною метою.

А що ви думаєте з цього приводу? Чи це Google розраховуватиме як хід у відповідь конем або він продумав все наперед і відразу поставить сайту шах і мат? 🙂

Сьогодні вже немає потреби переконувати когось у необхідності мобільної версії сайту. Адже з кожним днем ​​відвідувачів зі смартфонів та планшетів стає дедалі більше. На момент написання цієї статті близько 20% відвідувачів мого блогу використовують мобільні пристрої для перегляду. Тобто кожен п'ятий заходить на мій сайт із телефону або планшета.

Кілька років тому я навіть не думав про таких відвідувачів, але коли їхня кількість перевищила 10% від загальної кількості, я став використовувати адаптивну верстку. Це дозволило коректно відображати контент на мобільних пристроях та підвищити лояльність до сайту як відвідувачів, так і пошукових систем.

Мобільна версія сайту та адаптивний дизайн – це не одне й теж. У даній статті мова піде про тестування адаптивної верстки, коли дизайн сайту змінюється залежно від дозволу екрана пристрою відвідувача.

Щоб бути впевненим, що ваш сайт правильно відображається на мобільних пристроях, необхідно провести перевірку, і для цього існує кілька корисних сервісів та інструментів.

Швидка перевірка адаптивної верстки

Популярний інтернет оглядач (браузер) Mozilla Firefoxоснащений вбудованим інструментом перевірки дизайну сайту на придатність до відображення на мобільних пристроях. Щоб ним скористатися, зайдіть у «Меню» — «Розробка» — «Адаптивний дизайн». Або просто натисніть на клавіатурі одночасно три клавіші ++[M]

Ви повинні побачити приблизно таку картину:

Змінюючи роздільну здатність та орієнтацію екрана можна перевірити як відображатиметься ваш сайт у мобільних відвідувачів.

Браузер Google Chromeтакож має вбудовану підтримку перевірки адаптивності дизайну сайту. Для цього заходимо в меню, вибираємо пункт «Додаткові інструменти», а потім «інструменти розробника» (або натискаємо клавішу ).

Після цього натискаємо іконку адаптивного дизайну (або одночасно натискаємо на клавіатурі ++[M]):

У середині екрана ви побачите, як буде відображатися ваш сайт на екранах мобільних пристроїв:

SEO тестування мобільного дизайну

Як відомо, у двох світових пошукових лідерів Google і Яндекс є своя нескромна думка як має виглядати сайт на екранах мобільних пристроїв. І якщо сайт визнається незручним для мобільних відвідувачів, він знижується в пошуковій видачі. Таким чином, з погляду SEO, якщо ви не хочете втратити мобільних відвідувачів, то у вас має бути не тільки адаптивний дизайн, але й пошукові системи повинні вважати його таким, тобто придатним для мобільних пристроїв.

Для перевірки адаптивності за допомогою сервісу Google заходимо за наступною адресою та вбиваємо ім'я свого сайту: https://www.google.com/webmasters/tools/mobile-friendly/.

Ось так виглядає результат перевірки мого блога:

З Яндексом трохи складніше, для перевірки треба обов'язково зареєструватися в сервісі Яндекс.Вебмастер та скористатися бета-версією інтерфейсу:

Он-лайн сервіси перевірки адаптивності

Основним завданням цих сервісів презентувати (показати) як виглядатиме ваш сайт на мобільному пристрої. Сайтів з таким функціоналом безліч. Я наведу лише деякі з них. У більшості випадків вони дублюють вбудований функціонал FireFox та Chrome.

Google resizer

Почну знову ж таки з Google, який має свій сервіс демонстрації адаптивності: http://design.google.com/resizer/#

Quirktools screenfly

Другий симпатичний сервіс – це http://quirktools.com/screenfly/. Він покаже, як може виглядати ваш сайт навіть на телевізорі!

Symby.ru adaptest

Ну і щоб не образити "вітчизняного виробника" наведу приклад ще одного сайту: http://symby.ru/adaptest/. На одній сторінці ви побачите відразу кілька уявлень з різними роздільними здатністю екранів.

Швидкість роботи мобільної версії сайту

Після того, як ви переконалися, що ваш сайт адаптивний і коректно відображається на екранах більшості пристроїв, перевірте швидкість його роботи. Знову ж таки стосовно мобільних відвідувачів.

PageSpeed ​​Insights

Google як завжди попереду всієї планети: https://developers.google.com/speed/pagespeed/insights/ . Цей сервіс покаже як виглядає сайт на екрані телефону та дасть рекомендації щодо оптимізації коду для збільшення швидкості завантаження на мобільних пристроях.

WebPageTest

І на завершення наведу приклад сервісу, який не тільки покаже як виглядає сайт на мобільному пристрої, але й покаже швидкість його роботи: http://www.webpagetest.org/

Висновки

На мій погляд у повсякденній роботі при внесенні змін до дизайну сайту простіше використовувати вбудовані можливості браузерів FireFox та Chrome. Після чого, звичайно, необхідно перевірити лояльність пошукових систем до вашого дизайну. А вже потім, для заспокоєння душі або, щоб похвалитися, можна скористатися онлайн сервісами.