За статистикою 52% веб-трафіку забезпечується смартфонами, 4% планшетами і 43% припадає на декстопи. При цьому частка перших зросла за 2017 року на 4%, а других і третіх — знизилася на 13% і 3% відповідно. Таким чином, сучасна подача контенту передбачає неодмінну орієнтацію на мобільного користувача. Що ж повинна враховувати мобільна версія сайту?
Про адаптивність сайту
Адаптивність сайту забезпечує коректне відображення сторінок з будь-яких девайсів. Адаптивний сайт підганяється під будь-які розміри і не виглядає перевантаженим на екранах телефонів, планшетів, десктопів, телевізорів. На таких сайтах добре продумана навігація, тому взаємодія між користувачем і ресурсом зручна і зрозуміла.
Показник відмов на адаптивних сайтах нижче завдяки легкій взаємодії. Неадаптивні сайти виглядають складно і перевантажено на різних девайсах, тому користувачеві легше перейти на інший ресурс.
Підвищуємо трафік сайту за рахунок мобільних користувачів
Поставте інтереси користувачів на перше місце, щоб створити зручний, зрозумілий і адаптивний сайт. Для цього потрібно:
Відмовитися від Flash-технологій
Flash-технології уповільнюють швидкість завантаження сайту, тому браузери поступово відмовляються від них. Досить часто власники інтернет-бізнесів навіть не здогадуються, що використання ресурсовитратних Flash-технологій знижують трафік сайту.
Адаптувати сайт до голосового пошуку
Взаємодіяти з пошуковими системами за допомогою голосу зручніше і швидше, тому метод стрімко набирає популярність. Якщо ви бажаєте, щоб ваш сайт ранжувався по голосовим запитам, використовуйте в контенті низько- і ультранизькочастотних ключові фрази. Проговорити запит легше і швидше, ніж написати, тому фрази для голосового пошуку відрізняються, і складаються з 5-6 слів.
До речі, тепер асесори (фахівці, які оцінюють результати пошукової видачі і сайти, що в ній присутні) будуть оцінювати сайти з пошуку за допомогою голосу або звуковий контент. Для деяких завдань з’явилися вимоги до наявності у оцінювача навушників і динаміків. Раніше такі завдання були експериментальними, тепер ця позначка видалена.
За статистикою, 65% користувачів у віці від 25-49 взаємодіють зі своїми пристроями хоча б раз в день.
Оцінити контент на сторінках
Текст на сторінках сайту повинен бути з підзаголовками, які пов’язані між собою за змістом. Важливо, щоб сторінка з контентом не обрізалася межами екрану і правильно взаємодіяла з зображеннями.
Користувач повинен легко знаходити необхідний розділ, навіть якщо він відкриває матеріал на 40 екранів. В такому випадку, потрібно додавати зміст в початок тексту, щоб користувачеві не довелося гортати, наприклад, 33 екрани до необхідної інформації. Ще можна приховувати частину контенту під хайди.
Оцінити зручність шляху покупця
Користувачеві простіше покинути ресурс, ніж розбиратися і «потрапляти» пальцем на маленькі кнопки «купити».
Важливо не тільки зробити сайт адаптивним, а й продумати шлях користувача. Інтерфейс сайту повинен плавно вести користувача від головного екрану сайту до досягнення мети. Якщо всі елементи сайту розташовані на своїх місцях, конверсія сайту виросте.
Позбутися від спливаючих вікон
Поп-апи виводять з рівноваги користувачів десктопів, а на мобільній версії сайту потрапити на маленький значок закриття ще складніше, тому ймовірність того, що користувач піде, висока.
Відмовитися від зображень у форматі PNG
Google рекомендує замінити PNG на WebP. З цим форматом нормально працюють всі браузери, а труднощі виникають тільки в Safari. Конвертувати зображення можна за допомогою сервісу Squoosh. Рекомендований розмір зображення 20 Кб.
*принцип роботи оптимізатору Squoosh
Після зміни формату зображень сторінки сайту будуть завантажуватися швидше і показник відмов знизиться.
Новий вид мобільного видачі
Для мобільної видачі додали фавікони. Значок Ad втратив рамку і виділяється жирним кольором, а фавікони тепер знаходяться перед назвою сайтів.
Так Google намагається поліпшити навігацію в пошуковій видачі, щоб користувачі краще орієнтувалися в результатах за допомогою іконок брендів.
Як перевірити адаптивність мобільної версії сайту?
Тепер ви розумієте важливість мобільної версії сайту. Але як зрозуміти, наскільки гарний ваш ресурс у цьому? Ви можете перевірити це самостійно за допомогою інструмента Перевірка оптимізація для мобільних, доступний у Google Search Console.
Працювати з ним дуже просто: вам достатньо вставити URL-адресу посилання на сторінку, яку ви хочете перевірити, у відповідне поле і натиснути на кнопку "Перевірити сторінку".
Сама перевірка займає близько 1-2 хвилин. Після закінчення перевірки ви побачите, чи оптимізовано вашу сторінку для мобільних пристроїв, і якщо ні — які помилки заважають цьому.
Якщо з відображенням сторінки на мобільних не все гаразд, у результатах перевірки ви можете виявити такі проблеми:
- Використовуються плагіни, що не підтримуються, наприклад, Flash. Вони несумісні з більшістю мобільних браузерів та помітно погіршують адаптивність вашого сайту. Краще використовувати більш сучасні технології, які мають широкі можливості.
- Контент ширший за екран. У такому випадку з'являється горизонтальна лінія прокручування сторінки, що значно погіршує сприйняття контенту. Така помилка виникає внаслідок помилки позиціонування елементів у CSS стилях, а також у випадках, коли зображення не масштабуються.
- Не встановлено значення метатегу viewport і Немає значення device-width у метатезі viewport. Viewport дає сигнал браузеру про правильну зміну елементів на сторінці під розміри екрана пристрою. Правильно налаштувавши область відображення за допомогою цього тегу, ви досягнете коректного відображення сторінок вашого сайту на різних пристроях. Якщо в тезі viewport вказано фіксовану ширину, адаптація сторінки під розміри екрана буде неможливою, тому налаштуйте масштабування в метатезі viewport за допомогою значення device-width.
- Дрібний шрифт. Ця помилка свідчить про нерозбірливість контенту на сторінці мобільної версії — користувачам доведеться масштабувати сторінку, щоб прочитати текст на ній.
- Близько розташовані інтерактивні елементи, наприклад кнопки навігації. У такому разі користувачі будуть зачіпати інші пункти меню або інші кнопки під час спроб натиснути потрібну в мобільній версії сторінки.
Ви також можете побачити повідомлення про помилку, якщо інструмент не зможе отримати доступ до сторінки - таке можливо, якщо ваш сайт має якісь несправності або при нестабільному підключенні до Інтернету. У такому випадку слід повторити перевірку після усунення всіх несправностей.
Як бачите, інструмент дає вичерпну інформацію про помилки, які заважають коректному відображенню тієї чи іншої сторінки на мобільних пристроях.
Щоб дізнатися, як справи з відображенням всього сайту, вам потрібно скористатися Google Search Console. Всю необхідну інформацію ви знайдете у звіті "Зручність перегляду на мобільних пристроях".
Після виправлення помилок необхідно перевірити їх та оновити дані в Google. Для цього на сторінці з відомостями про помилку на сторінці слід натиснути кнопку. Якщо все добре – помилка більше не з'явиться, а виправлена сторінка правильно відображатиметься в мобільній версії.
Замість висновків
Алгоритм Mobile First впливає на пошукову видачу не тільки під час мобільного серфінгу, але і при використанні десктопних пристроїв. Основна і мобільна версії сайту ранжуються по одному індексу, тому якщо ресурс не адаптован до мобільних пристроїв, позиції сайту можуть просісти.
Якщо користувач переходить на сайт, не знаходить корисну інформацію і повертається до пошукової видачі, Google сприймає це як негативний сигнал і знижує позиції сайту при ранжуванні.
Чек-лист вимог до мобільної версії сайту
1. Форма організації контенту
Слід мати на увазі, що людина, що переглядає сторінки смартфона, часто робить це в незручних для цього умовах — в транспорті, на вулиці, в громадських місцях. Це пред’являє таку важливу вимогу до форми подачі контенту, як підвищену зручність сприйняття інформації: досить великий розмір шрифту, великі елементи навігації, кнопки швидкого зв’язку, зрозуміла організація матеріалу.
2. Мінімізація текстового контенту
Потрібно пам’ятати про те, що лонгріди — не найкращий варіант для утримання уваги в умовах, коли людині читати незручно. Крім правильної візуальної організації контенту, надзвичайно важливо мінімізувати обсяг інформації, що подається: тільки найважливіше, тільки те, що представляє значення для користувача. Якщо ж є необхідність в розміщенні об’ємного текстового контенту, то його доцільно розділяти на кілька фрагментів.
3. Обрізання графіки та інших важких елементів
Сайти з адаптивним дизайном, а також з динамічним виведенням змісту віддають мобільним користувачам у точності той же контент, що і використовують десктопи. При використанні окремого мобільного варіанту сайту вимога до мінімізації контенту поширюються в тому числі і на нетекстової інформацію. Обмеження поширюються на графіку, flash-об’єкти, відео, які з’їдають трафік і завантажують обчислювальну потужність мобільного пристрою.
4. Лінки на основний сайт
При використанні мобільної версії сайту важливо ставити посилання на основний ресурс. Для об’ємного контенту це хороший варіант не перевантажувати сторінки, при цьому надаючи користувачам можливість переходу до повного змісту.
5. Не бути нав’язливою
У мобільній версії не рекомендується використовувати нав’язливі способи взаємодії з користувачами. Спливаючі вікна, докучливі помічники, різні засоби стимулювання продажів — все це на тлі вимушеного мінімалізму дратує і не додає позитивного ставлення до ресурсу. Замість цього слід раціонально організувати заклик до дії і розмістити відповідні кнопки в одному добре помітному та інтуїтивно зрозумілому місці.
6. Менше скролінгу
Незважаючи на те, що скролл на смартфоні простіше, ніж сидячи за несенсорним десктопом, невелика діагональ екрану накладає певні обмеження на комфорт прокрутки для користувача. Десятикратні рухи пальцем все ж не дуже зручно, тому логічно розміщувати все найважливіше якомога вище на сторінці. Контактну інформацію і заклик до дії доцільно розташовувати у верхній частині екрану.
Обмеження на контент, який отримують користувачі мобільних пристроїв, пов’язані з особливостями сприйняття інформації на невеликому екрані, з обмеженою обчислювальною потужністю смартфонів, а також з тим, що в деяких випадках мобільний інтернет залишає бажати кращого.
Розробляючи сайт, не слід забувати, що, крім мобільної урізаної версії, необхідно організувати роботу сайту за принципом адаптивного дизайну або динамічного показу контенту користувачам, що знімає ряд описаних вище обмежень.
