Распространенные ошибки

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

Блокировка JavaScript, CSS и графических файлов

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

  1. Убедитесь, что Googlebot может сканировать JavaScript, CSS и графические файлы. Для этого в инструменте Google Search Console есть функция Сканер Google для сайтов. Эта функция моделирует процесс сканирования и показа страниц. С ее помощью можно найти и исправить ошибки индексирования сайта.

  2. Проверьте свой файл robots.txt в Google Search Console.

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

  4. Если у вас есть отдельные мобильные версии страниц, проверьте их наряду с URL для компьютеров, чтобы убедиться в корректности переадресации.

Невоспроизводимый контент

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

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

Невоспроизводимое видео

Такое сообщение вряд ли понравится пользователю.

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

Если на вашем сайте есть анимированный контент в формате Flash или проприетарный проигрыватель, замените их на HTML5. Такая анимация поддерживается во всех браузерах, а создать ее можно с помощью программы Google Web Designer.

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

Ознакомьтесь с рекомендациями по добавлению видео в нашем руководстве.

Неправильные переадресации

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

Примеры:

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

  • Обычная версия сайта поддерживает переадресацию не для всех мобильных устройств. Например, выполняется переадресация только устройств Android, но не iOS или Windows Phone.

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

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

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

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

Ошибки 404 на мобильных устройствах

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

Ошибки 404 на мобильных устройствах

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

Успешная переадресация
  • Воспользуйтесь Google Search Console. Если вы подтвердили свой сайт, то получите уведомление в центре сообщений.

  • Если у вас есть сайт для смартфонов с отдельным URL, настройте на сервере переадресацию пользователей мобильных устройств.

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

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

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

  • Просмотрите отчет об ошибках сканирования в Google Search Console. Список URL, которые возвращают ошибку 404 при просмотре на смартфонах, представлен на соответствующей вкладке.

Старайтесь не использовать межстраничные объявления

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

Межстраничные объявления, ориентированные на установку приложения

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

Старайтесь не использовать межстраничные объявления
Межстраничное объявление мешает пользователям.
Баннер с рекламой приложения
Баннер HTML с рекламой приложения не мешает пользователям.
  • Используйте простой баннер для рекламы приложения, встроенный в страницу. Выберите подходящий вариант:

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

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

  • Проверьте ссылки и убедитесь, что они ведут на нужные страницы.

Медленная загрузка страниц

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

С помощью инструмента Google PageSpeed Insights узнайте, какие элементы вашей страницы могут замедлять загрузку страниц (эти данные приведены в разделе "Скорость"). Постарайтесь устранить неполадки с пометкой "Исправьте обязательно".

Подробнее об этом можно прочитать в следующих статьях:

Как правильно настроить область просмотра

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

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

Маленький размер шрифта

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

Интерактивные элементы расположены слишком близко

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

Оставить отзыв о...

Текущей странице