Требования Гугл к мобильной версии сайта

Содержание

По уровню материал близок к основам, поэтому будет полезен начинающим специалистам.

В статье:

Три варианта адаптировать просмотр для мобильных
Чек-лист оптимизации сайта с пояснениями, таблица для скачивания
Бесплатные инструменты для проверки мобилопригодности

Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. Как показывает исследование PwC от 2019 года, 79% россиян покупают онлайн с мобильных.

Мобилопригодность — обязательное требование к сайтам, оптимизируете вы ресурс для Яндекса или для Google. Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток». Google начал тестировать Mobile-first index в 2016, сейчас переводит на него все сайты. Этот индекс подразумевает, что независимо от устройства выдача будет мобильной.

По словам представителя Google Джон Мюллера, перевод сайта в Mobile-first index зависит от факторов:

Дизайн крутой мобильной версии сайта

способен ли Google просканировать весь контент на страницах ресурса;
может ли этот контент отображаться на мобильных устройствах в принципе.

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

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).

Мобильная версия

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

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

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

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

Адаптивная верстка

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

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

Как с помощью Google Optimize адаптировать сайт под мобильные устройства

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

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

Почитать по теме:
Тег viewport: как настроить область просмотра в адаптивном дизайне

RESS

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

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

Как подключить мтс к Гугл плей

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

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

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

Чек-лист оптимизации сайта под мобильные устройства

Скачайте краткий чек-лист на свой на компьютер или скопируйте в Google Docs, чтобы отмечать выполнение в своем файле.

Пункты из чек-листа с пояснениями и примерами:

1. Реализация отображения на мобильных

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

2. Сайт доступен для роботов

Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt. Разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться на мобильных.

3. Ответ 200 ОК

Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

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

Почитать по теме:
Что означает код ответа сервера

4. Поддержка всех технологий

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

5. Быстрая загрузка

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

Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

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

Почитать по теме:
Как уменьшить вес сайта и ускорить загрузку страниц

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

6. Отдельный фавикон

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

Размеры фавиконов и коды для установки есть в руководстве.

7. Только вертикальная прокрутка

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

8. Крупные значки

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

9. Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.м

Для чего нужен Гугл Хром на андроиде

10. Контрастный текст

Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом. Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

11. Всплывающие окна не закрывают контент

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

12. Упрощенная регистрация

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

13. Использование геоданных

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

14. Упрощенная связь с компанией

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

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

Почитать по теме:
Повышаем юзабилити: звонок в компанию по клику с сайта

Как проверить мобилопригодность: бесплатные инструменты

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

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

Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

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

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

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

Источник: pr-cy.ru

Оптимизация сайта под мобильные устройства

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

Расскажем, как проверить и как адаптировать сайт под мобильные устройства.

Почитать позже

Как адаптивность связана с SEO

Поисковики настраивают ранжирование, исходя из интересов и удобства пользователей.

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

Mobile-friendly Google (мобайл френдли Гугл) — алгоритм, учитывающий удобство просмотра страницы на смартфонах. Он появился в 2015 году. А в 2020-м Google объявил о планах внедрения Mobile First — алгоритма, который понижает сайты, не адаптированные под мобильные устройства, даже в десктопном поиске.

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

Слабая оптимизация сайта для телефона влияет и на поведенческие факторы. Если страница неудобная — растет процент отказов, падают время и глубина просмотров. Из-за негативных ПФ у сайта снижаются позиции.

Как удалить Google аккаунт с телефона xiaomi redmi

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

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

Но у поисковых систем есть и более тонкие требования к адаптации:

не должно быть Flash-анимации и других элементов, которые не работают на смартфонах;
ширина контента соответствует экрану, контент читается без горизонтальной прокрутки;
всплывающие окна могут быть только на десктопной версии;
скорость загрузки контента на смартфоне — максимум 1 секунда;
дизайн не перегружен оформительскими и интерактивными элементами;
текст оптимизирован для просмотра на смартфонах: крупный шрифт (более 14 px), короткие абзацы, контрастный фон. Пользователи телефонов не должны напрягать зрение даже на солнце.

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

Google Mobile Friendly Test

Официальный сервис Google Mobile Friendly Test проводит проверку оптимизации для мобильных устройств Google. Нужно ввести URL или html-код и нажать «Проверить страницу». Инструмент анализирует юзабилити. Он сообщит, оптимизирована ли страница, и создаст отчет о проблемах при загрузке.

PageSpeed Insights

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

Google Search Console

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

Яндекс.Вебмастер

Проверка мобильных страниц в Яндексе проводится в соответствующем сервисе в разделе «Инструменты». Сервис проверяет технические и пользовательские параметры страницы, оценивает удобство чтения со смартфона. Требования к мобильной версии Яндекса включают наличие тега viewport, который задает видимую пользователю область страницы без горизонтальной прокрутки.

Неофициальные инструменты

Онлайн-сервисы Iloveadaptive, Adaptivator, Quirktools позволяют увидеть проект глазами мобильного пользователя. Показывают, как выглядит страница на экранах популярных устройств в разных операционных системах (IOS и Android).

Askusers

Более глубокую проверку с участием живых пользователей (вашей целевой аудитории) проводит компания Askusers. Тестировщики проверяют, удобно ли пользоваться сайтом со смартфона, фиксируют все плюсы и минусы в анкетах, записывают тест на видео, отвечают на вопросы клиента — владельца проекта. Также они проверяют, как шаблон ведет себя в разных браузерах (Google Chrome, Mozilla Firefox, Яндекс.Браузер). «Ручной» аудит дополняется выводами и рекомендациями экспертов.

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

Существует три основных способа адаптации (отдельный мобильный сайт, адаптив, динамическое обновление) и два дополнительных (AMP и турбо).

Две версии сайта — мобильная и десктопная

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

Быстрая загрузка.
Невысокая нагрузка на сервер.

Невозможно воспользоваться типовым шаблоном. Чтобы переделать сайт под мобильную версию, его нужно программировать и верстать индивидуально.
Официальная позиция Google однозначна: применять конфигурацию сайта с разными URL для разных версий сайта не рекомендуется. Адаптивный дизайн предпочтительнее.

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

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

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

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

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

Динамическое обновление

Динамическое обновление (RESS — Responsive Design and Server Side) — более сложный вариант адаптивного дизайна. Верстка тоже адаптивная, URL не меняется. Особенность в том, что корректную версию страницы через HTTP-запрос Vary выдает сервер (а не клиент, как в случае со стандартным адаптивом). При этом меняется не только CSS, но и HTML.

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

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

Как изменить уровень списка в Google docs

AMP

AMP (Accelerated Mobile Pages) — страницы для смартфонов, созданные по технологии Google. Очень быстро загружаются. Не подходят для большинства коммерческих сайтов. Рекомендуются для новостных и контент-проектов.

Высокая скорость загрузки.
Простая бесплатная реализация.

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

Турбо-страницы

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

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

Простая бесплатная реализация.
Быстрая загрузка.
Можно частично индивидуализировать дизайн.

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

AMP и Турбо могут стать удачным решением на информационных страницах. Но пока они не могут полностью заменить основные способы оптимизации интернет-площадки.

Практические советы

Проверьте файл robots.txt. В нем не должно быть директивы на запрет сканирования Javascript, CSS и других частей кода. При запрете поисковые боты могут не разобраться, есть ли на сайте адаптация под смартфоны.
Не используйте поп-апы, которые мешают просмотру контента.
Оптимизируйте первый экран: сократите контент, расположенный до заголовка, увеличьте расстояние между интерактивными элементами.
Оптимизируйте текст: шрифт должен быть достаточно крупным, контрастным к фону. Абзацы короче, больше воздуха.
Применяйте микроразметку, чтобы документ стал заметнее в выдаче.
Удалите элементы, не поддерживаемые мобильными браузерами: например, созданные с помощью Flash и Silverlight-плагинов.

Читайте на Askusers

«Недостаточно качественная страница»: что именно не нравится Яндексу и как это исправить?

Как настроить навигацию, чтобы пользователям было легко ориентироваться на интернет-площадке и чтобы ее любили поисковики? Читайте статью о навигации.

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

Узнайте, как увеличить конверсию на 41%!

Всего 3 шага и 5 минут вашего времени на пути к росту.

Источник: askusers.ru

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

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

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

Следит ли Гугл за пользователями

2. Проверка мобильной версии в Search Console

Это упрощенный вариант выявления проблем с мобильной версией:

Поисковый трафик – Удобство просмотра на мобильных устройствах

Если проблем не выявлено, Google об этом сообщит:

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

3. Пустить Google-бота

Если Google бот отстранен от сканирования частей кода JavaScript или CSS на сайте, тогда система не сможет определить, насколько сайт мобилоприодный. А так, это скажется на позициях в выдаче. Проверяем настройки в файле robots.txt.

4. Блокируем поп-апы, рекламу и все интерактивные фишки, которые перекрывают контент

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

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

А что нет:

5. Оптимизируем скорость загрузки мобильных страниц

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

Рекомендованная скорость загрузки страницы – около 1 секунды.

Тест сразу укажет на области оптимизации (кеш браузера, изображения и т.д.):

6. Форматирование текста

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

Учитывая условия, как происходит чтение с мобильного (на ходу, при плохом/неправильном освещении, на маленьком экране), рекомендации оказываются самыми очевидными:

большой шрифт (не менее 15-16px)
короткие абзацы (1-2 предложения)
длина строки до 60 символов
текст отчетливо различим на фоне (отсутствие фонового изображения, цвет фона высоко контрастен цвету текста)

Прочие рекомендации по дизайну мобильных страниц:

Используйте пустое пространство – это повышает удобство взаимодействия пальцами со страницей (площадь тапа больше курсора мышки)
Уменьшите заглавные изображения– мобильные пользователи стремятся получить ответ здесь и сейчас, а так, главная картинка, занимающая весь первый экран – не лучшее решение.
Социальные кнопки – копировать и вставлять ссылки на страницы с мобильного намного сложнее, чем в браузере. Хотите максимальной социальной огласки для контента? Упростите действие для пользователя.

К вопросу об AMP

Стоит ли использовать AMP страницы – вопрос открытый. Среди оптимизаторов существует мнение, что AMP страницы получают + в карму при ранжировании, однако стоит учесть некоторые нюансы:

AMP-формат сильно ограничивает функциональность страницы– контент демонстрируется упрощенно, со страниц исключаются интерактивные элементы (никаких всплывающих окон для подписок, лайков, репостов, никаких предложений прочитать еще статью по теме или скачать полную версию отчета). Также AMP-формат накладывает ограничение на размещение рекламных блоков на странице. Кроме того, AMP ограничивает CSS, что позволяет ускорить загрузку, но в то же время стирает «индивидуальность» страницы, делая ее шаблонной и типичной. И все старания по созданию брендового дизайна, выделяющего сайт среди сотен конкурентов, насмарку.

Ссылки на AMP страницы ведут на домен google.com, а не на ваш сайт.

Нет никаких достоверных исследований, доказывающих улучшение ранжирования AMP-страниц.

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

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

Источник: blog.getgoodrank.ru