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

Cправка — Search Console

Войти

Справка Google

  • Справочный центр
  • Сообщество
  • Search Console
  • Политика конфиденциальности
  • Условия предоставления услуг
  • Отправить отзыв

Тема отзыва

Информация в текущем разделе Справочного центра

Общие впечатления о Справочном центре Google

  • Справочный центр
  • Сообщество

Search Console

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

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

Добрый день, дорогие читатели блога! Сегодня я расскажу Вам про трудности возникших у многих вебмастеров. Наверняка многие из Вас сталкивались с сообщением в выдаче 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 пикселей

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

«Контент шире экрана» — вечная претензия от гугл

Кто смог победить гугл насчет «Контент шире экрана»? Поделитесь, пожалуйста, как с этим справиться…

У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран

Спасибо большое! Поправила. А можно еще вопрос? Там теперь вроде все нормально, но нашла еще проблемы — оказывается, кусок шапки не вмещается и виджет комментов через вк торчит во всю длину, они вызывают необходимость в горизонтальной прокрутке при просмотре с мобильных. Нужного там уже ничего нет, но этого ведь роботам не докажешь… Причем блок комментов я и сразу уменьшала, при вставке, но на моб. версии он вылезает в максимальную длину(( Куда что можно вписать, чтобы их ограничить или сделать резиновыми? Сайт http://otdelkadom.tk/

Возьмите в привычку проставлять для всех дивов box-sizing:border-box;
Например где-то вы указали ширину блока 100%, потом еще padding и блок будет выходить за пределы экрана. Довольно частая ошибка, которую мне приходится у людей исправлять.

Извиняюсь за навязчивость, но можно немного подробнее? Посмотрела в css, вроде есть такое:
#content {
float: left;
width: 70%;
padding: 2em 2em 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar {
margin-left: 70%;
width: 30%;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Или еще где-то что-то не учтено?

Извиняюсь за навязчивость, но можно немного подробнее? Посмотрела в css, вроде есть такое:
#content {
float: left;
width: 70%;
padding: 2em 2em 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar {
margin-left: 70%;
width: 30%;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Или еще где-то что-то не учтено?

У вас для #sidebar должно быть указано не margin-left:70%, а float:left. У вас же получается, что есть один блок с шириной 70%, потом есть блок с шириной 30%, и это блок отступает от первого блока аж на 70% экрана.
Картина примерно следующая:
|w:70%|___________70%_______|w:30%|
Именно отступ слева в 70% и расширяет ваш экран

Логотип вставляйте не через CSS, а просто картинкой. и для нее пропишите свойство max-width: 100%;
Аналогично виджет вк вставляете в блок с прописанным свойством max-width: 100%;
Например: <div style=»max-width: 100%;»>ТУТ КОД ВИДЖЕТА</div>

До шапки еще не добралась, а вот с вк не получается((
Код сейчас выглядит вот так: <div style=»max-width: 100%;»><!— Put this div tag to the place, where the Comments block will be —>
<div id=»vk_comments»></div>
<script type=»text/javascript»>
VK.Widgets.Comments(«vk_comments», {limit: 10, width: «400», attach: false});
</script>
<?php if ( have_comments() or comments_open() ) : ?>

<div id=»comments»></div>
А результат такой: http://joxi.ru/BA09P96sBj4Npr
Может, что-то не так делаю? Хорошо в моб версии он только в случае, если ширину поставить 250, но такая клякса убого выглядит в нормальном варианте сайта…

Пытаюсь решить эту проблему уже несколько дней. Перепробовал, все что только можно, вплоть до того, что страница просто пустая была и все равно Гуугл и Яндекс выкидывают ошибки «Горизонтальная прокрутка возможна», «Контент шире страницы», «Элементы случком близко друг к другу».

При чем проблема проявляется только на страницах детального просмотра графиков JoomGallery:

https://www.clipartsfree.de/cl…

На всех остальных страницах Стартовая, Галерея, рубрики все ОК. В чем проблема?

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

При проверке удобства просмотра сайта на мобильных устройствах часто возникает ошибка: Контент шире экрана! Из-за чего это происходит и как это исправить?

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

Например, в инструменте от google-mobile-friendly по умолчанию используется ширина в 320 пикселей.

Рекомендация №1: использовать «резиновые» элементы

Сделать это можно, указав css свойство width:100% и/или max-width:100%

Это наиболее простое и очевидное решение, например:

.content img {max-width:100%}

Примечание :использование значения auto не даёт результата, т.к. оно задаёт автоматическое определение размеров исходного элемента и никак не влияет на его адаптацию.

Рекомендация №2: используйте обёртку для элементов с margin и padding

Следующий нюанс более сложный и менее очевидный. Он связан с особенностями интерпретации CSS-свойств margin и padding в браузерах. По сути, их значения добавляются к  исходному размеру элемента.

Например, у нас есть элемент content-outer :

<body>
<div class="content-outer">
  <!-- content -->
</div>
</body>

Для него задано:

.content-outer {width:100%;padding:10}

В таком случае мы получим ширину: 100% + 10px + 10px (отступы в 10px слева и справа).

Одним из вариантов решения проблемы является использование CSS-свойства box-sizing со значением border-box , которое заставляет браузер учитывать ограничение, заданное родительским элементом. В нашем случае родительским элементом является тег body .

.content-outer {width:100%;padding:10;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box }

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

Например:

<body>
<div class="content-outer">
<div class="content-inner">
<!-- content -->
</div>
</div>
</body>

В данном случае CSS-свойства распределяются так:

.content-outer {width:100%}
.content-inner {padding:10}

Примечание: рекомендую обнулять отступы у тега body {margin:0;padding:0}


Поделись с друзьями

Поделиться

Твитнуть

Поделиться

Плюсануть

Поделиться

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


  • Вопрос задан

    более двух лет назад

  • 333 просмотра

Понравилась статья? Поделить с друзьями:

Не пропустите также:

  • Как найти начальную потенциальную энергию шара
  • Как составить чертеж модели
  • Как быстро исправить почерк у школьника 14 лет
  • Как найти украденную флешку
  • Как найти свой климат

  • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии