SMX East: готовимся к запуску mobile-first индекса Google

Как известно каждому оптимизатору, рост популярности мобильных устройств вынудил Google отдать мобильным сигналам приоритетную роль в ранжировании. В настоящее время поисковик осуществляет постепенный переход на mobile-first индексацию, а окончание этого процесса планируется в следующем году.

Подготовка к предстоящим изменениям является одной из наиболее актуальных и приоритетных задач для SEO-специалистов. Поэтому этой теме была посвящена отдельная панельная дискуссия на конференции SMX East 2017, которая прошла в Нью-Йорке.

В рамках панели свои доклады представили старший директор по SEO в 3Q Digital Лесли То, директор по SEO в Local SEO Guide Эшли Берман Хейл и специалист команды качества поиска Google по работе с вебмастерами Гэри Илш.

Лесли То: советы по подготовке к mobile-first индексации

Лесли То разбила процесс подготовки к запуску mobile-first индекса на две основные категории:

• Независимый от конфигурации аудит;
• Зависимый от конфигурации аудит.

Основанный на конфигурации аудит включает те задачи, которые относятся к мобильной конфигурации (мобильный поддомен, динамический показ или адаптивный дизайн).

Независимый от конфигурации аудит, со своей стороны, охватывает те вещи, которые не связаны с мобильной конфигурацией.

Независимый от конфигурации аудит

• Используйте HTML для rich-медиа и видеоконтента.
• Избегайте межстраничных объявлений. Если вы хотите продвинуть своё приложение или email-рассылку, используйте баннеры, а не полноэкранные объявления или оверлеи.
• Протестируйте глобальную навигацию и используйте результаты внутреннего поиска для её улучшения (основываясь на том, чего пользователи не находят). Далее, помните, что мегаменю не всегда хорошо работают на мобильных устройствах. Также не предлагайте слишком много вариантов для выбора, если пространство экрана ограничено.
• Позвольте контенту и медиа масштабироваться, чтобы заполнять пространство экрана. Таким образом вы улучшите пользовательский опыт. Избегайте абсолютных выражений в CSS.
• Позвольте всем размерам шрифтов масштабироваться и используйте 16px в качестве основного размера шрифта. Не требуйте от пользователей использовать zoom для чтения, взаимодействия или потребления контента. Никто этого не любит.
• Цели для нажатия («tap targets») должны быть минимум 48px в ширину, чтобы пользователям было легко их нажимать. Расстояние между целями должно составлять не менее 32 пикселей. Не заставляйте пользователей использовать zoom для нажатия кнопок, ссылок или полей формы.
• Разрешите такие функции на своём ecommerce-сайте, как pinch-to-zoom (когда контент на экране можно масштабировать двумя пальцами) или double-tap-to-zoom (масштабирование контента двойным нажатием). Не используйте изображения с низким разрешением, которые становятся зернистыми при увеличении.
• Настройте поиск по сайту таким образом, чтобы пользователи могли легко находить нужный им контент. Анализируйте поисковые запросы, чтобы понять, что люди ищут на сайте. Используйте эту информацию для постепенного улучшения навигации, шаблона и содержимого ресурса.
• Включите контекстные клавиатуры, которые меняются на основании типа ввода. Используя стандартную клавиатуру для всех типов ввода, вы затрудняете пользователям взаимодействие с сайтом.
• Упростите пользователям конвертацию – будь то заполнение формы, телефонный звонок или добавление товара в корзину. Используйте специальную разметку для телефонных номеров. Не требуйте больше трёх кликов для завершения конверсии.
• Обеспечьте все основные вещи, позволяющие ускорить загрузку страниц. Используйте сжатие GZIP, браузерное кэширование и сделайте так, чтобы время ответа сервера не превышало 200 мсек.
• Не используйте блокирующий рендеринг JavaScript, особенно для внешних скриптов. То же самое касается встроенных CSS-атрибутов и/или слишком крупных CSS-файлов.
• Работайте над читабельностью. Избегайте слишком сложных фраз и выражений, сделайте язык ресурса лёгким для восприятия. Для оценки читабельности можно использовать следующие индексы:
  • Проверка удобочитаемости текстов по Флешу;
  • Индекс Флеша-Кинкейда;
  • Индекс туманности Ганнинга;
  • Формула SMOG.

Проверить удобочитаемость текста можно в Microsoft Word.

Зависимый от конфигурации аудит

Мобильные поддомены

Если вы используете мобильный поддомен, вам нужно будет реализовать двунаправленные ссылки. Для этого на десктопном сайте нужно использовать rel=alternate, указывающий на мобильный сайт, а на мобильном – rel=canonical, указывающий на десктопный сайт.

Многих вебмастеров интересует, потребует ли Google изменить направление этих атрибутов после запуска mobile-first индекса. На данный момент в Google уверяют, что это не потребуется. С точки зрения поисковой системы, если заставить всех вебмастеров менять эти настройки, то это может привести к хаосу.

Перекрёстные ссылки между десктопной и мобильной версиями сайта нужно свести к минимуму. Все ссылки, которые видят мобильные пользователи, должны вести на мобильные страницы. Если же пользователи хотят видеть десктопную версию, то у них должна быть такая возможность. При отсутствии соответствующего мобильного контента оставьте пользователя на десктопной странице.

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

В данном случае рекомендуется использовать HTTP-заголовок Vary. Это поможет предотвратить показ пользователям неправильных версий страниц из-за ISP-кэширования. Без этого заголовка ISP-кэширование может привести к показу мобильным пользователям десктопных страниц и наоборот.

Также следует избегать различий в контенте между десктопной и мобильной версиями сайта.

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

При использовании адаптивного дизайна убедитесь, что вы не блокируете CSS и JavaScript-файлы от сканирования. Также проверьте метатег viewport, который позволяет контролировать размер окна просмотра и масштаб страницы.

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

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

Эшли Берман Хейл: внутренние проблемы при оптимизации сайта для мобильных

В своём выступлении Эшли Хейл рассказала, что делать в тех случаях, когда оптимизация сайта для мобильных устройств осложняется внутренними проблемами.

Нередки ситуации, когда руководство не понимает важности преобразования сайта в mobile-friendly ресурс. В таком случае Хейл предлагает ссылаться на документацию Google и делиться с начальством тематическими исследованиями. Она также советует показывать сравнительную статистику десктопного и мобильного трафика с течением времени. Даже в тех отраслях, которые медленно переходят на mobile, аналитические данные продемонстрируют явный тренд в пользу мобильных устройств. Также можно отслеживать сайты конкурентов в таких сервисах, как SEMRush, и показывать, как меняется их мобильный трафик с течением времени.

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

• разделам сайта;
• товарам;
• клиентам;
• элементам.

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

• Использовать сжатие изображений;
• Выяснить, как удалить часть CSS;
• Внедрить AMP лишь на отдельных страницах сайта.

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

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

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

Наконец, убедитесь, что со временем вам удалось добиться стабильного прогресса. Путь к максимальной оптимизации для мобильных устройств – это определённо марафон, а не спринт.

Gary Illyes: точка зрения Google

Илш рассказал, что традиционно индекс Google был основан на индексации десктопного контента. Но трудность, с которой столкнулся поисковик, состоит в том, что у многих сайтов на десктопных страницах содержится больше контента, чем на соответствующих мобильных страницах. Это приводит к проблемам в поиске, поскольку Google возвращает мобильным пользователям результаты, исходя из содержимого десктопных страниц. В итоге страдает качество выдачи, поэтому и было принято решение перейти на mobile-first индекс.

Во время своего доклада Гэри Илш акцентировал внимание слушателей на том, что не стоит пугаться этого перехода. На данный момент в Google даже не знают, когда завершится этот процесс. Эксперименты с mobile-first индексом были начаты два года назад, и пока не всё работает так, как хочется компании.

В настоящее время Google перевёл на mobile-first индексацию небольшое количество сайтов. Сейчас эти ресурсы отслеживаются, чтобы убедиться, что они не пострадали с точки зрения трафика и позиций в ранжировании.

Примечание главы Stone Temple Consulting Эрика Энжа:

«Google должен быть очень осторожным с этим типом изменений. Хотя они являются желаемыми, зачастую пользователям нужны довольно конкретные результаты, включая определённые бренды, и если они будут искусственно понижаться, то люди будут разочарованы. По этой же причине HTTPS и скорость загрузки являются столь слабыми факторами ранжирования».

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

• Отсутствие части контента и ссылок из десктопной версии в мобильной;
• Отсутствие атрибутов rel=hreflang и т.п.;
• Отсутствие структурированных данных;
• Отсутствие некоторых медиафайлов и изображений.

Илш также поделился примером сайта, который не перенёс в мобильную версию атрибуты hreflang и потерял 50% трафика.

• Если сайт является адаптивным, то больше ничего делать не нужно;
• Убедитесь, что мобильные страницы имеют те же видео и изображения, что и соответствующие десктопные страницы;
• Убедитесь, что мобильная версия содержит тот же контент и ссылки, что и десктопная;
• Добавьте атрибуты hreflang на мобильные страницы;
• Обеспечьте единообразие разметки структурированных данных на десктопных и мобильных страницах;
• И последнее (но не менее важное) – не паникуйте!