Последние несколько лет Google переключает свое внимание на мобильный поиск.
На данный момент точно известно, что 70% всей сети находится в индексе mobile-first.
С точки зрения SEO это означает, что робот Googlebot индексирует мобильную версию вашего сайта, а не десктопную. Таким образом, если ваш сайт не оптимизирован для мобильных устройств, скорее всего, он не будет занимать высокие позиции в поиске.
Итак, как сделать свой веб-сайт удобным для мобильных устройств, чтобы он понравился и вашим пользователям, и поисковым роботам Google? Давайте посмотрим!
Что такое мобильное SEO?
Мобильное SEO означает оптимизацию для мобильных поисковых систем. По своей сути это процесс оптимизации вашего веб-сайта для пользователей, которые используют смартфоны, планшеты или любые другие мобильные устройства для доступа к вашему сайту.
Цель мобильной поисковой оптимизации — обеспечить исключительное удобство работы с веб-сайтом для всех мобильных пользователей, независимо от размера экрана, операционной системы устройства или скорости мобильного интернета.
Почему так важно сделать сайт, оптимизированный для мобильных устройств?
Миллиарды пользователей ежедневно выбирают смартфоны, а не настольные компьютеры, когда им нужно быть в курсе последних новостей, узнавать победителя футбольного матча или делать покупки в Интернете.
Хотя преимущества мобильного SEO могут быть очевидны, я собрал некоторые из наиболее убедительных моментов ниже.
Мобильный поиск опередил десктопный
Еще в 2017 году количество поисковых запросов с мобильных устройств превысило количество поисковых запросов с компьютеров. Сегодня более половины всех поисковых запросов в Интернете осуществляются с мобильных устройств . Поскольку доля трафика с мобильных устройств ежемесячно растет, эта тенденция будет только усиливаться.
Для владельцев веб-сайтов это означает, что огромная часть посетителей просматривает их сайты с мобильных устройств. И если сайт не оптимизирован для мобильных устройств, пользователи мобильных устройств вернутся к результатам поиска. Google фиксирует поведение пользователей и может в конечном итоге понизить рейтинг таких сайтов. Вероятность того, что вернувшиеся пользователи когда-либо снова посетят плохо оптимизированные сайты, также невелика.
Google фокусируется на мобильном поиске
Все началось в 2015 году, когда Google выпустила обновление для мобильных устройств .
С так называемым обновлением «Mobilegeddon» Google наказывал веб-сайты, которые не были оптимизированы для мобильных устройств. Однако это относилось только к мобильному поиску, доля которого на тот момент была значительно ниже десктопной.
Все резко изменилось, когда мы впервые услышали об индексе mobile-first . Начиная с 2017 года Google начал медленно сканировать Интернет с помощью смартфона Googlebot. Перенесемся в 2022 год, и у нас будет 70% всей сети в индексе mobile-first. И он продолжает расширяться, чтобы, наконец, достичь 100%.
Что это значит для владельцев сайтов?
Короче говоря, только мобильная версия вашей веб-страницы теперь используется для целей индексации и ранжирования, что делает мобильное SEO важным для любого владельца веб-сайта.
Вот несколько наглядных материалов, которые помогут вам лучше понять, как на самом деле работает индексирование для мобильных устройств:
И короткое видео прямо из Google:
https://youtu.be/TTUzxHdx2jY
Вывод из вышесказанного – Google отдает предпочтение сайтам, оптимизированным для мобильных устройств. Мы еще раз убедились в этом, когда вышло обновление Page Experience .
Кончик
Хотите знать, есть ли ваш сайт в мобильном индексе? Есть быстрый способ проверить это с помощью Google Search Console . Просто зайдите в «Настройки» и проверьте раздел «О программе». Если ваш сайт переведен на индексирование с приоритетом мобильных устройств, вы увидите Googlebot Smartphone в качестве индексирующего сканера.
Обратите внимание, что все веб-сайты, запущенные после 1 июля 2019 г., индексируются в первую очередь для мобильных устройств.
Если вы все еще находитесь в индексе для настольных компьютеров, в ближайшее время все может измениться, поэтому лучше позаботиться о своем мобильном SEO сейчас, не откладывая.
Как выбрать правильное мобильное решение?
Когда вы выбираете долгосрочный план мобильной SEO-оптимизации, Google предлагает три мобильные конфигурации, которые вы можете выбрать.
Чтобы помочь вам выбрать правильную конфигурацию, я кратко опишу все три, указав плюсы и минусы каждой.
Отзывчивый дизайн
Адаптивный веб-дизайн является наиболее элегантным решением с точки зрения мобильного SEO и рекомендуется большинством популярных поисковых систем, таких как Google.
Вкратце, у вас есть один и тот же URL-адрес для всех веб-страниц как для пользователей настольных компьютеров, так и для мобильных посетителей. HTML тоже остается прежним. Единственное, что меняется, — это CSS, который изменяет рендеринг вашего контента в зависимости от размера экрана и типа устройства.
Чтобы иметь полный контроль над тем, как ваш сайт выглядит на разных устройствах, вам нужно использовать медиа-запросы. Правило @media в основном говорит браузерам, как отображать ваш адаптивный веб-дизайн при соблюдении определенных условий.
Вот пример — если ширина экрана составляет 800 пикселей или меньше, цвет фона изменится на черный:
@media only screen and (max-width: 800px) {
body {
background-color: black;
}
}
Благодаря адаптивному дизайну ваш сайт будет отлично выглядеть на любом устройстве с минимальными затратами усилий и времени.
Посмотрите, как link-assistant.com отображается на трех разных устройствах — iPhone, iPad и настольном компьютере:
Вы также можете легко проверить, как ваш сайт отображается на разных устройствах. Если вы используете Google Chrome, щелкните правой кнопкой мыши в любом месте страницы и нажмите «Проверить » . В левом верхнем углу экрана найдите « Измерения » и выберите устройство, на котором вы хотите видеть свой сайт.
Кроме того, вы можете использовать несколько бесплатных онлайн-инструментов. Мне нравится этот .
Подводя итог, вот плюсы и минусы адаптивного веб-дизайна для мобильного SEO.
Динамическое обслуживание
Еще один способ сделать веб-сайты удобными для мобильных устройств — это динамическое обслуживание.
При динамическом обслуживании сервер отвечает разными HTML (и CSS) на один и тот же URL-адрес в зависимости от того, какой пользовательский агент запрашивает страницу (мобильный, планшетный или настольный).
Вот как это работает:
Этот метод требует больше времени, так как вам нужно создать две версии веб-страницы для одного и того же URL-адреса. Кроме того, вы должны быть в курсе последних выпусков гаджетов. Если вы этого не сделаете, настольная версия вашего сайта будет загружена на более новые мобильные устройства.
В целом, динамический показ менее предпочтителен, когда речь идет о поисковой оптимизации для мобильных устройств:
Отдельный мобильный сайт
Этот подход заключается в создании отдельного мобильного сайта для мобильных посетителей.
Мобильный трафик перенаправляется на другой мобильный URL-адрес, который обычно выглядит так: m.example.com . Как правило, мобильная версия содержит меньше контента, чем настольная версия, и предлагает навигацию, которая лучше подходит для мобильного просмотра.
Эта мобильная конфигурация была популярна в свое время, но сегодня она используется не так часто и не рекомендуется Google .
Вот мнение Google по этому поводу:
Если вы выберете эту мобильную конфигурацию, вы, вероятно, столкнетесь с серьезными проблемами из-за дублирования контента, что может повредить поисковой оптимизации вашего сайта. Кроме того, вы захотите оптимизировать заголовки и метаописания, чтобы обе версии одной страницы имели одинаковые заголовки и метаописания. Более того, HTML и CSS позволяют нам сегодня делать с веб-сайтами неслыханные вещи, поэтому предпочтение отдается адаптивному дизайну.
Вам нужно приложение?
Отдельное мобильное приложение (для пользователей iOS и Android) — это дополнительная опция, которая может дополнять ваш основной сайт или служить самостоятельным решением.
Важно понимать, что не каждому бизнесу нужно приложение.
Скажем, если ваш веб-сайт носит исключительно информационный характер, вам подойдет адаптивный дизайн для мобильных посетителей. Но если вы управляете сайтом электронной коммерции или службой доставки еды, приложение может значительно повысить удобство работы ваших пользователей на мобильных устройствах.
Но…
Создание приложения — серьезная головная боль, если у вас нет солидного технического образования или большого бюджета. Это дорогостоящее решение, и часто его можно заменить должным образом оптимизированным адаптивным сайтом. Поэтому, если вы не являетесь крупным брендом, приложение — это не то, на что вы должны тратить деньги и время.
Подводя итог, Google и другие поисковые системы рекомендуют вам сегодня использовать адаптивный дизайн для вашего мобильного сайта. Но выбор всегда за вами и потребностями вашего бизнеса.
Чтобы помочь вам пересмотреть все три мобильные конфигурации, я сделал эту удобную инфографику:
Три типа мобильной конфигурации
Как проверить, оптимизирован ли ваш сайт для мобильных устройств?
Перво-наперво. Прежде чем вы начнете делать свой веб-сайт удобным для мобильных устройств, проверьте, каков ваш текущий статус-кво.
Проверьте распространенные проблемы с мобильными устройствами
Перейдите в консоль поиска Google и перейдите на вкладку «Удобство использования мобильных устройств».
Инструмент сообщит вам, если у вас возникнут серьезные проблемы с мобильным SEO вашего сайта. А если вы перейдете к разделу « Подробности », вы увидите краткое описание того, что, по мнению Google, ухудшает удобство использования вашего сайта для мобильных посетителей. Это включает в себя проблемы взаимодействия с пользователем, проблемы с интерфейсом вашего мобильного сайта и множество других факторов, над которыми вы будете работать позже в этом руководстве.
Если у вас нет учетной записи Google Search Console, вы также можете проверить оптимизацию своего сайта для мобильных устройств с помощью Google Mobile-Friendly Test .
Введите URL-адрес вашего сайта, нажмите « Анализ » и подождите, пока инструмент соберет все данные.
Единственным недостатком является то, что вы можете анализировать только один URL-адрес за раз. Поэтому, если вам нужно проверить весь сайт, лучше использовать Google Search Console.
Кроме того, вы можете проверить совместимость своих страниц с мобильными устройствами с помощью WebSite Auditor. Запустите инструмент и перейдите в раздел Аудит страницы > Технический аудит . Введите URL-адрес, который вы хотите изучить, и несколько ключевых слов, описывающих страницу. После завершения проверки вы увидите результаты и подробную разбивку факторов, требующих улучшения.
Проверьте скорость страницы для мобильных устройств
Прежде чем мы перейдем к оптимизации скорости страницы на мобильных устройствах, давайте сначала посмотрим, как вы можете измерить этот фактор.
Это можно сделать несколькими способами — с помощью WebSite Auditor и Google PageSpeed Insights.
WebSite Auditor позволяет вам проверять все ваши веб-страницы в пакетном режиме. Там вы можете перейти в « Структура сайта» > «Аудит сайта» и получить массовый отчет о скорости загрузки страниц для всего вашего веб-сайта, а также просмотреть все затронутые страницы — все с одной панели:
Или вы можете переключиться на « Аудит сайта» > «Страницы» > «Скорость страницы» и просмотреть список страниц с противоположными проблемами скорости, которые на них влияют. Нажмите на любую страницу, и вы также получите список элементов страницы, которые можно оптимизировать для повышения производительности:
Кроме того, вы можете использовать Google PageSpeed Insights . Оказавшись там, введите URL-адрес страницы, которую вы хотите проверить, и дождитесь завершения анализа. Прокрутите вниз до раздела « Возможности » и ознакомьтесь с предложениями, которые помогут вашей странице загружаться быстрее.
Недостаток этого метода, как вы могли догадаться, заключается в том, что он позволяет просматривать только одну страницу за раз, что может быть утомительно.
Кончик
Есть еще один инструмент Google для проверки скорости вашего сайта на мобильных устройствах — Mobile Speed Test . Самое классное в этом то, что вы можете видеть, как быстро ваша веб-страница загружается из разных мест и в разных мобильных сетях (3G/4G).
Как сделать свой сайт мобильным?
Готовы войти в 2023 год с веб-сайтом, идеально оптимизированным для мобильных устройств?
В этом разделе руководства я опишу четыре шага, чтобы сделать ваш сайт удобным для мобильных устройств как в глазах пользователей, так и в глазах Google.
Шаг 1. Оптимизация времени загрузки для мобильных пользователей
Скорость загрузки вашего сайта на мобильных устройствах имеет решающее значение, если вы хотите улучшить мобильное SEO.
Одно из исследований, процитированных в блоге Google, показало, что мобильные пользователи, как правило, удерживают свое внимание на экране только в течение 4-8 секунд за раз. Если ваша веб-страница загружается дольше, вы буквально теряете массу посетителей.
Проверьте эту статистику от Google:
Когда дело доходит до алгоритмов поиска и ранжирования, обновление Page Experience и введение Core Web Vitals еще раз подчеркнули важность сокращения времени загрузки для мобильного трафика.
Что такое Core Web Vitals?
Core Web Vitals — это показатели, которые измеряют скорость загрузки, интерактивность и визуальную стабильность на вашем сайте. Наряду с удобством для мобильных устройств, безопасностью, безопасностью и отсутствием всплывающих окон эти новые сигналы теперь используются для оценки общего опыта страницы и для окончательного голосования при принятии решения о том, заслуживает ли страница ранжирования. Вот подробная инструкция от Google .
Мы также обнаружили убедительную корреляцию между улучшенными показателями Core Web Vitals и органическими показами и кликами. Обязательно ознакомьтесь с нашим примером из практики Core Web Vitals, чтобы узнать больше.
Ориентир Google для скорости мобильной страницы составляет одну секунду. Хотя это может показаться довольно амбициозным, эта цель достижима.
Вот точные шаги, которые необходимо предпринять, чтобы гарантировать сокращение времени загрузки на мобильных устройствах:
Проверьте время отклика вашего сервера
Большая часть успеха со временем загрузки зависит от того, насколько быстр ваш сервер веб-хостинга.
Если ваш сервер слишком долго отвечает, вы увидите соответствующее предупреждение в PageSpeed Insights. Вы захотите поговорить со службой поддержки вашего провайдера веб-хостинга, чтобы обсудить возможные способы ускорения работы.
Избегайте Flash — вместо этого используйте HTML5
Adobe Flash был чрезвычайно популярен в первые годы существования Интернета. Но это уже не так. Особенно для мобильных устройств, которые никогда не поддерживали Flash.
Если вам нужно добавить мультимедиа на свои веб-страницы (видео, анимацию и т. д.), используйте вместо этого HTML5, чтобы не повредить поисковой оптимизации для мобильных устройств. Это не только поможет вам доставлять один и тот же контент на все устройства, но также значительно сократит время загрузки на смартфонах и планшетах.
Не используйте слишком много плагинов
Если ваш сайт построен на WordPress, Joomla или любой другой CMS, будьте особенно осторожны с плагинами. Они могут замедлять работу вашего сайта.
Проведите сплит-тест, чтобы увидеть, насколько хорошо ваш сайт работает с плагинами и без них. Вы также можете использовать Query Monitor для обнаружения проблемных плагинов на вашем сайте WordPress.
Оптимизируйте свои изображения
На каждом сайте есть куча изображений. Чтобы все они загружались достаточно быстро, их обязательно нужно оптимизировать.
Убедитесь, что вы используете правильные форматы изображений, такие как AVIF, JPEG 2000, JPEG XR и WebP. Последний формат на 25-35% легче, чем PNG и JPEG аналогичного качества, поэтому он может значительно повысить скорость, когда речь идет о поисковой оптимизации для мобильных устройств.
Чтобы еще больше уменьшить размер ваших изображений, запустите их с помощью инструментов сжатия .
Еще один способ сэкономить время загрузки — использовать отложенную загрузку изображений на мобильных устройствах. Ленивая загрузка позволяет откладывать закадровые изображения и загружать их только тогда, когда это необходимо.
Вот как это работает:
Важная заметка
Чтобы избежать проблем с индексированием, не лениво загружайте мобильное содержимое в верхней части страницы, потому что робот Googlebot не может загружать элементы, требующие взаимодействия с пользователем.
Включить веб-кеширование
Кэширование ускоряет просмотр и обеспечивает удобство для постоянных посетителей. Разрешите браузерам кэшировать все части содержимого вашего сайта, включая текст, изображения, HTML, CSS и JavaScript. Это должно сильно помочь с оптимизацией для мобильных устройств.
Зарегистрируйтесь в сети доставки контента
CDN — это сеть серверов, связанных вместе для более быстрой доставки контента вашего сайта. И, говоря быстрее, я имею в виду это.
Проще говоря, несколько серверов CDN расположены по всему миру. Когда пользователь, скажем, из Нью-Йорка заходит на ваш сайт, сеть CDN находит ближайший сервер и загружает оттуда весь контент. Независимо от того, где географически находится исходный сервер.
Многие провайдеры веб-хостинга предлагают CDN без дополнительной оплаты.
Дважды проверьте свой код
Чтобы ваш сайт был оптимизирован для мобильного поиска и обеспечивал высокую скорость загрузки на мобильных платформах, каждый отдельный фрагмент вашего HTML, CSS и JavaScript должен быть идеально закодирован.
Используйте меньше редиректов
Вы не можете создать сайт без единого редиректа. Но убедитесь, что они правильно настроены, и следите за переадресацией 404 только для мобильных устройств. Общее практическое правило заключается в том, что чем меньше у вас переадресаций на мобильных устройствах, тем лучше.
Используйте AMP, но с осторожностью
Проект AMP (Accelerated Mobile Pages) — это проект с открытым исходным кодом, в значительной степени спонсируемый и продвигаемый Google.
Возможно, вы видели страницы AMP в поисковой выдаче.
Раньше страницы AMP помечались значком молнии. Но недавно Google удалил значок AMP для результатов мобильного поиска. Так что действительно трудно сказать разницу сейчас.
Основное преимущество AMP заключается в том, что ваши страницы загружаются почти мгновенно, но за это увеличение скорости приходится платить.
Во-первых, существуют серьезные конструктивные ограничения. Вы можете использовать только встроенные стили, CSS ограничен 50 КБ, а JavaScript — 150 КБ.
Во-вторых, когда кто-то ссылается на вашу AMP-страницу, эта обратная ссылка будет указывать на домен google.com, а не на ваш. Таким образом, построение ссылок становится немного сложнее с AMP-страницами.
Наконец, если ваши мобильные веб-страницы правильно оптимизированы, вы можете достичь скорости загрузки мобильных устройств, подобной AMP, без фактического внедрения AMP.
Наконец, если ваши мобильные веб-страницы правильно оптимизированы, вы можете достичь скорости загрузки мобильных устройств, подобной AMP, без фактического внедрения AMP.
У нас есть подробное руководство по AMP , обязательно ознакомьтесь с ним, чтобы увидеть все плюсы и минусы этой технологии.
Вот и все. Если вы хотите копнуть глубже и найти больше способов оптимизировать скорость загрузки вашего веб-сайта для улучшения мобильной SEO, ознакомьтесь с этим окончательным руководством и посмотрите это короткое видео о проверке основных веб-жизненных показателей в WebSite Auditor.
Прочитать статью полностью можно по ссылке: Ссылка.
Возможно вас заинтересует статья: Обезопась себя от негативного SEO
Наши услуги:
