Як зробити сайт зручним для мобільних пристроїв?

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

Що таке мобільна оптимізація?

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

Чому так важливо зробити сайт зручним для мобільних пристроїв?

Власники веб-ресурсів повинні розуміти, що неоптимізований для мобільних користувачів сайт буде втрачати відвідувачів разом із рейтингом у пошукових системах. Починаючи з 2015 року, коли Google запустив оновлення для мобільних пристроїв, він послідовно надає пріоритет саме мобільному пошуку – mobile-first індекс. На сьогоднішній день більш 70% ресурсів залучені до індексу mobile-first, перевірити свій сайт можна в Google Search Console – “Налаштування -> Пошуковий робот”

Майже 60% пошукових запитів в 2022 році здійснюються з мобільних пристроїв і ця тенденція буде тільки посилюватися.

Як обрати мобільне рішення для сайту?

• Мобільна версія сайту використовує окремі URL або окремий піддомен для мобільної версії сторінок (site.com/mobile/page-n, m.site.com/page-n). Найімовірніше, це урізана версія основного сайту з обмеженим функціоналом. Вона пропонує більш відповідну для мобільного використання навігацію та містить менше контенту ніж дестопна. Така конфігурація не така популярна як раніше та не рекомендується Google.
• Мобільний додаток сайту – додаток під відповідну мобільну платформу (iOS, Android), може бути доповнювати сайт чи бути самостійним рішенням. Розробка та використання мобільного додатку доречне не для кожного сайту (бізнесу). Для сайту електронної комерції або сервісу доставки мобільний застосунок може покращити зручність користування для мобільних відвідувань. Для інформаційного сайту розробка та використання mobile application не буде оптимальним рішенням.
• Адаптивний дизайн (Responsive design) сайту – автоматично адаптується під параметри того пристрою, з якого здійснюється вхід. За такої конфігурації сервер відповідає різним HTML (і CSS) на одну й ту саму URL-адресу залежно від того, який агент користувача запитує сторінку (мобільний, планшетний або настільний).

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

1. оптимізацію CSS і налаштування медіазапитів;
2. налаштування області перегляду за допомогою спеціальних метатегів;
3. оптимізацію використовуваних плагінів.

Як перевірити, чи оптимізований ваш сайт для мобільних пристроїв?

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

Ви також можете перевірити оптимізацію сторінок свого сайту для мобільних пристроїв за допомогою Google Mobile-Friendly Test

Перевірте швидкість сторінки на мобільному пристрої. Ви можете використовувати Google PageSpeed Insights, введіть URL-адресу сторінки, яку ви хочете перевірити, і дочекайтеся завершення аналізу. Прокрутіть униз до розділу “Можливості” та ознайомтеся з пропозиціями, які допоможуть поліпшити швидкість вашого сайту.

Як зробити свій сайт мобільним?

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

Оптимізація часу завантаження для мобільних користувачів

Швидкість завантаження вашого сайту на мобільних девайсах має вирішальне значення, якщо ви хочете вдосконалити мобільне SEO:

• Перевірте час відгуку вашого сервера
• Уникайте Flash – замість цього використовуйте HTML5
• Не використовуйте занадто багато плагінів
• Зробіть ваші зображення зручними для мобільних пристроїв
• Увімкніть веб-кешування
• Зареєструйтеся в мережі доставки контенту CDN
• Перевірте свій код HTML, CSS і JavaScript
• Використовуйте менше редиректів

Дозволити Google сканувати все – перевірте файл robots.txt на предмет блокування Javascript, CSS, зображень та інших важливих частин коду вашого сайту для комп’ютерів і мобільних пристроїв.

Працюйте над UI та UX вашого мобільного сайту

Грамотно використовуйте метатег Mind Viewport – тег «Viewport Content» повідомляє браузерам, як обробляти розміри та масштаб вашої веб-сторінки на різних пристроях.

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

Використовуйте “зручний для великого пальця” підхід – Google рекомендує мінімальний розмір цілі торкання приблизно 7 мм або 48 пікселів CSS з мінімальною відстанню між елементами не менше 8 пікселів.

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

Слідкуйте за закликами до дії (CTA) – завжди розміщуйте заклики до дії на своїх цільових сторінках у верхній частині сторінки для мобільних користувачів, ніколи не дозволяйте не дуже важливим банерам накладатися на CTA.

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

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

Реалізувати розмітку Schema

Сайти з правильно структурованою розміткою schema краще інтерпретуються Google і зазвичай посідають високі місця в результатах пошуку Google.

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

Олександр Романенко

Team Lead/Senior SEO-спеціаліст

Сторінка автора