Главная » Полезное » Контент шире экрана

Контент шире экрана

Опубликовано admin в

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

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

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

сообщение о необходимости оптимизации в Google

Сообщение о не оптимизированной странице в выдаче Google

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

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

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

Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта. Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.

Проверка страницы в сервисе Google

Проверка страницы в сервисе Google

Контент шире экрана – вот первоначальная причина того, что к странице сайта появляется претензия у Google. Если сайт оптимизирован под мобильные устройства, то претензии появляются именно к конкретным страницам, а не всему вебресурсу.  Для того, чтобы устранить данную причину, необходимо проверит все отображаемые элементы на странице. Как правило, Google имеет претензии к изображениям, которые шире 600 пикселей (к сожалению, я не нашел точных параметров в мануале Google). Первое, что Вам необходимо сделать – это изменить размер медиафайлов до 500 пикселей (такой размер я использую для своих сайтов).

Контент шире экрана сообщение от Google

Сообщение о том, что Ваш контент шире экрана

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

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

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

  1. Выделим на сайте все возможные медиафайлы, начиная от тега Head и заканчивая Footer.
  2. Запишем размеры каждого медиафайлы
  3. Сделаем размер каждого медиафайла меньше 600 пикселей

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

Рубрики: Полезное

7 комментариев

Юлия · Ноябрь 29, 2018 в 5:22 дп

Хотелось бы увидеть скриншот после проведенных работ из сервиса Гугл;)

    admin · Декабрь 3, 2018 в 4:05 дп

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

Александр · Декабрь 21, 2018 в 3:02 пп

Чо то не выходит(

    admin · Декабрь 24, 2018 в 9:40 дп

    Александр, приветствую! Вы проверили все элементы на странице?

квезаль · Январь 30, 2019 в 8:15 пп

Нашла больше 600 картинки, пробую уменьшить, гляну результат, а то 6 страниц на сайте с этой проблемой.

    admin · Февраль 4, 2019 в 4:47 дп

    Удачи в оптимизации размера сайта!

Валерий · Февраль 4, 2019 в 3:22 пп

Хорошая подробная статья! Спасибо вам за нее

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.