Контент шире экрана google как исправить

Контент шире экрана. Как исправить?

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

Ответы на пост (3) Написать ответ
26.04.2018 17:50

Нет, не нормально: https://cdn1.savepice.ru/uploads/2018/4/26/9d4a38b9ef764faaf021b9205de221f1-full.jpg
Как исправить? Сверстать адаптивные страницы. В первую очередь обратить внимание на вёрстку таблиц. Но и в других элементах тоже есть проблемы. Тема как бы адаптивная, но с жуткими косяками.

29.04.2018 15:58

Удалось более-менее решить вашу проблему просто добавив:

@media screen and (max-width: 414px) .blok1, .blok2, .blok3, .blok4, .blok5 width: 100%;
>

input[type=»reset»], input[type=»button»], input[type=»submit»] margin-left: -55px;
>
>

Костыли, но проблему должны решить

11.05.2018 23:08
Чтобы убрать контент шире экрана: CSS для моб. устройств (вся @media) прописуете:
html, body

По близким элементам:
Пробуйте по очереди удалять или комментировать элементы на странице сайта и запускать на проверку в https://search.google.com/test/mobile-friendly , так вычислите, где нестыковка по адаптации сайта под моб. устройства. После этого проще найти ошибку.

Контент шире экрана проблема google как решить?

Добрый день. Думаю уже надоели вопросы про гугл и ошибку мобильной версии. Ребята это мой первый проект, я чайник пока еще в кодах не разбираюсь, не судите строго))) Делаю «проверка страницы на сайте» все оптимизированно, но гугл всякий раз плюется((( Посмотрите плиз в чем проблема?
https://xn--80aaadrsbqfc0agfedvwq7d.xn--p1ai/
человек вроде бы указал где проблема, но как ее исправить я не знаю и в этом ли проблема?

Вопрос задан более трёх лет назад
380 просмотров

1 комментарий

Средний 1 комментарий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контент шире экрана — что это за ошибка? Сайт на wordpress

В панели управления google у меня стали появляться ошибки «контент шире экрана», wordpress не обновлял, никаких нововведений не делал. Как можно исправить эту ошибку?

Автор: Кирилл

Рекомендуйте нас друзьям

Подписаться на уведомления
Отписаться от уведомлений

Частный ответ
Рейтинг ответа

Данная ошибка связана с тем, что проверяемая страница содержит элементы, которые выходят за рамки области просмотра viewport.

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

не указан тег viewport:

присутствует горизонтальная прокрута;
можно найти ошибку (элемент, выходящий за рамки области просмотра) вручную: открыть Google Chrome => открыть инструменты разработчика (Ctrl+Shift+M) => подробно изучить полученную информацию.

Дата сообщения: 26.03.2019, 11:08