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

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

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

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

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

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

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

Перевірка сайту в 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-спеціаліст
Інші статті автора
14/11/2023
Мікророзмітка служить для розмітки даних на сторінках сайту на зрозумілій пошуковій мові, що дає можливість пошуковим системам використовувати розмічені дані для виведення інформації в СНІПЕТ, а це покращує відповіді на запитання користувачів - по суті головне завдання ПС.

23/05/2023
Редирект (перенаправлення) – це процес автоматичної переадресації користувача з однієї URL-адреси на іншу, що буває корисним при зміні URL-адреси сторінки, перенесення сайту на інший домен, виправлення помилок URL, забезпечення безпеки сайту тощо.

12/05/2023
Фільтри – це не просто інструмент, потрібний покупцю для пошуку товару в, іноді, дуже великих каталогах, їх налаштування – один з ключових чинників, що впливають на продуктивність  і ефективність інтернет-магазину. Три чверті користувачів, які не знайшли потрібний товар протягом 20 секунд залишають веб-ресурс і шукають більш зручний.

Останні статті по #SEO
29/03/2024
Лінкбілдинг - ефективний сучасний спосіб просування сайтів. Його суть полягає в нарощуванні якісної зовнішньої посилальної маси. Результат процесу - високі позиції у видачі пошукових систем. Досягати їх допомагають біржі посилань для лінкбілдингу під західний ринок.

28/03/2024
Як саме обладнання і розташування дата-центру впливають на SEO-оптимізацію сайту? Які технічні параметри слід врахувати при виборі хостинг-провайдера або ж при переїзді до іншого хостера? І як зробити так, щоб сайт давав відмінні показники в PageSpeed Insights, читайте нижче.

27/03/2024
При досягненні бажаних результатів у пошуковій видачі не потрібно зупиняти роботи з просування платформи. Алгоритми пошукових систем періодично змінюються, конкуренти проводять роботи з покращення своїх ресурсів, а значить просуванням вашого сайту теж необхідно займатися постійно.