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

Вітаю вас, любі друзі!

Мобільні гаджети заполонили світ. Без телефону сьогодні навіть по хліб не ходять.

В наш час Інтернет швидко розвивається. Швидке зростання ринку мобільного Інтернету змушує творців веб-ресурсів адаптувати свої сайти під цей тип пристроїв.

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

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

Всі вони працюють практично за одним і тим же принципом:

1. заходьте на сайт розробника того чи іншого сервісу
2. завантажуєте потрібне ПЗ
3. запускаєте програму
4. та через деякий час мобільна версія вашого веб-сайту перед вами!

Існують сервіси, які можуть зробити тестування вашого сайту в режимі онлайн.

Вибір, як завжди, за вами!

Безкоштовні

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

Responsinator. Завдяки цьому додатку ви легко зможете побачити, як виглядає сайт на Kindle, iPad, Android, iPhone.

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

Opera Mini Simulator. Емулятор від компанії Opera містить дуже велику базу мобільних гаджетів. Єдиним його недоліком можна вважати відсутність режиму онлайн, тобто для тестування вашого ресурсу вам доведеться завантажити та встановити потрібне ПЗ.

Gomez. Оцінює сумісність вашого ресурсу з мобільними пристроями за 30 параметрами, що дозволяє отримати найповнішу оцінку. Для безкоштовного використання слід ввести свої контактні дані.

MobiReady. Відмінний інструмент для тестування, що оцінює адаптивність дизайну. Перевірка заснована на кращих стандартах W3C (Консорціум Всесвітньої павутини).

Mobile Phone Emulator та Screenfly. Подібні послуги, які теж дозволяють переглядати стан веб-ресурсу на екранах будь-яких гаджетів.

Платні

CrossBrowserTesting. Перевіряє на 130 різних браузерах та 25 операційних системах, включаючи: Blackberry, Android, iPad, iPhone. За його використання вам треба буде щомісячно платити по 29,95 $.

BrowserStack. Забезпечує швидкий доступ до величезної бази. Коштує до 19 $ за один місяць, але є і безкоштовна версія.

Browshot. Призначений для зняття з Android, iPad, iPhone. За п'ять скріншотів вам доведеться заплатити 1 долар.

Perfecto Mobile. Дає доступ до бази планшетів і стільникових телефонів, що дозволяє бачити, наскільки якісна оптимізація на кожному типі пристроїв. За його використання потрібно платити до 15 доларів на добу.

Multi-Browser Viewer. Крос-браузерна програма, що містить мобільні емулятори та браузери для проведення тестування у будь-якому форматі. Коштує до 140 доларів, є безкоштовна демо-версія.

DeviceAnywhere. Прекрасний інструмент, який дає змогу точково перевіряти веб-контент, тестуючи ресурс у реальному часі. Може бути платним (по 100 доларів на місяць), так і безкоштовним.

Як бачите, програм та сервісів дуже багато, вибирайте найбільш зручний варіант та користуйтеся на здоров'я.

Мобільна версія для пошукових систем

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

Перевірити адаптацію мобільної версії під Гугл можна за допомогою сервісу Mobile Friendly. Його вже згадував у списку безкоштовних інструментів.

А для яндекса є схожий інструмент у версії кабінету для вебмайстрів (https://beta.webmaster.yandex.ru/).

Підписуйтесь на новини блогу і ви ще багато цікавого та корисного дізнаєтесь. А поки що прощаюся з вами, до зустрічі у новій статті!

З повагою! Абдуллін Руслан

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

Нещодавно компанія 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 нас «тішить» своїми правилами та алгоритмами, вигадуючи нові «мігрені» для вебмайстрів. Цього разу нам пропонують спробувати новий mobile-friendly-алгоритм, який підніме у мобільному пошуку адаптовані сайти та опустить «немобільні» ресурси.

Як усе це працюватиме?

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

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

Варто сказати, що я завжди, при створенні сайтів, перевіряв зовнішній вигляд на різних пристроях вручну та через сервіси, тому був спокійний на рахунок мобільності, але виявилося не все так просто. Отже, Google рекомендує перевірити свої ресурси через mobile-friendly тест:

Просто вводимо адресу сайту або сторінки і тиснемо "Аналізувати". Під час перевірки головної сторінки сайту мого кримського товариша krimeo.ru через тест я побачив те, що сторінка оптимізована для мобільних пристроїв.

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

Цікаво… шаблон цього блогу також адаптивний, я неодноразово заходив і з планшета, і зі смартфона… чому ж тоді Google він не сподобався?

Я почав аналізувати, що саме на сайті могло спровокувати такий результат. Рішення знайшлося там, де я найменше цього очікував: у мене на сайті мініатюри до статей виводилися прямокутником 720х350px і саме це (на думку Google) не сприяє тому, щоб сайт вважався мобільним. Дивно, адже чим більше картинки (кнопки) – тим легше користувачам із мобільних пристроїв потрапити пальцем… але Google вважає інакше.

Дивно ще й те, що при перегляді сайту на смартфоні всі зображення чудово адаптуються під розмір екрану і ніяких «косяків» не спостерігається. Ну що ж, вирішив провести експеримент і зробив розмір картинок адаптивним, тобто. що менше розмір екрана девайса, то менше зображення на сайті. Спробуйте схопити мишкою за кут браузера, і зменшити його.
Тепер у деяких вебмайстрів може намалюватися інша проблема: якщо Google так повівся з мініатюрами великого розміру, значить з ілюстраціями до статей ситуація буде такою ж, а це набагато важливіше, ніж головна сторінка. Для цього необхідно зробити зображення адаптивними для всього сайту, за допомогою запуску js-скрипту, але і це ще не все, папка кеша і правило збереження картинок має бути продубльовано в .htaccess

Так і є ті статті, які містять зображення великого розміру, не проходять перевірку на тесті Google, а ті матеріали, які мають невеликі ілюстрації, вважаються повністю «оптимізованими для мобільних пристроїв». Скріни я не наводитиму - просто берете URL окремої публікації і перевіряєте на «мобільність».

Чому ще Googlebot бачить, що блог не оптимізований для мобільних пристроїв

Тому що у robots.txt багато зайвих заборон.

В автоматичному створюваному WordPress віртуальному файлі robots.txt є тільки одна заборона:

Disallow: /wp-admin

А ось що пише Google, з приводу того, чому творці WordPress зробили за умовчанням таким robots.txt:

Щоб забезпечити правильне індексування та відображення сторінок, потрібно надати роботу Googlebot доступ до JavaScript, CSS та графічних файлів на сайті. Робот Googlebot повинен бачити ваш сайт як звичайний користувач. Якщо у файлі robots.txt закрито доступ до цих ресурсів, то Google не вдасться правильно проаналізувати та проіндексувати вміст. Це може погіршити позицію вашого сайту в Пошуку.

User-agent: * Disallow: /wp-admin Disallow: /wp-includes Disallow: /wp-content/plugins Host: Ваш_сайт Sitemap: http://Ваш _сайт/sitemap_index.xml (Мапа сайту від WordPress SEO by Yoast) -agent: Googlebot-Image Allow: /wp-content/uploads/ User-agent: YandexImages Allow: /wp-content/uploads/

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

Такий сюрприз у вигляді mobile-friendly-алгоритму ми можемо бачити з 21 квітня 2015 року. «Пестить» нас Google)). Живете спокійно? Нате Вам Панду! Мало? Нате ще й Пінгвіна! Відійшли? Отримуйте mobile-friendly!

Висновок

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

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