Чек-лист для оптимізації мобільного сайту
Про те, що кожен поважаючий себе сайт повинен бути адаптований під смартфони та планшети, зараз не говорить тільки ледачий. До кінця минулого року частка мобільного трафіку досягла 62% і прогнозується її зростання (у світі в 2017 році до 75%). Погодьтеся, ігнорувати такий обсяг трафіку стає просто неможливо. А з запуском Mobile first від Гугл і Владивостока від Яндекса – ще й небезпечно для позицій сайту у видачі.
Але мало просто створити мобільну версію сайту або адаптувати під мобільні поточний сайт. Потрібно не забути про його оптимізації, так як для мобільних є свої вимоги і нюанси, яких немає для десктопних версій сайтів.
З цієї причини сьогодні в меню в блозі – чек-лист з оптимізації мобільного сайту. Можна відразу завантажити в форматі pdf, якщо що.
Трохи теорії про мобільні сайти
(можна пропустити та перейти до чек-листа)
Буквально в декількох словах про 3 типи мобільності:
1. Мобільна версія на піддомені. По суті це окремий варіант сайту на окремому піддомені (як правило, m.site.ru).
Приклад: Сайт vk.com і його мобільна версія m.vk.com
2. Динамічний контент. Адреса для десктопної і мобільного версій однакова але вміст у них відрізняється. Зазвичай в мобільній версії показують менше другорядного контенту (слайдерів, реклами, додаткових текстів).
Приклад: Сайт ozon.ru – на мобільних він завантажується так само за адресою ozon.ru, але контент відрізняється, наприклад, на головній сторінці немає блоку з популярними товарами:
3. Адаптивна верстка. Адреса змінюється, так і контент залишається однаковим. Змінюється тільки зовнішнє відображення контенту – всі блоки на сайті як би «підлаштовуються» під ширину того пристрою, на якому відкрито сайт (меню згортаються до «гамбургерів», блоки з декількох в ряд шикуються один за одним і т. д.).
Приклад: Сайт mvideo.ru
Я не буду розмірковувати про те, який з варіантів краще, – це не тема даної статті, та й багато чого залежить від типу сайту і цілей мобільної версії. Хоча Гугл рекомендує адаптивну верстку.
Нижче у чек-листі деякі пункти будуть відноситися тільки до одного з варіантів мобільності, тому їх короткий розбір і з’явився тут.
Оптимізація мобільного сайту
Перед тим, як оптимізувати мобільну версію свого сайту, проведіть оптимізацію основного сайту. Адже все, що справедливо для десктопної версії (теги title і description, заголовки, оптимізовані тексти, перелінковка, микроразметка та інше), в рівній мірі працює і для мобільної версії.
Якщо мобільна версія сайту «живе» на окремому піддомені і розробляється окремо, значить, для неї потрібно повторити всі ті заходи з оптимізації, які були зроблені для основної версії, але з упором на більш короткі запити (пам’ятайте, що набирати текст на телефоні складніше, ніж на звичайній клавіатурі) і пошукові підказки саме з мобільного пошуку.
Далі я буду говорити тільки про тих пунктах, які відносяться до мобільної версії. Отже, приступимо:
Чек-лист з оптимізації мобільного сайту
Почнемо з технічної частини:
1. Robots.txt
Переконайтеся, що файл robots.txt не закритий доступ до картинок, js і css файлів для пошукових роботів. З цього питання у нас є окрема стаття, тут повторюватися не буду.
2. Швидкість завантаження
Перевірте, що швидкість завантаження по PageSpeed Insights не нижче 70 на вкладці «Для мобільних»:
Краще, звичайно, щоб швидкість була вище 85 (а в ідеалі, близько до 100), хоча така ситуація поки досягається рідко:
Але прагнути до неї потрібно. Під виставленою оцінкою Гугл дає рекомендації щодо поліпшення швидкості завантаження – орієнтуйтеся на них.
3. Тег viewport (для сайтів з адаптивною версткою)
Перевірте, що в коді сторінок прописаний мета-тег viewport:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Ця запис говорить браузеру, що потрібно встановити ширину вікна рівній ширині екрану пристрою і ніяк не змінювати масштаб сторінки.
Якщо ж viewport не зазначено, то на мобільному буде показана сторінка як для комп’ютера, тільки «втиснута» в екран мобільника. Працювати з нею буде дуже незручно.
Подробиці про viewport дивіться у довідці Гугла.
4. HTTP-заголовок Vary (для динамічного контенту)
Якщо обидві версії вашого сайту (і десктопна, і мобільний) доступні за однією адресою, але сайт видає різний контент (різний html-код) в залежності від того, з якого пристрою йде запит, то потрібно повідомити пошуковим роботам, що на сайті використовується динамічний контент.
Зробити це можна за допомогою HTTP-заголовка Vary зі значенням User-Agent, виглядає він так:
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
У такому разі пошуковий робот Google для смартфонів буде сканувати саме контент мобільної версії (у Яндекса поки немає окремого робота для мобільного пошуку).
Подивитися HTTP-заголовки, які віддає ваш сайт, можна з допомогою інструменту Перевірка відповіді сервера в Яндекс.Вебмастере. Детальніше про Vary так само написано в довідці.
5. Переадресація (для мобільної версії на піддомені)
Перевірте, що налаштована і працює коректно переадресація з повної версії сайту на мобільний (з site.ru на m.site.ru) при перегляді з мобільних пристроїв.
Причому, з конкретних сторінок звичайного сайту користувач повинен спрямовуватися на аналогічні сторінки мобільного сайту.
Тобто ось так буде правильно:
https://vk.com/feed —> https://m.vk.com/feed
https://avito.ru/irkutsk/transport —> https://m.avito.ru/irkutsk/transport
А ось так – ні:
https://vk.com/feed —> https://m.vk.com/
https://vk.com/video —> https://m.vk.com/apps
https://avito.ru/irkutsk/transport —> https://avito.ru/moskva/transport
6. Тег <link rel=”alternate”> (для мобільної версії на піддомені)
Перевірте, що в коді сторінок основного сайту (в блоці <head>) прописані теги <link rel=”alternate”> з адресами відповідних сторінок мобільного сайту.
Ось приклад сторінки https://avito.ru/irkutsk/transport:
<link rel=”alternate” media=”screen and only (max-width: 640px)” href=”https://m.avito.ru/irkutsk/transport”>
Це дозволить уникнути дублювання контенту, адже інакше пошукові роботи будуть сприймати повну і мобільну версію як два окремих сайту (оскільки у них різні адреси).
Тепер перейдемо до візуальної складової:
7. Favicon для мобільних
Зробіть і завантажте на сайт окремий фавикон для мобільних пристроїв. В коді сайту він прописується поряд із звичайним favicon.ico в блоці <head>. Рекомендують робити фавикон в 3-10 різних розмірах, наприклад, як на сайті М. Відео:
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”http://static.mvideo.ru/assets/img/ico/apple-touch-icon-114×114-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”http://static.mvideo.ru/assets/img/ico/apple-touch-icon-72×72-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” href=”http://static.mvideo.ru/assets/img/ico/apple-touch-icon-57×57-precomposed.png”>
Але буде цілком достатньо і одного розміру (на 114 114 пікселів):
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon-precomposed.png”/>
Цей фавикон показується в Обраному (для деяких пристроїв), в Історії переглядів:
І на робочому столі телефону, якщо ваш сайт зберегли на головний екран (дивіться 3 іконки у другому ряду):
Зверніть увагу на не дуже чіткий фавикон сайту Пегас Туристик – для нього немає окремого файлу, використовується звичайний favicon.ico.
8. Контент під ширину екрану
Весь вміст сайту має входити по ширині в екран пристрою. Внизу не повинно бути горизонтальної прокрутки, праворуч – порожнього простору:
9. Розмір шрифту
Перевірте, що всі тексти на сайті зручно читати з мобільних – що немає ні занадто дрібного шрифту, ні занадто великого:
10. Розмір кнопок
Перевірте, що у всі інтерактивні елементи – елементи, на які можна клікнути – легко потрапити пальцем (і бажано чоловічим, а не дитячим):
11. Відстань між посиланнями
Перевірте, що окремі посилання і кнопки розташовані дуже близько один до одного, т. к. довгі спроби потрапити за потрібною ссылке настрою точно не покращують.
12. Зображення меншого розміру (для динамічного контенту)
Якщо ваш сайт видає окремий html-код при перегляді з мобільного пристрою, то можна в ньому вказати посилання на зменшені копії зображень. Навряд чи на телефоні сильно потрібна фотографія товару шириною 1400 пікселів, цілком вистачить і картинки в 800 пікселів – а це економія у вазі картинки, а отже, і швидкості завантаження сайту.
13. Прибрати Flash
Технологія Flash не підтримується мобільними пристроями. Та й сучасні десктопні браузери поступово відмовляються від підтримки Flash. Тому не використовуйте її. Для вставки відеороликів використовуйте теги HTML5, ось тут є докладна інструкція.
14. Приховати зайвий контент
Пам’ятайте, що екран мобільного пристрою в рази менше екрану комп’ютера, тому намагайтеся по можливості скоротити обсяг контенту в мобільній версії. Наприклад, в мобільній версії habrahabr.ru не виводяться превью-картинки до статей і короткі описи, що дозволяє вмістити в один екран мобільного 3-4 статті зі списку.
15. Менше реклами
Реклама дратує нас і на звичайному комп’ютері, але там ми звикли не помічати її – досить просто не дивитися в правий блок. На телефоні ігнорувати рекламу складніше, вона з’являється в середині контенту, тому і викликає більше негативу.
Повністю відмовлятися від реклами я, звичайно, не закликаю, але скоротити число рекламних оголошень цілком можливо. Приклад все той же habrahabr, у повній версії якого в правому блоці штук 7-8 рекламних оголошень, а в мобільній – всього одне.
16. Не використовувати pop-up вікна
Гугл негативно ставиться до сторінок з спливаючими вікнами, закривають більше половини основного вмісту сторінки, і позиції таких сторінок можуть бути знижені. Подробиці та приклади допустимих поп-апів тут. Якщо спливаючі вікна вашого сайту потрапляють у число заборонених, не показуйте їх на мобільних (на десктопах можна залишити).
У Google є хороший інструмент для перевірки оптимізації для мобільних – він дасть інформацію про візуальної частини оптимізації (і деяких технічних параметрах).
І наостанок про зручність для користувача (UX):
17. Зручна навігація
Перевірте, що всі необхідні пункти меню доступні в мобільній версії (включаючи випадають підміню). І не забудьте про «хлібні крихти» – вони допоможуть відвідувачу зрозуміти, в якому розділі сайту він знаходиться.
Приклад, де з мобільного немає можливості відкрити другий рівень підменю:
А тут все добре, підменю відкриваються (аж до третього рівня вкладеності), хлібні крихти є:
18. Посилання з номерів телефонів
Поставте посилання з номерів телефонів для швидкого набору їх з мобільних пристроїв. Робиться це так:
<a href=”tel:88002007775″>8-800-200-777-5</a>
Після цього користувач просто клацає по номеру телефону на вашому сайті і відразу ж переходить до дзвінка:
19. Облік розташування
На багатьох мобільних пристроях включена передача геоданих (інформації про місцезнаходження пристрою).
Ви можете використовувати цю інформацію на своєму мобільному сайті, наприклад, при заповненні адреси доставки або при пошуку об’єктів неподалік, як це зроблено на сайті booking.com:
20. Посилання «Перейти на повну версію сайту» (для динамічного контенту, для мобільної версії на піддомені)
Залиште користувачам мобільних пристроїв можливість подивитися повну версію сайту. Наприклад, на моєму планшеті для деяких сайтів відкривається мобільна версія, але розмір екрану і так досить великий, тому я можу спокійно дивитися на ньому повну версію. Посилання «Перейти на повну версію» допомагає мені в цьому:
Підсумок
Згадайте, як намагалися оформити термінове замовлення з телефону, коли комп’ютера не було поруч, і не могли потрапити на кнопку «Відправити замовлення», а потім виявилося, що ви замовили не той розмір, т. к. вибір розміру залишився за кордоном екрану. Згадайте і постарайтеся вберегти відвідувачів свого сайту від таких неприємних ситуацій.
Адже якщо ви будете ігнорувати мобільних користувачів, то і вони з легкістю проігнорують ваш сайт.
Зробивши сайт зручним для роботи на різних пристроях і комп’ютерах і планшетах, і на смартфонах, ви отримаєте не просто додаткову аудиторію, а вдячну додаткову аудиторію.
P. S. Якщо є що ще підказати по оптимізації мобільних сайтів – пишіть у коментарях.
