Вебдизайн Блог

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

Види мобільних сайтів

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

• мобільна версія з піддоменом. Йдеться про окремий сайт, що має власний співзвучний піддомен;
• сайти з динамічним контентом. Десктопна і мобільна версії сайту матимуть однакову адресу, проте різне наповнення. Мобільні версії позбавлені «порожнього» контенту, такого як реклама, непотрібні тести, різноманітні слайдери та інші елементи, що уповільнюють завантаження і гальмують роботу сторінок;
• адаптивні сайти. Контент і адреса така ж, як і у десктопної версії. Якщо користувач відвідує ресурс з мобільного пристрою, то відбувається адаптація під конкретні формати: перебудова блоків, звуження слайдерів, зміна меню, інше.

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

З чого почати оптимізацію мобільного сайту?

Як би дивно це не звучало, але оптимізацію необхідно починати з поліпшення десктопної версії:

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

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

Robots.txt

Налаштування розглянутого файлу виконується індивідуально для кожного сайту, нерідко для цієї роботи використовується Google Mobile-friendly. Файл допомагає пошуковим роботам зрозуміти, які сторінки варто сканувати. Він захищає від сканування сторінки, що містять особисту інформацію про користувачів, дзеркала та інші, що не відповідають індексуванню. Неправильне налаштування спричинить помилки в обробці даних. У першу чергу варто перевірити, чи не приховує файл доступ до зображень, а також js і css.

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

У рамках адаптації сайту під мобільні пристрої варто провести перевірку швидкості завантаження сторінок. Повільне завантаження може відштовхнути відвідувачів, адже вони залишають сайт, якщо сторінка не відобразилася через 3-5 секунд після виконання переходу. Для вирішення цього завдання можна використовувати інструмент PceSpeed Insights від Google. Після виконання перевірки ви можете побачити такі оцінки:

• 90-100 балів - відмінний результат;
• 50-90 балів - середній результат;
• менше 50 балів - негативний результат, який свідчить про те, що сторінки завантажуються досить повільно.

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

Теґ viewport

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

Заголовок HTTP Vary

Ця рекомендація орієнтована на динамічний контент, на наявність якого варто вказати пошуковим роботам. Зробити це можна за допомогою HTTP-заголовка Vary. Пошукові роботи Google будуть проводити сканування контенту для мобільних пристроїв, на жаль, у системи «Яндекс» таких роботів поки немає. Перегляд HTTP-заголовки виконується за допомогою функції «Перевірка відповіді сервера», яку можна знайти в «Яндекс.Вебмайстер».

Налаштування переадресації

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

Тег alternate

Тег подається у формі < link rel = «» alternate «»/>, він необхідний для того, щоб пошукові роботи могли визначити не тільки мобільну версію, а й мовні варіанти. Після цього користувачеві пропонується оптимальний вид сторінки, що залежить від умов переходу. Під час налаштування необхідно пам'ятати, що URL-сторінок слід вказати повністю і разом з протоколами (http, https).

Наприклад, є сайт https://nnm.co.ua, в цьому випадку тег виглядатиме так:

<link rel=""alternate"" media=""only screen and (max-width: 640px)"" href="/" https://nnm.co.ua">;

Використання Apple touch icon

Apple-touch-icon. Png - зображення, яке буде використовуватися як закладка на домашньому екрані мобільних пристроїв на операційній системі iOS (на macOS не поширюється).

Адаптація контенту до ширини екрану

Контент, розміщений на сторінці, повинен адаптуватися під ширину екрану. Користувач не повинен зменшувати або збільшувати сторінку, спостерігати порожній простір з боків або горизонтальну прокрутку. Для оцінки цього параметра можна використовувати інструмент Google mobile-friendly. Після перевірки з'явиться напис, який свідчить про те, що сторінка оптимізована або не оптимізована під мобільні пристрої. На базі отриманої інформації потрібно буде приймати рішення і виправляти помилки, використовуючи підказки сервісу.

Шрифт

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

Кнопки

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

Посилання і відстань між ними

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

Мініатюрні зображення

Зменшені картинки використовуються при оптимізації мобільних сайтів з динамічним контентом, що мають окремий html-код. У цьому випадку обов'язково потрібно прописати посилання на зменшені варіанти зображень, інакше картинки будуть відображатися некоректно. Користувач точно не зрадіє, якщо на екрані мобільного пристрою з'явиться розтягнуте зображення, що має ширину 1800 пікселів. Для мобільної версії з динамічним контентом достатньо картинки шириною 500-800 пікселів, яка має меншу вагу і не спричинить повільне завантаження сторінки.

Вилучення Flash

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

Усунення зайвого контенту

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

Більше користі, менше реклами

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

Відмова від pop-up вікон

Компанія Google не надто скаржить спливаючі вікна, які заважають переглядати контент і забезпечують нецільові переходи на сайт рекламодавця. У цей же час величезні банери, що розвертаються на весь екран, здатні вивести з себе саму врівноважену людину. Такий формат можна залишити в десктопній версії, але не в мобільній (попередньо вивчіть список дозволених pop-up). Для перевірки оптимізації сайту під мобільні пристрої доцільно використовувати сервіс search.google.com, який допоможе зібрати інформацію і про технічні, і про візуальні аспекти.

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

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

• проста і зручна навігація. Всі пункти меню повинні добре переглядатися, а також бути доступними в мобільній версії сайту (в тому числі і «хлібні крихти»). Зручна навігація допоможе юзеру добре орієнтуватися на сайті і швидко знаходити те, що його цікавить;
• швидкий набір. Необхідно додати посилання з номерів телефонів, завдяки яким клієнт зможе здійснити набір без помилок, роблячи кілька кліків. Така дрібниця може мати позитивний вплив на зростання кількості звернень, особливо якщо мова йде про комерційний ресурс;
• місце розташування. Багато користувачів не вимикають на смартфонах і планшетах функцію, що дозволяє визначити місце розташування. Наявність обліку місця розташування полегшить процес оформлення замовлення, пошуку найближчого складу або магазину, вибору способу доставки. Звичайно, попередньо користувач дає дозвіл на те, щоб ресурс отримав доступ до даних про його локацію;
• можливість перейти на десктопну версію, що актуально для сайтів на піддомені. Можливо, юзер захоче працювати не з мобільною, а з десктопною версією - це його право, яке не можна відбирати. Обов'язково додайте посилання, за допомогою якого користувач зможе здійснювати переходи між мобільним і десктопним форматами.

Чи можна замість мобільної версії використовувати додаток?

Деякі компанії відмовляються від мобільних версій сайту на користь додатків, орієнтованих на операційні системи Windows Phone, Android, iOS та інші. Це зручно, адже додаток забезпечує коректну роботу, може бути наділено унікальними функціями, які в десктопі реалізувати неможливо. Однак додатки потребують інвестицій, адже кожна операційна система для мобільних пристроїв має індивідуальні технічні характеристики.

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

Насамкінець

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