Как сделать и оптимизировать мобильную версию сайта?

В последние несколько лет Яндекс и Google переключили своё внимание на мобильный поиск.

На данный момент точно известно, что 70% сайтов всего интернета ориентированы на пользователей мобильных устройств. С точки зрения SEO это означает, что, если ваш сайт не оптимизирован, скорее всего, он не получит высоких позиций в SERP.

Итак, как оптимизировать сайт под мобильные устройства, чтобы он одинаково понравился пользователям и поисковым системам? Давайте рассмотрим!

Почему мобильное SEO важно сейчас, как никогда?

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

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

Мобильный поиск превысил десктопный поиск

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

Доля десктопных и мобильных поисковых запросов с 2012 по 2021 год представлена на графике:

Для владельцев сайтов это означает, что большая часть пользователей просматривает их сайты с мобильных устройств. И если сайт не адаптирован под мобильные устройства, то эти пользователи будут возвращаться к результатам поиска. Яндекс и Google такие отказы видят, в конечном итоге они могут отрицательно сказаться на позициях в SERP.

Яндекс и Google сместили акцент в сторону мобильного поиска

Например, в Google всё началось ещё в 2015 году, когда вышло обновление Mobile Friendly.

С появлением «Mobilegeddon» в мобильном поиске получили преимущество сайты, которые были адаптированы под мобильные устройства. Однако десктопного поиска это не коснулось, его доля в те годы была гораздо выше.

Кардинальные изменения произошли с приходом Mobile-First Index. С 2017 года Google стал активно проверять наличие мобильных версий сайтов. А в 2021 году 70% всего интернета участвуют в мобильной выдаче.

Что это значит для владельцев сайтов?

Если коротко, для индексации и ранжирования в мобильном поиске достаточно только мобильной версии сайта.

Наглядная схема, как происходит индексация сайтов:

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

Как выбрать мобильную версию для сайта?

Когда вы собираетесь оптимизировать сайт под мобильные устройства, Яндекс и Google предлагают для этого выбрать одно из 3 решений.

Чтобы помочь, мы кратко описали плюсы и минусы каждого подхода.

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

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

Если коротко, страницы сайта остаются доступными по одним и тем же URL-адресам для всех устройств. HTML тоже сохраняется. Изменению подлежит только CSS, в зависимости от размера экрана и типа устройства.

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

Например, если ширина экрана 800 px или менее, цвет фона изменится на черный:

@media only screen and (max-width: 800px) {

    body {

        background-color: black;

    }

}

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

Вот так сайт pixelplus.ru отображается на компьютере:

А вот так на смартфоне:

Для проверки сайта можно воспользоваться стандартными средствами браузера. Сначала откройте консоль F12, а затем режим совместимости CTRL+Shift+M. Просто меняйте размеры экрана и сайт должен адаптироваться под него в реальном времени.

Плюсы адаптивного дизайна:

• Один URL-адрес.

• Удобство для пользователя.

• Экономическая эффективность.

• Простота реализации.

• Простота поддержки.

И его минусы:

• Много времени на переработку всего сайта.

• Загрузка страницы медленнее.

Динамическая подмена файлов

Динамический показ сайта относится к ещё одному из решений оптимизации под мобильные устройства.

Если коротко, сервер показывает пользователю по одному и тому же URL-адресу разные HTML и CSS. Выбор того или иного варианта зависит от значения User Agent (смартфон, планшет или компьютер).

Вот как это работает:

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

Плюсы динамической подмены файлов:

• Один URL-адрес.

• Более быстрая загрузка страницы.

• Контент может быть изменён.

И его минусы:

• Подготовка нескольких версий HTML и CSS файлов.

• Дорогостоящее решение.

• Определение типа устройств может допускать ошибки.

• Дополнительная нагрузка на сервер.

Отдельный сайт

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

Если коротко, пользователи мобильных устройств перенаправляются на другой URL-адрес, который обычно выглядит как m.example.com. Как правило, мобильная версия содержит меньше контента, чем исходный сайт, и предлагает навигацию, которая лучше подходит для просмотра с мобильных устройств.

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

Плюсы отдельного сайта:

• Более быстрая загрузка страницы.

• Контент может быть изменён.

• Меньшая нагрузка на сервер.

И его минусы:

• Разные URL-адреса.

• Разные версии HTML и CSS файлов.

• Дорогостоящее решение.

• Трудность реализации.

• Трудность поддержки.

А как же мобильное приложение?

Мобильное приложение iOS и Android — это опция, которая дополняет основной сайт или служит автономным решением.

Не каждой компании необходимо приложение.

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

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

Подводя итог, можно сказать, что Яндекс, Google и большинство экспертов рекомендуют использовать адаптивный дизайн для создания сайта в 2021 году. Но выбор всегда остаётся за вами и решением потребностей бизнеса.

Чтобы помочь с выбором мобильной конфигурации, мы подготовили сводную таблицу:

Как измерить производительность сайта?

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

Проверьте наличие распространенных проблем с мобильными устройствами

Перейдите в Google Search Console, далее на вкладку «Удобство для мобильных устройств».

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

То же самое можно сделать и через сервис Mobile Friendly Test.

Просто введите URL сайта и нажмите "Анализировать".

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

Далее мы рассмотрим 4 шага, которые помогут сделать сайт удобным для мобильных устройств как с точки зрения пользователей, так и с точки зрения поисковых систем (Яндекс и Google).

Шаг 1. Оптимизируйте время загрузки сайта

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

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

Проверьте эту статистику в Google:

Когда дело доходит до алгоритмов поиска и ранжирования, обновление Page Experience и внедрение Core Web Vitals ещё раз подчеркнули важность сокращения времени загрузки страницы для мобильных пользователей.

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

Вот шаги, которые помогут сократить время загрузки на мобильных устройствах:

Проверьте время отклика сервера

Во многом успех загрузки зависит от скорости серверов и полосы хостинг-провайдера.

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

Замените Flash на HTML5

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

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

Не используйте много плагинов

Если сайт создан на основе WordPress, Joomla или любой другой CMS, будьте особенно осторожны с плагинами. Они могут замедлять работу сайта.

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

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

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

Убедитесь, что используются современные форматы изображений, такие как AVIF, JPEG 2000, JPEG XR или WebP. Последний формат на 25-35% легче, чем PNG и JPEG аналогичного качества, поэтому он может хорошо повлиять на скорость загрузки мобильного сайта.

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

Вот как это работает:

Включить кеширование

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

Подключите CDN

CDN — это сеть серверов, связанных вместе, чтобы быстрее доставлять контент сайта. И говоря «быстрее», мы имеем в виду именно это.

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

Многие хостинг-провайдеры предлагают CDN без дополнительных затрат.

Проверьте код

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

Используйте меньше редиректов

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

Используйте AMP

AMP (Accelerated Mobile Pages) — это проект с открытым исходным кодом, который в значительной степени спонсируется и продвигается Google.

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

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

Во-первых, есть серьезные конструктивные ограничения. Можно использовать только встроенные стили, CSS ограничен 50 КБ, а JavaScript — 150 КБ.

Во-вторых, когда кто-то ссылается на AMP-страницу, эта обратная ссылка будет вести на домен google.com, а не на сайт.

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

Шаг 2. Откройте всё содержимое сайта для сканирования

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

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

Чтобы проверить содержимое файла robots.txt, откройте его через URL-адрес по примеру example.com/robots.txt.

Шаг 3. Улучшите UI и UX сайта

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

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

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

Проверьте наличие тега "Viewport Content"

Часто упускаемая часть мобильной оптимизации — это тег «Viewport Content».

Этот тег сообщает браузеру о размерах и масштабировании страницы на разных устройствах.

Google рекомендует использовать его следующим образом:

Если используете адаптивный дизайн, всегда проверяйте тег «Viewport Content». Это поможет избежать того, что сайт отображается неправильно.

Улучшите читаемость

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

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

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

Вот хороший пример из The New York Times:

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

Для проверки откройте сайт на смартфоне или воспользуйтесь сервисом Mobile Friendly Test.

Используйте подход, ориентированный на большой палец

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

Наглядная схема, как люди держат телефоны и взаимодействуют с ними:

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

Google рекомендует минимальный размер целевой точки касания примерно 7 мм или 48 px CSS с минимальным интервалом между элементами не менее 8 px.

Улучшите навигацию на мобильных устройствах

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

Вот несколько советов, как сделать мобильную навигацию идеальной:

• Помните, мобильных пользователей легко перегрузить. Это относится и к навигации. Меню должно быть разработано с учетом небольших размеров экрана. Вместо того, чтобы загромождать его множеством элементов, проанализируйте путь типичного пользователя и ограничьте мобильную навигацию 4–8 наиболее важными элементами.

Примеры мобильных меню от Flyus и Apple:

• Расставьте приоритеты по элементам. У мобильных пользователей меньше пространства, вынести на него самые важные элементы, такие как призывы к действию на самый верх.
• Не забывайте о подходе, ориентированном на большой палец. Помните, что пользователи не используют мышь для навигации по мобильному сайту. Дизайн должен быть ориентирован для нажатий, а не кликов мыши.
• Избегайте горизонтальной прокрутки. Ни Яндекс, ни Google, ни пользователи не любят горизонтальную прокрутку. Если меню не подходит для экранов мобильных устройств, стоит его переосмыслить.
• Замените кнопку «Домой» логотипом. Вернуться на главную страницу должно быть легко с любой страницы сайта. Но зачем позволять скучной кнопке или символу «домой» красть экран? Вместо этого вставьте ссылку на главную страницу прямо в логотип.
• Добавьте поле поиска вверху. Не заставляйте пользователей его искать. Особенно, если это сайт электронной коммерции. Исследования показывают, что идеальное место для поиска — вверху страницы.

Примеры мобильного поиска:

Следите за CTA

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

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

Посмотрите на неудачные примеры:

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

А теперь посмотрите на удачные примеры:

Увидели разницу?

Установите кнопки обмена в соцсетях

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

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

Например, так:

Избавьтесь от навязчивых всплывающих окон

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

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

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

Посмотрим на несколько примеров:

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

Значит ли это, что вообще нельзя использовать всплывающие окна? Нет.

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

Старайтесь делать, чтобы они выглядели так:

Шаг 4. Реализуйте микроразметку

Микроразметка — это набор HTML-тегов, которые помогают роботам Яндекса и Google лучше понять, о чём контент страницы. Можно выбрать из сотен тегов и использовать их для маркировки контента на сайте (номер телефона, адрес, время работы, цены и т.д.).

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

Вот как он выглядит:

Из многих способов реализации разметки самым простым и быстрым является помощник по разметке Google.

Просто выберите тип контента, укажите URL и нажмите «Начать разметку». Далее нужно выделить элементы страницы и указать, что они собой представляют. Завершив разметку, нажмите «Создать HTML» и скопируйте готовый код.

Для проверки рекомендуем воспользоваться Rich Results Test.

Подведём итоги

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

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

Оригинал статьи: link-assistant.com.