10 способів мобільної оптимізації сайту

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

Що означає оптимізація сайту під мобільні пристрої

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

Важливість мобільної оптимізації

Мобільна оптимізація необхідна для всіх сайтів. Якщо користувач смартфона, зайшовши на сайт, побачить, що вебресурс неадаптований під смартфон («злітають» картинки, не зручно натискати на клавіші тощо), він без вагань закриє його та відкриє інше посилання у пошуковику.Пошукові системи також враховують цей тренд, тому запроваджують нові принципи ранжування. Три роки тому мобільний індекс став пріоритетним у ранжуванні для всіх нових сайтів. Індексування із пріоритетом мобільного контенту (mobile-first indexing) сторінок залежить головним чином від їхньої мобільної версії. Неадаптованість під смартфон впливає на зниження у видачі пошуковика. Тому повноцінна SEO-оптимізація не відбувається без адаптації ресурсу під смартфон. 

Методи оптимізації сайту під смартфони

Окремий шаблон чи піддомен

Якщо створити мобільну версію на піддомені, то коли юзер відкриє сайт з мобільного пристрою, сервер автоматично зробить переадресацію на цей піддомен. Іншими словами, на ПК і мобільні пристрої буде передаватися різний HTML і формуватимуться URL-адреси під кожну сторінку.Перевагою цього способу є швидке завантаження. Серед недоліків – зміна URL, необхідність налаштування взаємозв’язку версій та трудозатратність під час реалізації.Також мобільну версію можна створити на іншому шаблоні. Тоді URL-адреса залишається такою ж, незалежно від того, який пристрій використовує користувач. Змінюється лише HTML-код. Коли юзер потрапляє на вебсайт, сервер визначає тип пристрою, з якого здійснено вхід, і відправляє відповідну версію сторінки.Важлива перевага такого методу оптимізації – статичність URL. Це, своєю чергою, позбавляє необхідності робіт з оптимізації версій для SEO. Водночас можна виділити такі недоліки:

• необхідність розробки скрипту з визначення типу девайсу, який використовує юзер;
• наявність деяких відмінностей дизайну мобільної версії від десктопної.

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

Для адаптивної мобільної версії не потрібно оптимізувати ані десктопну, ані мобільну версії сайту. Незалежно від того, який девайс використовує юзер, запити йдуть на той самий сервер, який відправляє користувачеві однаковий HTML-код. Контент ресурсу підлаштовується під роздільну здатність екрана за допомогою CSS. Це дає змогу зробити функціональність і дизайн ресурсу для будь-якого пристрою.Перевагами адаптивної мобільної верстки є єдиний URL для всіх версій сайту, відсутність зайвих елементів на сторінці, а також коректне відображення сторінок на всіх пристроях. Водночас адаптивна верстка має низку мінусів. Зокрема, йдеться про необхідність скорочення текстів під час оптимізації сайту для мобільних пристроїв. Окрім того, якщо сайт містить чимало відео, широкоформатних світлин чи анімацію, то це може вплинути на швидкість завантаження сторінок.

Динамічне оновлення

Динамічне оновлення вважається більш складним варіантом адаптивної верстки. Особливістю цього способу є те, що коректну версію сторінки через HTTP-запит Vary видає сервер. Разом з цим, змінюється не лише CSS, а й HTML.Перевагами способу є швидке завантаження та можливість викладати різний контент для десктопу (десктопної версії) та мобільної версії. Однак цей спосіб трудомісткий, і без спеціальних знань самостійно налаштувати не вийде. Окрім того, динамічне оновлення не на всіх пристроях працює правильно. На моделях із нестандартними діагоналями дизайн може виводитися з помилками. 

Розмітка Accelerated Mobile Pages (AMP)

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

Розмітка Schema.org

Оптимізація сайту під телефон також може бути здійснена за допомогою розмітки Schema.org в мобільному пошуку. Особливістю Schema.org є те, що вона допомагає відповісти на конкретне запитання користувача уже в результатах пошукової видачі. Водночас деяким власникам сайтів це допомагає не витрачати гроші на PPC-рекламу. Якщо ваш сайт на WordPress і ви хочете впровадити розмітку Schema.org, то можете встановити плагін – Schema App Structured Data.

Видалення Flash

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

Стиснення та оптимізація зображень

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

• використовуйте відносні розміри світлин;
• застосовуйте вбудовані зображення;
• для пристроїв із вищою роздільною здатністю використовуйте атрибут srcset для фото.

Оптимізація відео для мобільних пристроїв">Оптимізація відео для мобільних пристроїв

Щоб мобільна верстка демонструвалася коректно, вам також треба подбати про відео:

1. Використовуйте користувальницький елемент керування з кореневим елементом div, елемент video media та дочірній елемент div.
2. Забезпечте наявність кнопок «Відтворення» та «Пауза».
3. Використовуйте формати ескізів, які підтримуються Google.
4. Переконайтеся, що відео дійсно можна проіндексувати.
5. Використовуйте карту сайту для відео.
6. Використовуйте тег HTML, який легко ідентифікувати.

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

Під час SEO-аудиту необхідно перевіряти свій сайт на різних операційках і девайсах. Це допоможе зрозуміти сумісність вашого сайту з якомога більшою кількістю дисплеїв і платформ. Для такої перевірки ви можете користуватися низкою програм. Серед них:

• BrowserStack;
• Google Search Console;
• Google Mobile Friendly Test;
• PageSpeed Insights;
• Web.dev;
• інспектор Firefox/Chrome;
• CrossBrowserTesting.com.

Налаштування CMS для мобайл-версії

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

Швидкість завантаження

Щоб ваш сайт був mobile-friendly, дбайте про швидкість завантаження ресурсу. Повільне завантаження сторінок призводить до високих показників відмов. Для оптимізації мобільної версії сайту потрібно звести кількість плагінів та обсяг коду до мінімуму для смартфонів. Для цього можна використати програму minifycode.com.

Видалення спливаючих вікон

Спливаючі вікна перекривають великий простір на мобільних пристроях. Часто такі вікна можуть лише дратувати користувача, оскільки є занадто нав’язливими. Тому краще видалити спливаючі вікна та натомість розглянути інший формат реклами (наприклад, гіперпосилання для отримання доходу від партнерських програм).

Пам’ятайте про планшети

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

Висновки та поради

Адаптація сайту до мобільних пристроїв відіграє значну роль у SEO-оптимізації, бо більшість пошукових запитів виконується зі смартфонів. Пошукові роботи використовують мобільний індекс під час обходу сайтів. Тому ви повинні переконатися, що робот Googlebot може проводити сканування сторінок вашого сайту.Адаптація сайту для смартфону – процес нелегкий. Якщо не хочете розбиратися у всіх нюансах, звертайтеся до фахівців агентства Ланет CLICK. Окрім мобільної адаптації, спеціалісти можуть провести аудит юзабіліті сайту, здійснити просування сайту на Вордпрес чи запустити ASO-просування тощо. З повним переліком послуг, які ми надаємо digital-агентство, можна ознайомитися на сайті.