Мобільна версія сайта: проблеми та вирішення

Практика проведення технічних аудитів показує, що мобільні версії сайтів часто містять значно більше помилок порівняно з десктопними версіями. Це зумовлено нерідко недбалим ставленням до мобільної версії, яку розглядають як другорядний чинник. Наприклад, при внесенні змін до основного навігаційного меню сайту в результаті його реструктуризації, мобільна версія меню (якщо вона формується окремо) часто залишається без змін. У результаті виникають множинні посилання, за якими втрачається page rank на сотні тисяч, а іноді й мільйони сторінок сайту. Слід зазначити, що для Google мобільна версія сайту має набагато більше значення, ніж десктопна, і тому до неї висуваються вищі вимоги. Це підтверджується наявністю окремих звітів для мобільної версії в Google Search Console (GSC).

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

Виправлення та виявлення проблем

Для виявлення проблем із мобільними версіями сайтів у GSC передбачено звіт “Зручність для мобільних пристроїв”, який дає змогу аналізувати та вивчати різні проблеми, пов’язані з мобільними версіями.

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

Важливо! Google припиняє підтримку даного модуля в GSC про зручність використання на мобільних пристроях з 1 грудня 2023 року. Також це стосується і Mobile-Friendly Test API. Тому наведена інформація може бути неактуальною на той період часу. Однак є інші засоби перевірки, такі як Lighthouse, який сам Google і рекомендує.

Звіт “Зручність перегляду на мобільних пристроях” може виявити такі помилки:

Використання непідтримуваних плагінів

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

Рекомендується використовувати на сторінці сучасні технології з широкою підтримкою, такі як HTML5.

Не налаштована область перегляду

У коді сторінки відсутня властивість “viewport”, яка вказує браузеру, як правильно змінити розміри елементів сторінки відповідно до розміру екрана пристрою.

Для коректного відображення вашого сайту на екранах різних розмірів, від великих настільних моніторів до планшетів і маленьких смартфонів, необхідно налаштувати область перегляду з використанням метатега “viewport”.

У метатезі “viewport” має бути вказано значення “device-width”

Адаптація сторінки для різних розмірів екранів неможлива, оскільки в коді сторінки вказано властивість “viewport” із фіксованою шириною.

Для досягнення адаптивного дизайну та налаштування масштабування сторінки відповідно до розмірів екрана слід використовувати адаптивний підхід.

Контент виходить за межі екрана

Під час перегляду сторінки користувачеві доводиться горизонтально прокручувати текст і зображення. Ця проблема виникає, коли розміри елементів, задані в CSS, вказуються абсолютними значеннями, або коли використовуються зображення, які оптимально відображаються у вікні конкретної ширини (наприклад, 980 пікселів).

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

Занадто маленький шрифт

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

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

Інтерактивні елементи занадто близько розташовані

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

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

Ви можете перевірити оптимізацію для мобільних пристроїв окремих сторінок за допомогою такого інструменту: https://search.google.com/test/mobile-friendly