- Інструменти виявлення помилок, що виникають при перегляді сайту на мобільних пристроях
- Mobile-Friendly Test
- Responsive.is
- Google Chrome
- помилки
- Область перегляду не настроєна
- Маленький розмір шрифту
- Інтерактивні елементи розташовані надто близько
- Використання Flash
- види сайтів
- адаптивний дизайн
- динамічний показ
- Піддомен з мобільною версією
Завдання мобільного SEO - поліпшення видимості сайту в мобільних версіях пошукових систем, а отже, збільшення мобільного трафіку. Мобільний SEO часто перетинається з поняттям mobile friendly , Введеним фахівцями Google, яке означає адаптацію сайту для мобільних пристроїв. Вони тісно взаємопов'язані: без одного не може бути іншого.
Якщо ви дбаєте про ефективність свого проекту, є 3 основних причини адаптувати сайт.
Зміна позицій нашого порталу auto-offer.ru в Google після адаптації - 57% позицій покращився.
- Зниження показника відмов.
Після адаптації сайту показник відмов знизився на 4,4%.
- Збільшення конверсії.
Конверсія з мобільного трафіку зросла на 1%.
Інструменти виявлення помилок, що виникають при перегляді сайту на мобільних пристроях
Search Console
Виявити помилки, що виникають при перегляді сайту на смартфонах і планшетах, досить просто: вся необхідна інформація є в Search Console (Колишній Google Webmaster Tools): розділ «Пошуковий трафік», пункт «Зручність перегляду на мобільних пристроях».
Цей спосіб можливий тільки для сайтів, підтверджених в Search Console. Підтверджуючи сайт, ви отримуєте вичерпні рекомендації по кожній проблемі і список сторінок, на яких ця проблема зустрічається.
Mobile-Friendly Test
Інструментом від Google Mobile-Friendly Test можна перевірити будь-який сайт, не додаючи його в Search Console.
Позитивний результат тесту ви можете бачити на скріншоті, а при негативному інструмент дає загальні рекомендації щодо усунення знайдених помилок і показує сайт так, як його б бачив пошуковий робот Google.
Responsive.is
Відрізняється від інших тим, що тут можна подивитися, як виглядає ваш сайт на різних типах пристроїв: монітор, планшет в горизонтальному і вертикальному положеннях і смартфон в таких же положеннях.
В поле для url потрібно вставляти тільки ім'я домена (без http: // і https: //).
Google Chrome
Для користувачів Google Chrome існує зручний інструмент для перевірки адаптації, вбудований в браузер. Натискаємо F12 на піддослідному сайті, на що відкрилася внизу панелі інструментів зліва натискаємо на значок смартфона. Тепер робоча область браузера масштабується під вбрання мобільний пристрій. Вгорі цього блоку ви можете вибрати одне з декількох популярних пристроїв і його розташування (вертикальне чи горизонтальне). А потягнувши за край вікна, можна подивитися, як сайт адаптується під даний розмір.
помилки
У більшості випадків на неадаптованих сайтах з'являються перші 3 помилки з скріншоту.
Область перегляду не настроєна
Дана помилка з'являється, коли сторінка сайту не підлаштовується під розмір вікна мобільного браузера. У підсумку ми можемо бачити обрізаний текст, картинки і блоки сайту.
Одне з рішень: сторінки повинні містити в контейнері head-тег viewport. Він повідомляє браузеру, як потрібно контролювати розмір і масштаб сторінки.
Рекомендації Google по налаштуванню області перегляду (Блок «Керівництва»).
Маленький розмір шрифту
Ця помилка чревата не тільки тим, що деякі тексти неможливо прочитати без масштабування, а й тим, що перейти по посиланню в меню або тексті практично неможливо, а це сильно ускладнює навігацію по сайту. Рекомендується в якості базового розміру шрифту задавати 16 пікселів.
Рекомендації Google по налаштуванню шрифтів .
Інтерактивні елементи розташовані надто близько
Коли посилання, поля форм, кнопки та інші клікабельні елементи сайту знаходяться на близькій відстані один від одного, то прицільно клікнути по ним пальцем на порядок складніше, ніж курсором миші. Тому розташовувати такі елементи потрібно з інтервалом близько 10 мм один від одного (середня ширина подушечки пальця людини).
Рекомендації Google по розташуванню інтерактивних елементів .
Використання Flash
Більшість мобільних браузерів не підтримує відтворення Flash-контенту. В якості альтернативи можна використовувати HTML-5.
види сайтів
Розрізняють 3 основних види сайтів з точки зору верстки, коректно відображаються на мобільних пристроях: адаптивний дизайн, динамічний показ і окремий домен з мобільною версією.
адаптивний дизайн
Google рекомендує використовувати саме цей варіант, тому що при заході на сайт з адаптивним дизайном з будь-якого пристрою (не важливо, з ПК або смартфона) ми отримуємо від сервера один і той же відповідь, один і той же HTML-код, а елементи сайту трансформуються за допомогою стилів CSS. Це дозволяє уникнути помилок в індексуванні сайту при просуванні, а незмінний URL дозволяє зручніше ділитися контентом.
динамічний показ
При цьому варіанті налаштовується визначення пристрою, якi мають до сайту, на рівні сервера, і в залежності від того, з якого пристрій зайшов користувач, сервера віддається різний HTML-код: для користувача, який зайшов зі смартфона, показується сайт з одним HTML-кодом, а для користувача, який зайшов з ПК - з іншим.
Піддомен з мобільною версією
При такому варіанті створюється окремий сайт для мобільної версії: m.site.ru, mobile.site.ru і т. Д. Тут треба бути обережним, так як піддомен має ту ж структуру і майже той же контент (зазвичай, спрощений), тому за замовчуванням створюються сторінки з однаковим вмістом, т. е. дублі, які негативно позначаються на пошуковому просуванні. Необхідно правильно розставити теги rel = "canonical" і rel = "alternate" на основному і мобільному домені, щоб Google правильно визначив, де оригінал сторінки, а де дубль.
Часто буває, що користувач, не встигнувши дочитати цікаву статтю на смартфоні, зберігає її в закладках. А коли відкриває її на ПК, відкривається та ж мобільна версія сайту, і переадресації на основний сайт не відбувається. Щоб цього уникнути, робіть в подібних випадках редирект на основний сайт, визначаючи пристрій користувача, або просто використовуйте адапатівний дизайн.
Крім того, реалізувати мобільний сайт можна і іншими способами. Наприклад, в папці сайту site.ru/m/ або для кожного пристрою зробити свій дизайн. Так зручніше контролювати конверсію сайту в цільовому сегменті: створюючи свій дизайн для кожної версії сайту, легше підлаштуватися під аудиторію.
Якщо під час перевірок ви виявили деякі помилки або некоректне відображення в мобільному браузері, необхідно, щоб верстальник налаштував відображення у всіх основних форматах, в іншому випадку потенційні клієнти з мобільного трафіку так і залишаться тільки потенційними.
Оптимальний варіант - проектувати адаптацію сайту ще на етапі розробки. Це заощадить вам кошти на додаткову роботу верстальника і посилить динаміку розвитку проекту як в області конверсій, так і в галузі пошукової оптимізації.
Андрій Кузнєцов для http://www.cossa.ru/