Лучшие практики для мобильного SEO или как прокачать позиции сайта в мобильной выдаче?

Готов ли ваш сайт к эпохе mobile-first-index? Сегодня обсудим с вами важность мобильного SEO и о том, как оптимизировать свой сайт для мобильных устройств.

На протяжении многих лет поисковые системы рекомендуют улучшать мобильные возможности своих сайтов. Более 60% мирового веб-трафика поступает с мобильных устройств, а в некоторых случаях, в зависимости от отрасли, доля мобильного трафика может достигать 90%.

С тех пор как Google завершил переход на mobile-first indexing, вопрос больше не в том, должен ли ваш сайт быть оптимизирован для мобильных устройств, а в том, насколько хорошо он адаптирован под эти критерии. Новый вызов для SEO-специалистов появился с введением Interaction to Next Paint (INP), который заменил First Input Delay (FID) с 12 марта 2024 года.

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

Что такое мобильное SEO и почему оно важно?

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

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

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

Должно ли это стать приоритетом для вашего сайта? Насколько эта задача срочная?

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

Индексация с учетом мобильных устройств

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

Сколько трафика вы получаете с мобильных устройств?

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

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

Как вы можете оценить текущее соотношение пользователей мобильных и настольных компьютеров?

Простой способ узнать, каков процент ваших пользователей на мобильных устройствах — зайти в Google Analytics 4.

• Нажмите кнопку Отчеты в левой колонке.
• Нажмите на значок Технологии в левой части экрана.
• Щелкните на Пользователи с разбивкой по параметрам.
• Затем нажмите на Посмотреть устройства и платформы.

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

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

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

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

Хотя Google удалил инструмент тестирования мобильной дружественности из Google Search Console в декабре 2023 года, все еще существует ряд полезных инструментов для оценки вашего сайта для мобильных пользователей.

У Bing по-прежнему есть инструмент тестирования мобильной дружественности, который подскажет вам следующее:

• Окно просмотра настроено правильно.
• Содержание страницы соответствует ширине устройства.
• Текст на странице читабелен.
• Ссылки и цели касания достаточно крупные и удобные для касания.
• Обнаружены ли любые другие проблемы.

Расширение Lighthouse Chrome от Google позволяет оценить производительность вашего сайта по нескольким факторам, включая время загрузки, доступность и SEO.

Для использования установите расширение Lighthouse Chrome и далее по шагам:

• Перейдите на свой сайт в браузере.
• Нажмите на оранжевый значок маяка в адресной строке браузера.
• Нажмите Сгенерировать отчет.
• После завершения оценки откроется новая вкладка, в которой будут отображены ваши баллы.

Вы также можете использовать отчет Lighthouse в Инструментах разработчика в Chrome.

• Просто нажмите на три точки рядом с адресной строкой.
• Выберите другие инструменты.
• Выберите инструменты разработчика.
• Перейдите на вкладку Lighthouse.
• Выберите Mobile и нажмите кнопку Analyze Page Load.

Еще один вариант, который предлагает Google — инструмент PageSpeed Insights (PSI). Просто добавьте свой URL в поле и нажмите кнопку Анализ. PSI интегрирует все показатели Core Web Vitals в результирующее представление, чтобы вы могли видеть, что испытывают ваши пользователи, когда заходят на ваш сайт.

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

И наконец, воспользуйтесь своим мобильным устройством для загрузки и навигации по сайту:

• Загружается ли он долго?
• Можете ли вы перемещаться по сайту, чтобы найти самую важную информацию?
• Легко ли добавить товар в корзину?
• Можете ли вы прочитать текст на страницах?

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

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

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

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

Лучшие практики для мобильной оптимизации

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

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

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

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

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

Рендеринг сайта

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

Два наиболее распространенных подхода к этому — отзывчивый дизайн и динамическая подача (адаптивный дизайн).

Отзывчивый дизайн — самый распространенный из двух вариантов.

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

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

Именно такой подход рекомендует Google.

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

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

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

Хотя они не будут рассматриваться здесь, есть еще два варианта:

• Прогрессивные веб-приложения (PWA), которые могут легко интегрироваться в мобильное приложение.
• Отдельный мобильный сайт/URL, который больше не рекомендуется.

Взаимодействие с Next Paint (INP)

Google ввел показатель Interaction to Next Paint (INP) в качестве более комплексного показателя пользовательского опыта, заменившего First Input Delay. В то время как FID измеряет время с момента первого взаимодействия пользователя с вашей страницей (например, щелчок по ссылке, нажатие кнопки) до момента, когда браузер фактически сможет начать обработку обработчиков событий в ответ на это взаимодействие. INP, с другой стороны, расширяет рамки, измеряя отзывчивость сайта на протяжении всего времени существования страницы, а не только первого взаимодействия.

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

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

Что считается оптимальным показателем INP?

• Показатель INP менее 200 мс свидетельствует о хорошей отзывчивости.
• Показатель от 200 до 500 мс требует улучшения.
• Более 500 мс означает плохую отзывчивость страницы.

Это типичные проблемы, вызывающие низкие показатели INP:

• Объемные скрипты JavaScript. Длительное выполнение JavaScript может заблокировать основной поток, что замедляет способность браузера реагировать на действия пользователя. Поэтому разбивайте большие скрипты JS на более мелкие фрагменты с помощью API-планировщика.
• Большой размер DOM (HTML). Большой размер DOM (от 1500 элементов) может серьезно повлиять на интерактивную производительность сайта. Каждый дополнительный элемент DOM увеличивает объем работы, необходимой для рендеринга страниц и реагирования на взаимодействия с пользователем.
• Неэффективные обратные вызовы событий. Обработчики событий, выполняющие длительные или сложные операции, могут существенно повлиять на показатели INP. Плохо оптимизированные обратные вызовы, прикрепленные к пользовательским взаимодействиям, таким как щелчки, нажатия клавиш или касания, могут блокировать основной поток, задерживая способность браузера оперативно отображать визуальную обратную связь. Например, когда обработчики выполняют тяжелые вычисления или инициируют синхронные сетевые запросы, такие как щелчки.

Оптимизация изображений

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

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

Как выстроить работу с изображениями:

• Используйте отзывчивые изображения.
• Внедрите ленивую загрузку (LazyLoad).
• Сжимайте изображения (используйте WebP).
• Добавьте изображения в карту сайта.

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

Избегайте навязчивых интерстиций

Google редко использует конкретные формулировки, чтобы заявить, что что-то является фактором ранжирования или повлечет за собой наказание, поэтому вы знаете, что он имеет в виду навязчивые рекламные блоки в мобильном интерфейсе.

Навязчивые интерстиции — это всплывающие окна на странице, которые мешают пользователю видеть контент на странице. Особенно, когда такие окна появляются в момент взаимодействия со странницей и их невозможно закрыть (нет/не видно крестика, не закрывается поп-ап при нажатии на крестик).

К типам интерстиций, которые Google считает навязчивыми, относятся:

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

Структурированные данные

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

Страницы результатов поисковых систем (SERP) уже давно не являются «10 синими ссылками».

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

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

Команда Пиксель Тулс рекомендует ознакомиться с материалом по вариациям микроразметки.

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

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

Стиль контента

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

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

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

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

Цели касания

Не менее важен, чем размер текста, размер и расположение целей касания на ваших страницах. К такому относятся элементы навигации, ссылки, поля форм и кнопки, например кнопки «Добавить в корзину».

Цели размером менее 48 пикселей на 48 пикселей, а также цели, которые перекрываются или перекрываются другими элементами страницы, будут отмечены в отчете Lighthouse.

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

Приоритет этих советов

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

Как и в случае со многими другими оптимизациями в SEO, важно понять, какие изменения окажут наибольшее влияние и это так же верно для мобильного SEO.

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

• Отзывчивый или динамический рендеринг. Если ваш сайт требует от пользователя масштабирования и прокрутки вправо или влево, чтобы прочитать контент на ваших страницах, никакие другие оптимизации вам не помогут. Это должно быть первым в вашем списке.
• Стиль контента. Переосмыслите, как пользователи будут воспринимать ваш контент в интернете. Избегайте длинных абзацев.
• Оптимизация изображений. Начните переносить свои изображения в форматы нового поколения и оптимизируйте сеть отображения контента для скорости и отзывчивости.
• Цели для переходов. Сайт, который мешает пользователям перемещаться по сайту или конвертировать их в продажи, долго не проработает. Сделайте навигацию, ссылки и кнопки удобными для них.
• Структурированные данные. Хотя этот элемент занимает последнее место по приоритетности в данном списке, эти доработки могут повысить ваши шансы на получение трафика из поисковой системы, поэтому добавьте его в список дел после того, как выполните другие виды оптимизации.

Выводы

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

Поскольку все больший процент пользователей используют мобильные устройства, возможно, вам стоит добавить слово «везде» в конец формулировки миссии.

Вы упускаете трафик с мобильных устройств из-за плохого мобильного опыта? Если вы надеетесь сохранить свою актуальность, сделайте мобильное SEO приоритетом уже сейчас.