Мобільна версія сайту: оптимізація під мобільні пристрої

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

Чому Google дивиться на мобільну версію

Тому що Google індексує сайти такими, якими їх бачить смартфон. Mobile-first індексація - це спосіб, за якого робот Google заходить на сторінку як смартфон і за побаченим вирішує, що потрапить в індекс і як сторінка ранжуватиметься, як пояснює довідка Google. З 5 липня 2024 року Google сканує всі сайти тільки роботом для смартфонів, і те, що з телефону не відкривається, в індекс не потрапляє. За даними StatCounter, у вересні 2026 року 59% переглядів сторінок у світі припало на мобільні пристрої.

Для власника сайту це означає, що індексація мобільної версії сайту і є індексацією сайту. Якщо на телефоні текст скорочено, частину посилань сховано, а розмітка для розширених сніпетів стоїть тільки у версії для комп'ютера, Google бачить урізаний сайт. Чи потрапила потрібна сторінка в індекс, можна перевірити індексацію сторінок у Search Console.

Три способи зробити мобільну версію сайту

Довідка Google описує три способи, і вони різняться адресами сторінок і тим, який код отримує телефон:

Google радить адаптивний дизайн: його найпростіше зробити й підтримувати. У сторінки одна адреса, тому посилання й сигнали не діляться між двома адресами, а правку тексту одразу видно на всіх пристроях. Динамічний показ і окремий піддомен мають сенс, тільки якщо мобільним користувачам потрібен помітно інший функціонал, і тоді кожну відмінність між варіантами доведеться тримати під контролем. Поділ адаптиву на AWD з кількома фіксованими макетами і RWD з одним гнучким трапляється в статтях розробників, але для SEO різниці між ними немає.

Адаптивний дизайн

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

Що перевірити з розробником:

• тег viewport у коді сторінки: <meta name="viewport" content="width=device-width, initial-scale=1">, без нього телефон показує зменшену сторінку для комп'ютера;
• картинки віддаються за шириною екрана, а не в розмірі для монітора;
• меню на телефоні відкривається одним натисканням і містить ті самі розділи.

Окрема мобільна версія на піддомені

Такий сайт, наприклад m.site.com, зараз трапляється переважно в старих великих проєктів, які робили його ще до масового адаптиву. Це другий сайт, і кожну його сторінку треба пов'язати з основною. Обов'язкові налаштування:

• на сторінці m.-версії тег canonical вказує на сторінку для комп'ютера, а на ній тег alternate веде назад, і так для кожної пари сторінок;
• на обох адресах той самий текст, заголовки, title і description, та сама розмітка і ті самі картинки з описом;
• телефон переадресовується на ту саму сторінку в m.-версії: з site.com/dostavka на m.site.com/dostavka;
• адреси сторінок на піддомені повторюють адреси основного сайту;
• robots.txt піддомену не закриває сторінки й файли стилів, інакше робот не побачить сторінок піддомену;
• m. додано в Search Console, краще ресурсом на весь домен.

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

Швидкість сайту на телефоні

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

Core Web Vitals на мобільних

Core Web Vitals - це три показники Google, за якими видно, наскільки швидко і стабільно сторінка працює в живих людей:

• LCP показує, коли завантажився найбільший елемент першого екрана, добре до 2,5 секунди;
• INP показує, як швидко сторінка реагує на натискання, добре менше 200 мілісекунд, з березня 2024 року він замінив FID;
• CLS показує, наскільки зсуваються блоки під час завантаження, добре менше 0,1.

У Search Console звіт «Основні веб-показники» будується окремо для мобільних і для комп'ютерів і ділить адреси на «Добре» (Good), «Потрібно збільшити швидкість» (Need improvement) і «Низька швидкість» (Poor). Це дані реальних користувачів Chrome за 28 днів. Лабораторний замір у PageSpeed Insights чи Lighthouse робиться один раз на емуляції телефону і допомагає знайти причину, але зі звітом може не збігатися.

Картинки і шрифти

Повільний сервер теж буває причиною, але частіше мобільну сторінку гальмує те, що на неї поклали:

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

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

Як перевірити мобільну версію сайту

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

PageSpeed Insights, Lighthouse і Search Console

PageSpeed Insights показує для мобільних дані реальних користувачів і лабораторний замір з підказками. Lighthouse вбудований у Chrome: у DevTools відкрийте вкладку Lighthouse, виберіть пристрій Mobile і запустіть звіт. Режим пристрою (Toggle device toolbar) показує, як сторінка виглядає на телефоні. Перевірка мобільної версії сайту в Google Search Console йде через «Перевірку URL-адреси» (URL Inspection): натисніть «Перевірити опубліковану URL-адресу» (Test live URL), потім «Переглянути перевірену сторінку» (View tested page), і на вкладці «Знімок екрана» (Screenshot) буде те, що побачив робот. Mobile-Friendly Test і звіт про зручність на мобільних Google вимкнув 1 грудня 2023 року, а заміною назвав Lighthouse.

Чек-лист на 10 хвилин

Відкрийте з телефону головну, сторінку послуги чи товару і контакти і пройдіться списком:

1. Горизонтального прокручування немає: сторінка не їде вбік, коли ви гортаєте вниз.
2. Текст можна прочитати без збільшення пальцями, рядки не виходять за межі екрана.
3. Кнопки й посилання не дрібні: завбільшки з подушечку пальця, близько 48 на 48 пікселів, і стоять не впритул.
4. Одразу після відкриття сторінки немає вікна на весь екран з підпискою чи акцією, яке закриває вміст.
5. На номер телефону можна натиснути, і одразу починається дзвінок.
6. Форму заявки зручно заповнити з клавіатури телефону: для номера відкриваються цифри, поля не ховаються під клавіатуру.
7. Меню відкривається одним натисканням, у ньому ті самі розділи, що на комп'ютері, і воно закривається.
8. Картинки й таблиці вміщаються за шириною і не обрізані.

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

Помилки мобільної оптимізації

Наведені нижче помилки трапляються найчастіше й заважають і людям, і роботові Google:

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

Часті запитання про мобільну версію сайту