SMM-агентство SMMashing Media
14 октября 2015, 15:35
11906
5

Мобильная адаптация как инструмент SEO

Задача мобильного 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 позволяет удобнее делиться контентом.

Динамический показ

При этом варианте настраивается определение устройства, обращающегося к сайту, на уровне сервера, и в зависимости от того, с какого устройство зашел пользователь, серверу отдается разный HTML-код: для пользователя, зашедшего со смартфона, показывается сайт с одним HTML-кодом, а для пользователя, зашедшего с ПК — с другим.

Поддомен с мобильной версией

При таком варианте создается отдельный сайт для мобильной версии: m.site.ru, mobile.site.ru и т. д. Здесь надо быть осторожным, так как поддомен имеет ту же структуру и почти тот же контент (обычно, упрощенный), поэтому по умолчанию создаются страницы с одинаковым содержимым, т. е. дубли, которые негативно сказываются на поисковом продвижении. Необходимо правильно расставить теги rel="canonical" и rel="alternate" на основном и мобильном домене, чтобы Google верно определил, где оригинал страницы, а где дубль.

Часто бывает, что пользователь, не успев дочитать интересную статью на смартфоне, сохраняет ее в закладках. А когда открывает ее на ПК, открывается та же мобильная версия сайта, и переадресации на основной сайт не происходит. Чтобы этого избежать, делайте в подобных случаях редирект на основной сайт, определяя устройство пользователя, или просто используйте адапативный дизайн.

Кроме того, реализовать мобильный сайт можно и другими способами. Например, в подпапке сайта site.ru/m/ или для каждого устройства сделать свой дизайн. Так удобнее контролировать конверсию сайта в целевом сегменте: создавая свой дизайн для каждой версии сайта, легче подстроиться под аудиторию.

Если при проверках вы выявили некоторые ошибки или некорректное отображение в мобильном браузере, необходимо, чтобы верстальщик настроил отображение во всех основных форматах, в противном случае потенциальные клиенты из мобильного трафика так и останутся только потенциальными.

Оптимальный вариант — проектировать адаптацию сайта еще на этапе разработки. Это сэкономит вам средства на дополнительной работе верстальщика и усилит динамику развития проекта как в области конверсий, так и в области поисковой оптимизации.


Источник картинки на тизере: Depositphotos

✉️ Самое интересное шлём по почте, не чаще двух раз в неделю.

Не пропустите!

18120
Искусственный интеллект в маркетинге: начало новой эпохи
Паразайт — отложенный постинг, аналитика и личные сообщения в Инстаграме.
8175
В украинском Facebook разгорается скандал рестораторов. Следим за работой с репутацией
4880
Почему стоит работать с микроблогерами, а не миллионниками
3562
Digital-стратегия и Customer Journey: зачем и как мы объединяем эти понятия
6294
«Когда тебе приходит сотое за час письмо с заголовком „Ты что, дебил?“, начинаешь постигать дзен». И...
4441
Нам весело, а им больно. Косяки в рекламе крупных брендов
7519
Саморазвитие от ленивого: почему полезно плыть по течению и ничего не планировать
3727
Кейс. Как мы продавали сумки оптом в Facebook и Instagram
4269
Ад и рай дизайнера-интроверта. Как жить в мире экстравертов
3860
Работодателям. Ошибки в подборе сотрудников
3967
4 тренда, которые формируют маркетинг будущего: ключевые тезисы с конференции ENGAGE IAB UK

Комментарии:

Хороший паблик. Вот только не всегда иммуляция устройства через хром показывает аналогично как оно отображает на реальном устройстве. Т.е. наблюдали расхождения.
Ответить
- +1 +
Расхождения бывают, да. Поэтому в статье для проверки адаптивности приведено несколько способов.
И, кстати, не "иммуляция", а "эмуляция" :)
Ответить
- 0 +
Олег Вайнер #
17.10.2015 20:27
Коллеги, забыли написать про А/В тестирование адаптивного дизайна. Это самый важный момент. Как показывает опыт, разработать дизайн, адаптивный под устройства еще не значит, что конверсия выросла сразу же. Без тестирования не обойтись.
Ответить
- +1 +
Елена Безман #
19.10.2015 11:09
Олег, мы не то что бы забыли, мы специально не написали, потому что это - отдельная большая тема, выходящая за рамки только SEO: о пользовательских факторах можно поэму написать. Слезами. :)
Ответить
Ответить?
Реклама

Чем живёт digital.
Главное — в рассылке:




Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой