"Контент шире экрана" — вечная претензия от гугл
feniks79
До шапки еще не добралась, а вот с вк не получается((
Код сейчас выглядит вот так: <div style="max-width: 100%;"><!— Put this div tag to the place, where the Comments block will be —>
<div /> <script type="text/javascript">
VK.Widgets.Comments("vk_comments",
</script>
<?php if ( have_comments() or comments_open() ) : ?>
<div /> А результат такой: http://joxi.ru/BA09P96sBj4Npr
Может, что-то не так делаю? Хорошо в моб версии он только в случае, если ширину поставить 250, но такая клякса убого выглядит в нормальном варианте сайта.
Пытаюсь решить эту проблему уже несколько дней. Перепробовал, все что только можно, вплоть до того, что страница просто пустая была и все равно Гуугл и Яндекс выкидывают ошибки «Горизонтальная прокрутка возможна», «Контент шире страницы», «Элементы случком близко друг к другу».
При чем проблема проявляется только на страницах детального просмотра графиков JoomGallery:
На всех остальных страницах Стартовая, Галерея, рубрики все ОК. В чем проблема?
Страница не оптимизирована для мобильных устройств или контент шире экрана
Добрый день, дорогие читатели блога! Сегодня я расскажу Вам про трудности возникших у многих вебмастеров. Наверняка многие из Вас сталкивались с сообщением в выдаче Google, в котором говорилось о том, что страница сайта не оптимизирована для мобильных устройств. Переходя по ссылке, Вы проверяете совместимость с мобильными девайсами и Вам выдается 2 ошибки отображения: контент шире экрана и интерактивные элементы расположены слишком быстро. Сегодня я расскажу Вам, как решить эту проблему.
Сообщение о не оптимизированной странице в выдаче Google
Оптимизация отдельной страницы под совместимость с мобильными устройствами
Проблема контент шире экрана появляется у многих сайтов. Что самое сложное, такая проблема всплывает даже в том случае, если у Вас адаптивный шаблон сайта или сделана отдельная мобильная версия. Именно созданием отдельной мобильной версией я пытался решить данный вопрос, однако все оказалось гораздо проще. Немного о других попытках решения данной проблемы:
- я устанавливал плагин сжатия изображений и медиафайлов для различных устройств
- создавал отдельную мобильную версию сайта
- изменил настройки кеширования для сайта
- сжимал CSS сайта и изменял настройки отображения
Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта. Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.
Проверка страницы в сервисе Google
Контент шире экрана – вот первоначальная причина того, что к странице сайта появляется претензия у Google. Если сайт оптимизирован под мобильные устройства, то претензии появляются именно к конкретным страницам, а не всему вебресурсу. Для того, чтобы устранить данную причину, необходимо проверит все отображаемые элементы на странице. Как правило, Google имеет претензии к изображениям, которые шире 600 пикселей (к сожалению, я не нашел точных параметров в мануале Google). Первое, что Вам необходимо сделать – это изменить размер медиафайлов до 500 пикселей (такой размер я использую для своих сайтов).
Сообщение о том, что Ваш контент шире экрана
Вторая причина возникновения проблемы контент шире экрана – ширина графических элементов превышает установленные гуглом размеры для мобильных устройств. Это могут быть слайдеры, шапка сайта или фоновые изображения. Именно проблема широкой шапки (несмотря на адаптивный дизайн) была причиной неоптимизации под мобильные устройства по параметрам Google на одном из моих сайтов. После замены шапки, сайт стал полностью оптимизированным для мобильных устройств.
Как оптимизировать сайт для мобильных устройств в Google
Для того, чтобы оптимизировать сайт под мобильные устройства и устранить проблему широкого контента необходимо провести действия по следующему алгоритму:
- Выделим на сайте все возможные медиафайлы, начиная от тега Head и заканчивая Footer.
- Запишем размеры каждого медиафайлы
- Сделаем размер каждого медиафайла меньше 600 пикселей
После проведения этих нехитрых действий можно проверять страницу в инструменте оптимизации под мобильные устройства. Как можно увидеть, изменение интерактивных элементов может потребоваться лишь в редких случаях. Надеюсь, моя статья была полезна для Вас, и Вы смогли решить проблему контент шире экрана. Если в ходе решения у Вас появились дополнительные проблемы, обязательно пишите о них в комментариях, постараемся разобраться.
Контент шире экрана проблема google как решить?
Добрый день. Думаю уже надоели вопросы про гугл и ошибку мобильной версии. Ребята это мой первый проект, я чайник пока еще в кодах не разбираюсь, не судите строго))) Делаю «проверка страницы на сайте» все оптимизированно, но гугл всякий раз плюется((( Посмотрите плиз в чем проблема?
https://xn--80aaadrsbqfc0agfedvwq7d.xn--p1ai/
человек вроде бы указал где проблема, но как ее исправить я не знаю и в этом ли проблема?
Как быстро убрать ошибки мобильной адаптации в Search Console?
Количество пользователей интернета с мобильных девайсов увеличивается ежедневно, а в многих странах этот показатель в разы больше чем с компьютера. А это прежде всего говорит о важности разработки адаптивного дизайна для комфортного использования сайтом. Мобильная адаптация страниц сайта сегодня является важным пунктом в чек-листе при разработке нового дизайна, а также ее наличие влияет на успешность продвижения в поисковых системах.
Поисковые системы Google и Яндекс неоднократно заявляли, что очень важно адаптировать сайт для просмотра на небольшом экране. Это в свою очередь позволит:
- В разы увеличить конверсию сайта.
- Улучшить позиции сайта в поиске с мобильного телефона.
- Комфортно пользоваться сайтом.
Как узнать ошибки мобильной адаптаци в Google Search Console
- Прежде всего сайт, который нужно проверить, необходимо добавить в «Гугл Вебмастер».
- Потом подтвердить на него права собственности. И далее обождать парочку дней, пока собереться информация.
Когда сайт не имеет проблем с адаптацией:
Если на вашем сайте не обнаружены недочеты с отображением сайта на мобильных устройствах, которые сказываются на удобстве для пользвателей и снижают рейтинг сайта в результатах мобильного поиска, то вы увидете такое уведомление:
Какие проблемы с моб.адаптацией могут возникнуть:
- Слишком мелкий шрифт;
- Значение метатега viewport не задано;
- Используются несовместимые плагины;
- Контент шире экрана;
- Интерактивные элементы расположены слишком близко.
Чтоб полностью пройти проверку удобства просмотра на мобильных устройствах — нужно прежде всего поработать с шаблоном сайта. Если ваших познаний в области css и html достаточно, то с небольшим применением магии у вас все должно получиться. В противном случае лучше заказать адаптивную верстку.
После того, как шаблон сайта полностью стал адаптивный, вам следует просто обождать повторного обхода проблемных страниц роботом Googlebot. Особенно это актуально, когда страниц очень много. Постепенно страницы пройдут проверку. В среднем это 1-3 месяца, в зависимости от количества проблемных страниц.
Есть приятная новость! Теперь можно значительно ускорить процесс повторного обхода страниц с ошибками. Гугл добавил новый функционал, который позволяет «пригласить» робота Googlebot и в кротчайшие сроки (приблизительно 12-36 часов) страница повторно будет проверена на адаптивность. Очень полезная фишка, которой ранее сильно не хватало. Ниже скриншот, как быстро уходят ошибки:
Как повторно «пригласить» гугл-бота быстро проверить страницу?
- В консоле Гугл Вебмстер перейти в раздел «Поисковый трафик»;
- Выбрать «Удобство просмотра на мобильных устройствах»;
- Выбрать тип проблемы, например «Контент шире экрана»;
- Далее нажать на страницу с проблемой, появиться модальное окно, в котором следует нажать на кнопку «Проверить текущую версию»;
Правда на данный момент есть один минус у «приглашения» — это то, что нет возможности массовой проверки всех страниц с ошибками. Необходимо заходить на каждую страницу и приглашать проверить. Если страниц реально много — можно быстро «сгореть».
В последнее время заметил, что немного «колбасит» результаты проверки и переодически появляются ошибки на разных сайтах, в пределах до 5 штук. В данном случае пригласить робота Googlebot на них не составит особого труда, и кстати очень нужный функционал! Расскажу почему:
Приблизительно год назад клиент обратился к нам разработать ему новый дизайн для магазина на движке OpenCart и понятное дело с адаптивной версткой. Все успешно сделали, доволен, оставалось только пройти проверку в консоле вебмастера, но это затянулось.
На тот момент у него было прядка 30 тысяч товаров. Вообщем, робот Googlebot начал повторный обход страниц и затянулось где-то на 4 месяца. И еще 2 месяца ему не нравилось 3 карточки товара, не смотря на то, что с ними было все в порядке! Тогда мы решили достать «волшебную палку» и применить ее в отношении гугл-бота. И вы знаете, через 3 дня произошло чудо — эти страници успено прошли проверку 🙂 А если серьезно, мы просто повешали на главной странице 3 ссылки на эти товары и проблема быстро себя исчерпала.
Относительно быстрой проверки страниц для успешного проходнения проверки на адаптацию пожалуй все! Если понравилась статья, то не жадничайте 🙂 делайте репост в социальные сетии и подписывайтесь на новости блога.
