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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Некорректная переадресация

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

Примеры:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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