Mobile SEO/мобильное SEO: полное руководство

Автор статьи: Mr. Фримен

0 8 минут(ы) чтения

Всем привет! Из года в год исследования Google доказывают, что мобильный трафик имеет высокую конверсию в продажи. В связи с этим оптимизация сайта под мобильные устройства становится ключевой задачей бизнеса. Еще пару лет назад индекс Google строился по desktop-версиям сайтов. И даже если вы запускали поиск с телефона, выдача мало отличалась от аналогичного запроса с настольного компьютера. Сегодня ситуация кардинально изменилась: алгоритмы переключились на мобильные версии веб-сайтов. Выдача в ноутбуке имеет вид «mobile-first index».

Mobile SEO vs Desktop SEO: сходства и различия

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

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

Универсальный фокус — производительность. Никто не захочет покупать у вас, если ваш сайт загружается, как почта в 1995 году.

Итак, держим в фокусе:

Релевантный полезный контент.

Пользовательский опыт/User experience.

Производительность или скорость загрузки.

Без приоритетов, только надежная связка всех трех компонентов.

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

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

Отзывчивый сайт и контент

К требованиям «adaptive web» или «адаптивного сайта» разработчики кое-как привыкли. Хотя на дворе 2020 год, а мобильный трафик захватил 50% рынка еще в 2016.

Но Google рекомендует приводить свой сайт к «responsive» версии, дословно англ. «отзывчивый». Отзывчивый сайт означает, что код и структура остаются резиновыми, сайт один, но он кардинально перестраивает свое содержимое. На мобильных устройствах один контент, на desktop — другой. «Что» отражается в desktop, становится второстепенным, а вот к mobile требования повышаются.

Плюс для SEO — на сайте только один набор файлов, дополнительной оптимизации не требуется. Часть контента не отображается, но здесь она особа и не нужна.

Тем не менее, разработчики продолжают проектировать свои страницы от desktop к mobile: макет, графика, видео, контент. И хорошо еще если вовремя вспомнят о мобильной версии. Страница на экране смартфона — вот от чего следует строить макет сегодня! Убедитесь, что эта страница выглядит идеально, а затем принимайтесь за desktop.

Проверьте прямо сейчас свой Google Analytics — почти каждый сайт уже получает до 80% мобильного трафика. На десктоп остается 20%. И если большая часть вашего трафика идет от мобильных пользователей, это означает, что большинство ваших конверсий происходит на мобильном устройстве. Зачем вы продолжаете пилить десктоп?

Технические аспекты мобильного SEO

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

title;
заголовка H1 (помним, на странице он может быть только один!);
контента;
атрибута alt (альтернативного текста) изображений;
URL;
мета-описания — description.

Все так же, как вы бы делали для стандартной десктоп SEO.

Обратите особое внимание на title и мета-описание. На странице результатов мобильного поиска информации еще меньше, чем на рабочем столе, поэтому ваш сниппет требует более тщательной проработки, емких формулировок в меньшем количестве символов.

Важно — не блокируйте CSS или JavaScript. Раньше их блокировали из соображения «меньшее кода — выше скорость загрузки». Но времена допотопных смартфонов давно прошли. Google хочет сканировать ваш сайт так, как его видят люди. А если CSS и JavaScript заблокированы, алгоритм не сможет увидеть, как выглядит ваша страница, будут проблемы с видимостью.

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

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

И, наконец, пришло время попрощаться с Flash. Полная поддержка плагина будет прекращена к концу 2020 года. Для анимации и спецэффектов теперь используем более быструю и эффективную HTML5. Автоматически Google не запускает Flash с 2017 года, на это требуется ручное разрешение. Не дожидайтесь конца года, снесите устаревшие технологии уже сейчас.

Итак, чек-лист технической оптимизации:

Прописываем емкий качественный сниппет

Используем CSS и JavaScript, не блокируем

Удаляем всплывающие окна

Проверяем микроразметку

Удаляем Flash элементы

Пользовательский опыт

Пользовательский опыт (от англ. User eXperience, UX) — то, как ваш сайт воспринимает пользователь, как с ним взаимодействует, уровень ощущений.

И первый трабл обычно скрывается в размерах интерактивных элементов и кнопок. При разработке отводите на область касания достаточно пространства, не экономьте. В противном случае вы просто не получите желаемый интерактив, клик не произойдет. В чем тогда смысл call-to-action? Кликабельные области разводите подальше. Помните, разочарованные пользователи вредны для бизнеса больше, чем нейтральные.

Дальше, убедитесь, что ваш номер телефона легко увидеть, и на нем есть ссылка для звонка. Один клик = звонок. Только так. Вы хотите, чтобы клиенты вам звонили? Сделайте звонок максимально простым. Не звонят — сделайте инфографику выразительнее.

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

Еще одна головная боль UX — формы. Адаптивная верстка редко качественно справляется с формами.

Чек-лист:

количество полей стремится к минимуму;

полное отображение полей на экране без скролла;

удобный фильтр (если вы предлагаете выбрать значение из списка);

размер формы — чтобы было удобно кликать.

Не забудьте про цифровую клавиатуру для поля с номером телефона. Подключить ее легко, а вам будет плюсик в UX и в конверсии.

Размер шрифта. Самый простой вариант — регулярно просматривайте собственный сайт в смартфоне. Удобно читать? Текст не сливается? Легко перемещаться, листать страницы?

Не пытайтесь втиснуть больше контента на одном экране, скорее наоборот — уменьшайте количество текста. Облегчите чтение, и ваши пользователи будут благодарны.

Сделайте ревизию изображений. Все ли картинки несут пользу в мобильной версии? Полноэкранное изображение на мобильном устройстве и в браузере ноутбука совсем не одно и тоже. Особенно, если сайт нагружен слайд-шоу, галереями, каруселями.

Скорость мобильного сайта

Скорость загрузки страницы — еще один фактор ранжирования Google. А мы уже знаем, что он использует алгоритм «сначала для мобильных устройств», поэтому и скорость загрузки с мобильных устройств будет в приоритете.

Да, медленные сайты штрафуются. Но и абсолютной привязки «скорость = место в рейтинге» нет. Скорее так: медленная загрузка может погубить рейтинг идеально продуманного и полезного сайта. Еще скорость точно повлияет на конверсию — при тех же показателях посещаемости, вы получите больше целевых действий, заявок или звонков.

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

Начните оптимизацию скорости с бесплатного сервиса Google Page Speed Insights. Он содержит полезную информацию, как можно ускорить сайт, но не дает точный замер загрузки. Для оценки результатов оптимизации нужно будет подобрать другой инструмент. И хорошо, если вы настроите ежедневный чек скорости на автомате, вероятность потерять трафик по техническим сбоям сократится в разы.

8 самых популярных советов по оптимизации скорости загрузки

Найдите качественный хостинг. Время отклика сервера прямо влияет на скорость загрузки страницы. Разместите свой сайт на хосте, оптимизированном для быстрой работы. Есть кейсы, когда сайты WordPress переносятся на более качественный хост, и время загрузки сразу уменьшается вдвое.
Будьте осторожны с плагинами. Иногда достаточно одного плагина, чтобы обрушить сайт в выдаче в считанные дни. В свое время отличились плагины чатов и социальных сетей. Отключите самые подозрительные плагины, и замерьте скорость без них. Помогут отзывы коллег, перед установкой поищите, что уже написано о плагине в интернете.
Расставьте приоритеты по загрузке. Что должен увидеть клиент в первую очередь? Даже если произойдет заминка, клиент с большей вероятностью останется на странице.
Оптимизируйте свои изображения перед загрузкой. Картинка весом 2 Мб и jpg в 30 Кб на экранах пользователей выглядят одинаково. Представьте, насколько быстрее будет работать ваш сайт, если преобразовать каждое изображение. Также важно использовать адаптивный код, чтобы обеспечить правильный размер изображения для любого экрана.
Будьте осторожны с редиректами. Используйте, только если они абсолютно необходимы.
Оптимизируйте код своего сайта. Убедитесь, что ваш HTML, CSS и Javascript чистые, без ошибок. Здесь без специальных знаний не обойтись, но оно того стоит.
Используйте кеширование. Вы настраиваете браузер на запоминание сайта в его окончательной конфигурации, и страница просто отображается без необходимости загружать HTML и картинки, применять CSS, и затем запускать JavaScript.
Используйте CDN/Content Delivery Network — набор географических локаций, которые обслуживают ваш контент. Когда пользователь запрашивает страницу, ее ресурсы обслуживает ближайший по геолокации сервер CDN.

AMP & Apps

Мы не можем говорить о скорости мобильной страницы без упоминания AMP и PWA.

AMP расшифровывается как Accelerated Mobile Pages. Он создает специальный код, основанный на урезанной версии HTML и CSS, и загружается практически мгновенно.

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

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

Минусы этой альтернативы:

нет смысла иметь приложение, которое никто не скачивает;
вы должны получить одобрение в App Store или Google Play.

Прогрессивное веб-приложение, или PWA — гибрид мобильного веб-сайта и приложения. Загрузить его можно прямо из браузера, не придется ждать одобрений.

Он выглядит как приложение на телефоне, но в основном работает как мобильный веб-сайт. PWA реально быстрый.

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

Существует даже более новая гибридная комбинация PWA и AMP, так называемая PWAMP. Прогрессивные веб-приложения, созданные на страницах AMP.

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

Локальное SEO

В завершение давайте поговорим о самой интересной тактике поисковой оптимизации — локальном SEO.

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

Исследование Google показало: 76% пользователей, которые искали что-то поблизости, посещали связанную точку в течение 24 часов после поиска, 28% этих посещений привели к продаже.

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

Локализованный контент:

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

Ждете высокую конверсию мобильного трафика, убедитесь, что ваш NAP (name, address, phone) отображается на каждой странице вашего сайта. А номер телефона — кликабельная область для вызова

Информация о вашем NAP должна быть размечена с помощью Local Business schema — кода, который показывает Google, что вы являетесь местным предприятием.

Придерживайтесь тактики локальной оптимизации в каждом элементе SEO на своих страницах:

включите гео запросы в семантику;
добавьте ключевые слова вашего местоположения в title, H1 и alt изображений;
органично вписывайте город в заголовки и мета теги, за бездумное добавление локации в конце
каждого запроса можно улететь в бан;
кастомизируйте ваши URL-адреса под конкретную локацию.

Оптимизированные URL и мета теги не помогут в ранжировании, но точно увеличат число кликов потенциальных клиентов.

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

Проверьте ваш профиль Google My Business, или заведите его немедленно. Сервис позволяет напрямую предоставлять в Google конкретные сведения о вашей компании. Когда в поиск поступает коммерческий запрос, первыми клиент видит сайты с профилем GMB.

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

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

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