Сьогодні вже немає потреби переконувати когось у необхідності мобільної версіїсайту. Адже з кожним днем ​​відвідувачів зі смартфонів та планшетів стає дедалі більше. На момент написання цієї статті близько 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. Після чого, звичайно, необхідно перевірити лояльність пошукових систем до вашого дизайну. А вже потім, для заспокоєння душі або, щоб похвалитися, можна скористатися онлайн сервісами.

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

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

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

Будь ваш сайт тричі зручний для десктопних платформ, потрібно перевіряти якість мобільної верстки, інакше ви втрачатимете значну частину трафіку (частка мобільних платформ у пошуку стрімко зростає з кожним роком), а значить - втрачати своїх клієнтів. Тому потрібно адаптувати свої сайти для мобільних пристроїв та перевіряти коректність відображення сайтів у мобільних браузерах.

Перевіряємо якість мобільної верстки за допомогою Google Chrome

Для розробників Google має чудовий інструмент для імітації мобільних пристроїв. Цей інструмент вбудований у браузер Google Chrome. Для доступу до нього потрібно натиснути F12у браузері (перейти в режим розробника) та натиснути на значок смартфона:

Сторінка перетворюється на режим перемикання пристрою, де ви зможете вибрати один з популярних мобільних пристроїв, тип мережі (GPRS, 2G, 3G, 4G і т.д.), вказати строгі параметри дисплея. Це дозволяє імітувати роботу сайту на конкретних мобільних девайсах. До доступних пристроїв належать різні версії iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxyта деяких інших популярних пристроїв.

Вибравши певний девайс, ви зможете перевірити сайт на мобільному пристрої. Наприклад, відображення головної сторінкисайту "Нубекс" на iPad 3:

І на Samsung Galaxy S4:

Тут ви зможете не тільки побачити відображення сайту на тому чи іншому девайсі, але й повноцінно працювати з сайтом, ніби перед вами потрібний гаджет. Безсумнівно, цей інструмент просто незамінний при розробці мобільної версії сайту, але як відображатиметься ваш сайт на реальних пристроях - потрібно перевіряти на реальних пристроях. Особливо це важливо, якщо потрібно перевірити відображення сайту в "рідних" браузерах (Safari - для iPad/iPhone, IE - для Windows Phoneі т.д.).

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

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

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

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

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

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

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

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

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

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

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

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

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

Як відкрити перевірку оптимізації для мобільних пристроїв Google Search Console

Для того, щоб відкрити перевірку оптимізації для мобільних пристроїв Google Search Console потрібно ввести в адресному рядку браузера адресу:

Https://search.google.com/test/mobile-friendly

або просто перейти → це посилання (відкриється в новому вікні).

Після того, як сторінку перевірки оптимізації для мобільних пристроїв Google Search Console відкрито, потрібно ввести адресу сайту або сторінки сайту, оптимізацію якої потрібно перевірити та натиснути на кнопку « Перевірити» так, як показано на малюнку нижче:

Після цього Google Search Console деякий час знадобиться на завантаження та виконання аналізу вказаної сторінки:

Якщо за підсумками перевірки Google Search Console прийме рішення про те, що сторінка оптимізована для мобільних пристроїв, буде отримано приблизно таке повідомлення, як на малюнку нижче:

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

із зазначенням явних проблемних місць на сторінці.

Резюме:

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

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

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

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

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

• 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.
Посилання на сервіс - Принтери