Керівництво з mobile-first, частина 2: ваш сайт очима гуглбота та власника смартфону | Бізнес Майстерня

Керівництво з mobile-first, частина 2: ваш сайт очима гуглбота та власника смартфону

Керівництво з mobile-first, частина 2: ваш сайт очима гуглбота та власника смартфону

оператор

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

Для аналізу важливо не тільки те, як бачить ваш сайт користувач, але і те, що побачить на сайті Googlebot (Smartphone), який не вміє натискати кнопки і користуватися свайпами.

Chrome Device Toolbar для емуляції смартфона на ПК

Ось як це робиться в Chrome. Натисніть правою кнопкою миші в будь-якому місці сторінки і в меню оберіть Inspect (Дослідити) або відкрийте панель Developer Tools з меню Хрома.

Developer Tools інструменти

У верхній лівій частині панелі управління ви побачите іконку перемикання девайсів.

мобільна версія сайту
Емуляція перегляду мобільної версії сайту на комп'ютері

Тепер ви можете подивитися на те, як сайт виглядає на екрані найпопулярніших смартфонів під iOS і Android. Також тут можна просто задати параметри екрану для будь-якого іншого девайса:

параметри

Ви також можете використовувати BrowserStack

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

BrowserStack

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

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

Подивіться на сайт очима робота Googlebot (Smartphone)

Незважаючи на те, що ця функція все ще відносно нова в порівнянні з іншими інструментами Search Console, «Fetch as Google» швидко став одним з найбільш широко використовуваних інструментів на платформі, особливо для запиту індексації нових сторінок сайтів.

(Зверніть увагу, що на момент написання статті функція була доступна тільки в старій версії Search Console і ще не була перенесена в нову Search Console.)

Процес перегляду мобільних веб-сторінок в Google схожий на той, що вже був у Search Console. Переконайтеся, що ви вибрали Mobile: Smartphone (Мобільна версія: смартфон), перш ніж вказувати URL, щоб ваші сторінки сканував юзер-агент Googlebot (Smartphone).

форма
Форма для перегляду мобільної версії сайту очима робота

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

скріншот

Тут важливо відзначити, що це не те, як контент зчитується Google (Smartphone). Цей інструмент використовує службу веб-рендерингу Google (WRS), засновану на Chrome 41, функцію, яка застосовується тільки системою індексації Google Caffeine. Таким чином, Fetch and Render об'єднує в собі функції відображення роботи мобільного сканера і індексатора.

Якщо у вас немає доступу до Search Console, скануйте сайт за допомогою Screaming Frog

Якщо у вас немає доступу до акаунту Google Search Console, ви можете скористатися Screaming Frog. Правда, для цього вам доведеться зробити більше дій. І заплатити - ця функція доступна тільки в платній версії.

По-перше, замість юзер-агента Screaming Frog виберіть Googlebot (Smartphone). Для цього використовуйте меню Configuration> User Agent.

У вікні User-Agent Configuration виберіть GoogleBot for smartphones (post April 18th 2016), як показано на скріншоті нижче, і натисніть OK.

юзер-агенти
Для подальшого сканування ви можете використовувати і інші юзер-агенти для мобільних, наприклад, Googlebot for smartphones (pre April 18th 2016), Googlebot-Mobile for feature phone devices 1 and Googlebot-Mobile for feature phone devices 2.

Наступний крок - включити рендеринг Javascript, щоб робот Googlebot (Smartphone) міг сканувати та обробляти сторінки сайту. Для цього треба зайти в Configuration>Spider. Коли відкриється вікно Spider Configuration, виберіть Rendering (третя вкладка).

Spider

Тепер на вкладці Rendering виберіть JavaScript і розмір вікна Googlebot Mobile: Smartphone. Натисніть ОК. Всі настройки готові, а далі все як завжди. (Зверніть увагу, що цей інструмент від Screaming Frog також використовує WRS від Google, але на базі Chrome 60, а не Chrome 41, який Caffeine застосовує для рендеринга контенту.)

Запустіть перевірку сайту Screaming Frog, дані будуть довантажуватися поступово. Це займе набагато більше часу, ніж при звичайному рендерингу через JavaScript. Щоб переглянути відрендерені сторінки, виберіть URL і відкрийте Rendering, використовуючи нижню панель.

Screaming Frog
Результат перевірки оптимізації сайту під мобільні за допомогою Screaming Frog

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

Звикайте аналізувати адаптивність сайту за допомогою Googlebot (Smartphone)

Коли ми говорили про використання Screaming Frog, то звернули увагу, що в якості юзер-агента слід використовувати Googlebot (Smartphone). Цей підхід необхідно застосовувати незалежно від того, який сервіс ви використовуєте.

Більшість краулерів, наприклад, DeepCrawl, Ryte і Botify підтримують використання декількох юзер-агентів, то ж завжди перевіряйте в настройках, що ви вибрали саме Googlebot (Smartphone).

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

Googlebot
Вибрати Googlebot (Smartphone) для аналізу сайту за допомогою DeepCrawl можна за допомогою меню Advanced Setting.

У заключній частині керівництва ми розповімо, як проводити аналіз сайтів з фокусом на Mobile First.

Фото: flickr.com
Обробка: Vinci
назад
далі