Как выжить в эпоху mobile-first index? Пошаговое руководство

Сейчас для каждого из вас mobile-first index не станет новостью. Эта тема уже наделала шума как только в 2016 году Google анонсировал начало тестирования данного поискового алгоритма.

Его реализация была вопросом времени. Уже тогда многие начали работать над мобильным представлением своих сайтов. Однако, многие ≠ все.

Более того, некоторые, услышав о данном алгоритме, начали массово делать мобильную версию сайта на поддомене, решив, что это святая святых для успешного ранжирования и никак иначе.

Давайте в этой статье мы подробно от А до Я расскажем о mobile-first index и о том, как вашему сайту “чувствовать себя комфортно” в нем:-)

Сначала, посмотрим на график ниже. Он отображает процент трафика на сайтах с мобильных устройств во всем мире (с 1-го квартала 2015 года до 1-го квартала 2018 года).

О чем эти данные говорят? Как минимум о том, что пользователей с мобильных устройств не меньше десктопных, а у некоторых сайтов даже больше.

Динамика трафика на сайтах с мобильных устройств во всем мире

Теперь возьмем для примера один из проектов и посмотрим по Google Analytics долю мобильного трафика:

Как видите по графикам, рост аудитории мобильного интернета имеет тенденцию постепенного роста. И поверьте, эта статистика будет расти.

Что сделал Google, учитывая всё выше обозначенное? С 1 июля 2018 Google запустил алгоритм mobile-first index. Суть его в том, что в поисковой выдаче приоритет будет отдаваться сайтам, адаптированным под мобильные устройства, чтобы соответствовать потребностям большинства его пользователей.

Если раньше Google использовал десктопные версии страниц сайтов для сканирования и ранжирования, то теперь он будет делать акцент на мобильную адаптированность сайта.

Что же такое mobile-first index?

Первое, что нужно сразу прояснить: Google не создаёт отдельный индекс для мобильного поиска. Он один для всех версий сайта. Изменился лишь юзерагент с десктопного на мобильный.

Как было раньше: Если пользователь искал информацию в интернете из мобильного устройства, то ему показывались результаты из мобильного индекса. И, наоборот, если из десктопного устройства — то видел десктопные результаты.

Как стало: сегодня, независимо от устройства, которое вы используете, Google показывает результаты из мобильного индекса. Соответственно, преимущество в поисковой выдаче будет отдаваться сайтам, оптимизированным под мобильные устройства.

Как добавить свой сайт в новый индекс?

Что Google подразумевает под мобильными устройствами?

Разные люди по-разному трактуют понятие “мобильное устройство”. Для понимания того, что именно Google вкладывает в это понятие, мы должны обратиться к документации гугла https://developers.google.com/search/mobile-sites/mobile-seo/:

Заметьте, здесь нет упоминания о планшетах. Как раз их Google рассматривает как отдельный класс устройств. К мобильным они не относятся.

Способы адаптации сайта для мобильных устройств

Сам Google предлагает три способа адаптации сайта под мобильные устройства:

Нам очень редко попадались проекты, где для адаптации использовался динамический показ. Чаще это были сайты с адаптивным дизайном (его же и рекомендует Google) и сайты с мобильной версией на поддомене. Поэтому на них подробнее и остановимся.

Адаптивный дизайн

Особенность адаптивного дизайна в том, что все элементы интерфейса могут автоматически подстроиться под экраны любого размера. Такие сайты одинаково хорошо отображаются на телефонах, планшетах, компьютерах.

Это не единственное преимущество, есть ещё:

Удобство разработки — при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. А если вы хотите, чтобы ваш контент/статью увидели пользователи разных устройств, то достаточно один раз сверстать и опубликовать. Отпадает необходимость менять разметку под разные устройства.
Не нужно настраивать редиректы, так как url один. Пользователю будет легче запомнить адрес. К тому же, это решит и проблему дублирования контента.
Удобный мониторинг сайта с помощью систем аналитики. Мобильный трафик и десктопный можно отследить в одном месте.

Конечно, как и у всего, есть и другая сторона адаптивной верстки:

Возможны проблемы с загрузкой сайта на мобильных устройствах. Дело в том, что и на компьютерах, и на телефонах загружается одинаковый контент. Он может быть перегружен какими-то активными элементами, которые мобильные устройства будут загружать дольше десктопных. Это основная проблема, но мы уверены, что разработчики смогут найти золотую середину для сайта в разных представлениях. А остальные недостатки — это уже философия))

Отдельная мобильная версия

Мобильная версия предполагает, что создается отдельный сайт, например, на поддомене, для просмотра с мобильных устройств. Определение устройства пользователя и перенаправление на нужную версию ресурса происходит на стороне сервера.

Преимущества:

Любые элементы на сайте можно адаптировать под мобильные устройства.
Можно размещать только тот контент, который предназначен именно для мобильной аудитории. В результате упрощения, сайт начинает быстрее грузиться.

Недостатки:

Основная проблема в том, что управлять двумя сайтами сложнее и затратнее. И здесь очень много нюансов, которые надо учесть. Например:

надо добавить соответствующие атрибуты:

Что в итоге предлагаем?

Мы бы рекомендовали использовать адаптивный дизайн. Это самый оптимальный вариант и, к тому же, менее затратный во всех смыслах. Важно, чтобы изначально разработчики делали акцент на скорость загрузки как десктопной версии, так и адаптивной. И будет всё хорошо:-) А ниже обозначенные рекомендации помогут Вам сделать адаптивный дизайн правильно.

Что же делать владельцам сайтов?

Must have:

Любой сайт должен иметь адаптивную верстку или, как вариант мобильную версию сайта
Загружаться сайт на любых типах устройств должен быстро. На скорость обратите особое внимание, так как сегодня это один из факторов ранжирования

Подробнее здесь: https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Как вы можете проверить скорость сайта на мобильных устройствах:

с помощью Google Analytics (средний показатель, ориентироваться только на него не стоит)
с помощью https://www.thinkwithgoogle.com/feature/mobile/?network=3G (есть возможность выбрать регион)

3. с помощью https://www.webpagetest.org/ (для CША есть возможность выбрать тип устройства и регион)

Крайне важно, чтобы проверка проходила по тому региону, где сайт ранжируется.

Желательно использовать SSL сертификат, так как Chrome помечает сайты на http как небезопасные. Это актуально особенно для сайтов, где вводятся данные пользователей.

Правила юзабилити отображения сайта на мобильных устройствах:

Не забудьте и про интерактивные элементы: кнопки, ссылки, меню. Для улучшения юзабилити мобильной версии сайта рекомендуется применять более крупные шрифт, кнопки социальных сетей, пункты меню. Важно, чтобы пользователи могли легко попадать по нужному пункту пальцем.
размер шрифта на мобильных устройствах должен быть таким, чтобы пользователям не приходилось всматриваться. Делайте 16 кегль и не прогадаете.
если на страницах используется большой кусок текста, то можете часть его спрятать за кнопкой “Читать подробнее”.
обратите внимание, чтобы текст не выходил за видимую часть экрана. Горизонтального скрола также не должно быть.
если страница длинная, то обязательно должна быть кнопка прокрутки вверх.
картинки лучше делать меньше, но чтобы при нажатии они увеличивались.
меню размещайте в верхнем левом углу и лучше, если оно будет в виде иконки.
не загромождайте мобильного пользователя pop up и всякими всплывающими окнами.
Обратите внимание на цвет шрифта. Многие сайты используют серый шрифт, который не выделяется достаточно хорошо на фоне сайта. Это может ухудшить поведенческие характеристики.

Лайфхак по юзабилити: мы никогда не полагаемся только на инструменты анализа адаптивности сайта под мобильный устройства. Мы ~~забираем~~ телефоны у сотрудников (iphone,android) и тестим всё вручную.

Для сайтов, использующих адаптивную верстку, никаких больше изменений не нужно. Следующие рекомендации будут больше касаться сайтов с мобильной версией:

Разместите на каждой странице для компьютеров специальный тег link с атрибутом rel=»alternate», который будет вести на соответствующую страницу мобильного сайта. Это поможет роботу Googlebot найти контент, оптимизированный для мобильных устройств.

На странице для мобильных устройств добавьте тег link rel=»canonical» со ссылкой на соответствующую обычную страницу.

Контент мобильной версии должен быть идентичным десктопной.
На всех страницах должны быть мета-теги и заголовки.
Если на десктопной версии используется микроразметка, то ее надо включить и в мобильную версию сайта.
Для мобильной версии сайта должен быть свой robots.txt. Стили и скрипты в роботс лучше не закрывать, чтобы сайт отображался для пользователей и роботов корректно.
В Search Console необходимо внести кроме десктопной версии, еще и мобильную.
Также обратите внимание на реализацию пагинации. Чтобы не появились дубли и поисковые системы данные страницы гугл дублями не считал, внедрите атрибуты атрибутах rel=»prev» и rel=»next» и уникализируйте мета-теги указанием номеров страниц.

AMP

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

Официальную документацию и инструкции по созданию AMP вы найдете здесь.

Что такое AMP? — это технология ускоренных мобильных страниц, которая активно используется не только в Google, но и в:

Bing
Yahoo
Baidu
Twitter
Pinterest
LinkedIn

Если говорить конкретно о ПС Google, то преимущество использования AMP в их более высоком ранжировании и мгновенной загрузке.

Загружаются они быстро за счет того, что хранятся в кэше Google и загружаются на устройство пользователей прям оттуда. Более того, данные страницы используют урезанный HTML со своим набором тегов и JS-библиотекой, что позволяет их сделать более легкими. Кроме того, такие страницы ранжируются выше, чем страницы без использования AMP.

Если разметить AMP-страницы структурированными данными, то вы увеличите вероятность попадания таких страниц в карусель ПС Google:

Микроразметка для AMP должна быть представлена в JSON-LD и одержать картинку предпросмотра, краткое описание, дату изменения страницы.

Во избежание дублирования контента на amp страницах и страницах основного сайта, используйте rel=»canonical» на основной странице сайта:

а на AMP страницу добавьте каноническую страницу основной страницы сайта:

Проверяем, как новый индекс видит сайт

Сделать это легко:

Заходим в Google Webmaster Tool
Выбираем “Mobile:Smartphone”
Нажимаем сканировать (по умолчанию стоит на скан главная страница)
То же самое проделываем и с другими страницами сайта, без обозначения корневого домена

В заключение

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

На что обращать внимание рассказывалось в разделе “Что же делать владельцам сайтов”.

Если вы сомневаетесь, что лучше использовать: мобильную версию или адаптивный дизайн, то выбирайте второй вариант. Он оптимальный. Мы также рекомендуем обратить внимание на AMP. Если раньше данная технология могла быть применима больше для новостных сайтов, то сейчас уже это актуально и для интернет-магазинов.

А что вы думаете по этому поводу? Давайте обсудим в комментариях!)

Оцените статью