Контент шире экрана
Страница не оптимизирована для мобильных устройств или контент шире экрана
Добрый день, дорогие читатели блога! Сегодня я расскажу Вам про трудности возникших у многих вебмастеров. Наверняка многие из Вас сталкивались с сообщением в выдаче Google, в котором говорилось о том, что страница сайта не оптимизирована для мобильных устройств. Переходя по ссылке, Вы проверяете совместимость с мобильными девайсами и Вам выдается 2 ошибки отображения: контент шире экрана и интерактивные элементы расположены слишком быстро. Сегодня я расскажу Вам, как решить эту проблему.
Оптимизация отдельной страницы под совместимость с мобильными устройствами
Проблема контент шире экрана появляется у многих сайтов. Что самое сложное, такая проблема всплывает даже в том случае, если у Вас адаптивный шаблон сайта или сделана отдельная мобильная версия. Именно созданием отдельной мобильной версией я пытался решить данный вопрос, однако все оказалось гораздо проще. Немного о других попытках решения данной проблемы:
- я устанавливал плагин сжатия изображений и медиафайлов для различных устройств
- создавал отдельную мобильную версию сайта
- изменил настройки кеширования для сайта
- сжимал CSS сайта и изменял настройки отображения
Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта. Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.
Контент шире экрана – вот первоначальная причина того, что к странице сайта появляется претензия у Google. Если сайт оптимизирован под мобильные устройства, то претензии появляются именно к конкретным страницам, а не всему вебресурсу. Для того, чтобы устранить данную причину, необходимо проверит все отображаемые элементы на странице. Как правило, Google имеет претензии к изображениям, которые шире 600 пикселей (к сожалению, я не нашел точных параметров в мануале Google). Первое, что Вам необходимо сделать – это изменить размер медиафайлов до 500 пикселей (такой размер я использую для своих сайтов).
Вторая причина возникновения проблемы контент шире экрана – ширина графических элементов превышает установленные гуглом размеры для мобильных устройств. Это могут быть слайдеры, шапка сайта или фоновые изображения. Именно проблема широкой шапки (несмотря на адаптивный дизайн) была причиной неоптимизации под мобильные устройства по параметрам Google на одном из моих сайтов. После замены шапки, сайт стал полностью оптимизированным для мобильных устройств.
Как оптимизировать сайт для мобильных устройств в Google
Для того, чтобы оптимизировать сайт под мобильные устройства и устранить проблему широкого контента необходимо провести действия по следующему алгоритму:
- Выделим на сайте все возможные медиафайлы, начиная от тега Head и заканчивая Footer.
- Запишем размеры каждого медиафайлы
- Сделаем размер каждого медиафайла меньше 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…
На всех остальных страницах Стартовая, Галерея, рубрики все ОК. В чем проблема?
Как быстро убрать ошибки мобильной адаптации в 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 ссылки на эти товары и проблема быстро себя исчерпала.
Относительно быстрой проверки страниц для успешного проходнения проверки на адаптацию пожалуй все! Если понравилась статья, то не жадничайте 🙂 делайте репост в социальные сетии и подписывайтесь на новости блога.
Удобство использования Google Mobile> Контент шире экрана
Невозможно исправить ошибку Google Mobile Usability> Контент шире экрана в Google Search Console. Я попробовал эмулятор мобильного макета Chrome от DevTools, установил ширину 320 пикселей, но горизонтальная прокрутка не появилась. Итак, в эмуляторе все выглядит нормально, но Google выдает ошибку. Затем я добавил в css:
Но никакого эффекта, ошибка все равно сохраняется.
Инструмент Test Live URL не показывает никаких ошибок, все страницы удобны для мобильных устройств.
Есть идеи, как это исправить? Я уверен, что это ошибка Google, но как ее избежать?
Ответы 2
Проверяйте реальные устройства вместо эмулятора. Удалите каждый раздел и проверяйте итеративно, вы поймете, какой из них вызывает горизонтальную прокрутку.
Горизонтальной прокрутки нет как в эмуляторах, так и в аппаратных устройствах. Только консоль поиска Google обнаруживает ошибку.
Я удалил все «position: absolute» из классов, не имеет значения, подходит ли абсолютный элемент на маленьком экране. Но эти классы были назначены скрытому контенту, который отлично вписывался в самый маленький экран смартфона, а также большинство из них не были связаны ни с одним элементом страницы, потому что элементы были защищены паролем.
Я нашел способ быстрее отображать страницы, не дожидаясь долгого времени после нажатия кнопки «запросить индексацию». Сначала создайте новую страницу, используя шаблон сайта и CSS, текст на странице должен быть уникальным (в этом поможет Lorem Ipsum Generator). Во-вторых, создайте еще один файл карты сайта, в котором только один URL указывает на новый файл, отправьте его, и через 5 минут вы просканируете и проиндексируете страницу. Это очень помогает при поиске ошибки в шаблоне или CSS.
Редактировать: Поскольку удаление абсолютного положения нарушило дизайн пользовательского интерфейса, я вернул его с помощью javascript.
Как исправить ошибки «Контент шире экрана», «Интерактивные элементы расположены слишком близко»?
В последнее время почти на всех моих сайтах при проверке на сервисе https://search.google.com/test/mobile-friendly у многих моих сайтов появились одинаковые ошибки «Контент шире экрана», «Интерактивные элементы расположены слишком близко».
При этом тестирование верстки не дает никаких «зацепок», что конкретно не нравится сервису — страницы отображаются корректно, горизонтальных скролов нет, навигация удобная (межстрочные интервалы, отступы и т.п.).
Есть подозрение, что проблема в какой-то особенности методологии проверки, про которую я не знаю. Скриншоты, которые снимает сервис с сайтов в момент тестирования, почему-то без CSS-стилей — просто разметка.
При проверке удобства просмотра сайта на мобильных устройствах часто возникает ошибка: Контент шире экрана! Из-за чего это происходит и как это исправить?
Очевидно, что ошибка связанна с тем, что на странице есть элемент, который выходит за область просмотра 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}
Поделись с друзьями
Поделиться
Твитнуть
Поделиться
Плюсануть
Поделиться
Убедиться, что ваш сайт работает как можно быстрее и проходит все возможные стандартные тесты поисковой системы Google, — это один из лучших способов начать свою SEO-стратегию, поскольку ваш сайт не достигнет такой большой аудитории, как вы хотели, прежде чем вы. решим все возможные технические проблемы, обнаруженные системой Google Search Console.
Но иногда сообщения об ошибках могут показаться непонятными, а ошибки невозможно исправить — однако это не так!
Убедитесь, что вы исправили все ошибки Search Console с помощью приведенных ниже руководств, а затем внимательно посмотрите на свой рейтинг Google PageSpeed Insights, чтобы ваш сайт был максимально оптимизирован и поднялся в результатах Google.
Категории проблем поиска Google для решения
- Проблемы покрытия
- Основные проблемы с видами в Интернете
- Проблемы с мобильным удобством использования
- Проблемы с усилителями
- Улучшения проблемы
Решение проблем с покрытием Google Search Console
Проблемы с покрытием в основном означают, что некоторые из ваших веб-страниц по какой-то причине недоступны для робота Google — обычно это самые простые проблемы, поскольку они не связаны с глубокими изменениями, а только с устранением неполадок на сервере.
Решение проблем с ошибкой сервера (5xx)
Ошибка сервера консоли поиска (5xx) обычно означает, что сервер не был доступен во время проверки ботом Google.
Возможно, с вашим сайтом все в порядке, просто слишком много запросов принималось одновременно, и сервер не мог получать или отвечать.
Также может случиться так, что ваш сервер не работает, и в этом случае вам следует проверить, что произошло с хостом вашего веб-сайта, и получить лучший дешевый веб-хостинг на случай, если ваш хост не сможет решить проблему.
Решение проблем с ошибкой перенаправления
Если вы получаете сообщение об ошибке перенаправления в консоли поиска Google, это может быть связано с тем, что одна страница перенаправляется на другую страницу, которая сама не перенаправляется должным образом, создавая таким образом бесконечный цикл, который невозможно решить.
Убедитесь, что исходная страница и целевая страница работают нормально, и дважды проверьте файл .htaccess, который содержит инструкции по перенаправлению для вашего веб-сайта.
Вы можете убедиться, что вы правильно активировали настройку HTTPS для HTaccess force, поскольку перенаправление с незащищенной страницы на защищенную и с такой же настройкой обратной настройки может привести к проблеме с ошибкой перенаправления.
Решение проблемы со сканированием отправленного URL
Отправленный URL-адрес имеет проблему со сканированием, как правило, означает, что Google может получить доступ к вашей странице, но страница каким-то образом не вернула ответ, который мог бы понять робот сканирования Google.
Это может означать, что данные где-то были скомпрометированы, но в большинстве случаев это будет в основном потому, что ответ занял слишком много времени, и Google не смог вовремя получить полный ответ с вашего сервера.
В этом случае убедитесь, что вы используете лучший дешевый веб-хостинг, который будет достаточно быстрым, чтобы ответить вовремя, и что ваш веб-сайт оптимизирован для оптимальной оценки Google PageSpeed Insights и что вы становитесь зеленым, если это возможно, например, используя Система Site Speed Accelerator, чтобы сделать ваш сайт достаточно быстрым.
Решение проблем с Core Web Vitals в Google Search Console
Решение проблемы с LCP Core web Vitals: более 4 с (мобильный)
Проблема с LCP: более 4 секунд на мобильном устройстве означает, что странице вашего веб-сайта требуется более 4 полных секунд, чтобы получить что-либо для печати и отобразить на мобильном устройстве, которое запросило это, и эта продолжительность считается слишком большой, чтобы соответствовать любой действующей веб-странице.
Значение LCP: Самая большая содержательная краска
Самый простой способ решить эту проблему — убедиться, что ваша оценка Google PageSpeed Insights имеет зеленый цвет и что время загрузки вашей страницы как можно быстрее, путем внедрения всех лучших практик скорости Интернета, таких как отложенная загрузка изображений, оптимизация Javascript и CSS, и многое другое.
Чтобы все эти вещи были применены на вашем веб-сайте и прошли проверку Core Web Vitals LCP, самым быстрым и надежным решением является внедрение Site Speed Accelerator, который решит все эти проблемы — и даже больше — от вашего имени, и также реализуйте любую будущую оптимизацию, которая возникнет.
Решение проблем с удобством использования мобильных устройств в Google Search Console
Проблемы с удобством использования мобильных устройств связаны только с дизайном вашего веб-сайта, и, хотя он может отлично отображаться на вашем рабочем столе во время игры с вашими темами и таблицами стилей, он может не работать на мобильных устройствах по разным причинам.
Решение этих проблем гарантирует, что ваш сайт получит столько мобильного трафика, сколько он того заслуживает!
Решение проблемы с текстом, слишком мелким для чтения
Эта ошибка говорит сама за себя, поскольку она означает, что ваш дизайн не позволяет стандартному мобильному телефону отображать читаемый текст с вашими настройками, поскольку текст слишком мал для чтения человеком.
Чтобы решить эту проблему, вам придется изменить тему своего сайта или обновить CSS, чтобы он был достаточно подходящим для мобильных устройств.
В то же время вы можете использовать возможность устранить блокирующие рендеринг JavaScript и CSS над содержимым поля и, таким образом, улучшить всю свою стратегию CSS.
Решение проблемы с неустановленным окном просмотра
Неустановленное окно просмотра сначала может показаться пугающим, поскольку эти термины используются только дизайнерами.
Однако это просто означает, что короткая инструкция в вашем CSS не была установлена, и эта инструкция необходима любому браузеру, чтобы понять, как ваш сайт должен отображаться в другой конфигурации дизайна, чем та, которая предназначена для большого экрана — очень важно для мобильных телефонов, поскольку почти каждый тип мобильного телефона имеет свой размер экрана и разрешение.
Обычно это можно решить, вставив эту стандартную инструкцию CSS в вашу основную таблицу стилей:
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1" />
Решение проблемы слишком близких друг к другу интерактивных элементов
Слишком близкие друг к другу интерактивные элементы также не требуют пояснений и означают, что на мобильном дисплее некоторые ссылки расположены слишком близко друг к другу.
Единственный способ решить эту проблему — дважды проверить отображение веб-сайта на мобильном устройстве либо прямо в браузере (мобильный режим: CTRL + M в Mozilla Firefox и CTRL + Shift + I в Google Chrome), либо на мобильном устройстве.
Затем, чтобы отделить элементы друг от друга, вам придется либо настроить таблицу стилей дизайна, если вы знаете, как это сделать, либо изменить тему веб-сайта, если вы используете CMS, такую как решение для ведения блогов WordPress.
Справка Search Console — интерактивные элементы расположены слишком близко друг к другу
Решение проблемы с контентом шире экрана
Ошибка контента, превышающего ширину экрана, обычно означает, что вы включаете изображения или другие элементы, которые шире стандартного мобильного дисплея.
Просто убедитесь, что эскизы создаются и отображаются для ваших изображений, и что любой элемент, такой как таблица данных, может быть масштабирован при отображении на меньшем экране — в последнем случае единственным решением может быть удаление лишних столбцов или обеспечение это содержание не слишком велико.
Содержание справки Search Console шире экрана
Решение проблемы Viewport, не установленной на ширину устройства
Эта проблема аналогична проблеме «Viewport not set» и может быть решена, как описано выше, путем добавления простой строки инструкции в вашу таблицу стилей CSS.
Для области просмотра справки Search Console не задано значение ширина устройства
Решение проблем с AMP в Google Search Console
Есть много разных проблем с AMP, поскольку эта технология может быть сложной для реализации и все еще находится в разработке.
Однако проверка того, что ваш веб-сайт проверяется на соответствие AMP, — отличный способ включить ваши страницы в Google Discover или в Новости Google при условии, что ваш контент соответствует требованиям.
Это могло бы просто принести вам потрясающую дополнительную посещаемость, которую вы не получите, только оптимизировав свой сайт для настольных компьютеров!
Решение ссылочного URL AMP не является AMP
Эта ошибка является причиной всех ошибок AMP и просто означает, что на странице в какой-то момент была ошибка AMP, и поэтому она еще не считается действительной страницей AMP.
Значение AMP: ускоренные мобильные страницы
Прежде всего, убедитесь, что все остальные ошибки AMP устранены, так как любая отдельная ошибка AMP сделает страницу непригодной для отображения в системе AMP.
Устранение атрибута Disallowed или значения атрибута, присутствующего в теге HTML.
В тегах HTML AMP разрешен только определенный набор атрибутов, а некоторые из них могут быть разрешены в стандартном HTML.
Убедитесь, что ваш код AMP соответствует требованиям кода AMP и что все лишние атрибуты удалены из всего вашего контента.
Эта ошибка обычно возникает из-за плагинов или другого кода, который изменяет ваш контент по разным причинам и не был оптимизирован для AMP — самым простым решением может быть отключение их для отображения AMP.
Решение проблемы Тег img следует заменить на эквивалентный тег amp-img.
Все изображения на страницах AMP должны использовать специальный тег AMP-IMG вместо стандартного тега IMG в HTML. Убедитесь, что все ваши изображения соответствуют этому правилу AMP и включают все обязательные атрибуты, такие как ширина и высота.
Устранение присутствия запрещенного тега.
Эта проблема обычно означает, что ваш дизайн забыл исключить любой контент, который не может отображаться на странице AMP, и, следовательно, является ненужным дополнительным контентом.
Пример запрещенного тега в AMP: tbody
Решение тега сценария компонента AMP присутствует, но не используется.
Избегайте включения скриптов, которые не нужны для отображения вашей страницы и вообще не используются на ней, поскольку это замедляет загрузку всей страницы и отображение контента для потенциальных посетителей.
При решении HTML-тега AMP отсутствуют атрибуты макета.
Некоторые обязательные атрибуты AMP отсутствуют в одном из HTML-содержимого вашей веб-страницы, например, высота или ширина изображения в теге IMG.
Убедитесь, что весь обязательный контент и атрибуты AMP присутствуют в вашем коде HTMl.
Решение проблемы со сканированием
Что касается стандартных страниц, сканирование Google не может добраться до вашей страницы. Убедитесь, что хост вашего веб-сайта работает должным образом, что ваш сайт не отключен и что ваша оценка Google PageSpeed Insights достаточно хороша для обеспечения своевременной загрузки данных с любого другого сервера или посетителя.
Решение проблемы Документ слишком сложен.
Это происходит, когда ваш DOM слишком длинный, а это означает, что ваш HTML-документ включает слишком много элементов и слишком много подэлементов.
Чтобы решить эту проблему, дважды проверьте, не включаете ли вы ненужный контент на свою страницу, например, автоматически генерируемые дополнительные ссылки.
Страница AMP должна быть сосредоточена на главном и не должна быть слишком длинной, чтобы обеспечить быструю загрузку.
Решение Обязательный атрибут отсутствует в теге HTML.
AMP требует наличия нескольких атрибутов, которые не нужны на стандартных веб-страницах.
Например, обязательно декларировать ширину и высоту всех изображений, включенных в ваши веб-страницы, в то время как это даже не важно для стандартной веб-страницы.
Этот вопрос необходимо проверять в каждом конкретном случае, и, возможно, потребуется более подробное изучение руководства AMP.
Для решения тега A на этой странице требуется тег сценария компонента AMP, который отсутствует.
Убедитесь, что компонент сценария AMP включен, на случай, если вы встраиваете сценарии на свои страницы, и убедитесь, что эти сценарии разрешены.
Документация по AMP Accelerated Mobile Pages
Решение Custom JavaScript не разрешено.
AMP-страницы не позволяют включать ваши собственные скрипты, а только стандартный текст, изображения и несколько интерактивных элементов.
Чтобы продолжить, вы должны убедиться, что ваш собственный JavaScript исключен из ваших страниц AMP.
Возможно, вы включаете внешние библиотеки, которые не оптимизированы для AMP, и поэтому ваши страницы не будут проверяться, если вы не удалите эти сценарии для отображения AMP — вы все равно можете сохранить их для стандартного отображения, но они должны быть исключен из AMP.
Исправлено: пользовательский JavaScript не разрешен AMP, Google Search Console
Решение ошибки сервера (5xx)
Как указано выше, это означает, что ваш сервер был недоступен и может быть только временной проблемой из-за перегрузки сети или более серьезной, которая может потребовать от вас выбора лучшего дешевого поставщика веб-хостинга для ее решения.
Solving the Google Search Console Улучшения проблемы
Проблемы с улучшением поиска Google не совсем проблематичны и могут получить наименьшее фокус, поскольку они не мешают правильному отображать ваших веб -сайтов или соответствующим образом ранжирование.
Тем не менее, решение их может привести к тому, что ваши сайты лучше понимают браузеры, поисковые системы или роботы, которые ползут ваши веб -свойства, поскольку эти улучшения обычно предназначены для добавления невидимых богатых данных в ваш мультимедийный контент.
Решение вопросов улучшения видео
Решение пропущенных проблем с описанием поля
Эта проблема означает, что схема videoObject Schema Markup для ваших встроенных видеороликов не заполнена должным образом, так как описание является обязательным для любого видео, включенного на веб -странице.
Если вы включаете видео на свои веб -страницы, которые автоматически внедряют на ваш веб -сайт внешней службой, такой как %%* ezoic* Video Player%другом Поля правильно заполнены.
Количество пользователей интернета с мобильных девайсов увеличивается ежедневно, а в многих странах этот показатель в разы больше чем с компьютера. А это прежде всего говорит о важности разработки адаптивного дизайна для комфортного использования сайтом. Мобильная адаптация страниц сайта сегодня является важным пунктом в чек-листе при разработке нового дизайна, а также ее наличие влияет на успешность продвижения в поисковых системах.
Поисковые системы Google и Яндекс неоднократно заявляли, что очень важно адаптировать сайт для просмотра на небольшом экране. Это в свою очередь позволит:
- В разы увеличить конверсию сайта.
- Улучшить позиции сайта в поиске с мобильного телефона.
- Комфортно пользоваться сайтом.
В апреле 2016 года Google запустил новы алгоритм, и теперь в поиске с мобильных телефонов и планшетов предпочтение отдается сайтам, которые имеют мобильную адаптацию.
Как узнать ошибки мобильной адаптаци в Google Search Console
- Прежде всего сайт, который нужно проверить, необходимо добавить в «Гугл Вебмастер».
- Потом подтвердить на него права собственности. И далее обождать парочку дней, пока собереться информация.
- Перейти в раздел «Поисковый трафик», а далее «Удобство просмотра на мобильных устройствах».
Когда сайт не имеет проблем с адаптацией:
Если на вашем сайте не обнаружены недочеты с отображением сайта на мобильных устройствах, которые сказываются на удобстве для пользвателей и снижают рейтинг сайта в результатах мобильного поиска, то вы увидете такое уведомление:
Какие проблемы с моб.адаптацией могут возникнуть:
- Слишком мелкий шрифт;
- Значение метатега viewport не задано;
- Используются несовместимые плагины;
- Контент шире экрана;
- Интерактивные элементы расположены слишком близко.
Чтоб полностью пройти проверку удобства просмотра на мобильных устройствах — нужно прежде всего поработать с шаблоном сайта. Если ваших познаний в области css и html достаточно, то с небольшим применением магии у вас все должно получиться. В противном случае лучше заказать адаптивную верстку.
После того, как шаблон сайта полностью стал адаптивный, вам следует просто обождать повторного обхода проблемных страниц роботом Googlebot. Особенно это актуально, когда страниц очень много. Постепенно страницы пройдут проверку. В среднем это 1-3 месяца, в зависимости от количества проблемных страниц.
Есть приятная новость! Теперь можно значительно ускорить процесс повторного обхода страниц с ошибками. Гугл добавил новый функционал, который позволяет «пригласить» робота Googlebot и в кротчайшие сроки (приблизительно 12-36 часов) страница повторно будет проверена на адаптивность. Очень полезная фишка, которой ранее сильно не хватало. Ниже скриншот, как быстро уходят ошибки:
Как повторно «пригласить» гугл-бота быстро проверить страницу?
- В консоле Гугл Вебмстер перейти в раздел «Поисковый трафик»;
- Выбрать «Удобство просмотра на мобильных устройствах»;
- Выбрать тип проблемы, например «Контент шире экрана»;
- Далее нажать на страницу с проблемой, появиться модальное окно, в котором следует нажать на кнопку «Проверить текущую версию»;
- Проходим проверку капчи, а далее пойдет проверка страницы;
- Если результат отрицательный, пожелает поработать с сайтом еще:
- При успешных результатах проверки, появиться кнопка «ДОБАВИТЬ В GOOGLE», которая позолит пригласить робота Googlebot для повторного обхода этой страницы в кротчайшие сроки.
Правда на данный момент есть один минус у «приглашения» — это то, что нет возможности массовой проверки всех страниц с ошибками. Необходимо заходить на каждую страницу и приглашать проверить. Если страниц реально много — можно быстро «сгореть».
В последнее время заметил, что немного «колбасит» результаты проверки и переодически появляются ошибки на разных сайтах, в пределах до 5 штук. В данном случае пригласить робота Googlebot на них не составит особого труда, и кстати очень нужный функционал! Расскажу почему:
Приблизительно год назад клиент обратился к нам разработать ему новый дизайн для магазина на движке OpenCart и понятное дело с адаптивной версткой. Все успешно сделали, доволен, оставалось только пройти проверку в консоле вебмастера, но это затянулось.
На тот момент у него было прядка 30 тысяч товаров. Вообщем, робот Googlebot начал повторный обход страниц и затянулось где-то на 4 месяца. И еще 2 месяца ему не нравилось 3 карточки товара, не смотря на то, что с ними было все в порядке! Тогда мы решили достать «волшебную палку» и применить ее в отношении гугл-бота. И вы знаете, через 3 дня произошло чудо — эти страници успено прошли проверку 
Относительно быстрой проверки страниц для успешного проходнения проверки на адаптацию пожалуй все! Если понравилась статья, то не жадничайте 

Александр Большаков
it-batman















