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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

WordPress тема Hueman проблема с удобством для мобильных

WordPress тема Hueman проблема с удобством для мобильных

Проблема в Google Search Console с удобством для мобильных возникла на теме Hueman. Это подтолкнуло к написанию статьи. Вероятно такая ошибка может быть и на других темах WordPress. Забегу вперед, причиной ошибки было подключение рекламы Google AdSense. Даже если Вы не размещаете рекламу от Google на своем сайте, этот материал может быть Вам полезен. А теперь по порядку.

Проблема в Google Search Console у темы Hueman связанная с удобством для мобильных

Проблема оказалась связана с автоматизированными объявлениями Google AdSense, размещенными на сайте. Получилось совсем некрасиво. Сервис Google AdSense своими рекламными объявлениями Google «испортил» удобство для мобильных, которое контролирует другой сервис Google Search Console. В результате Google «обиделся» на сайт и понизил выдачу.

Удобство для мобильных в Google Search Console сайт с темой Hueman

На скриншоте видны три ошибки в порядке убывания их количества. Графики тенденции уже нормализовались, перестали расти и пошли вниз. Потому, что вчера все ошибки были исправлены.

Слишком мелкий шрифт

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

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

Эта ошибка и первая, «Интерактивные элементы расположены слишком близко», были обнаружены на одних и тех же страницах, что навело на мысль о том, что они имеют общую причину возникновения.

Hueman, контент шире экрана при отображении на мобильном

Сначала посмотрим как отображается контент темы на мобильном устройстве без подключения автоматизированных объявлений Google AdSense. Для этого надо перейти в настройки темы. В административной панели редактора WordPress нажмите «Внешний вид», затем «Настроить».

Давайте подключим автоматизированные объявления Google AdSense. Если не очень понятно как это сделать или Вы просто забыли, то можете прочитать здесь.

Обычно автоматизированные объявления Google появляются на сайте довольно быстро. В пределах одной-двух минут после их включения.

Чтобы следовать далее нужно очистить весь кэш страниц. Иначе Вы можете увидеть тот вариант страницы, который был кэширован перед подключением объявлений.

После этого снова зайдите в настройки темы. Снова включите иконку с изображением мобильного. Что теперь? Смотрите сами.

Рекламное объявление «не видит» размера страницы сайта. Понятно, что это дефект верстки, понятно, что Google тут и не причем. Давайте будем честными, на самом деле причина именно в коде темы. Но Вы вполне можете столкнуться с такой проблемой на любой теме.

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

Search Console заваливает ошибками, а поиск Google понижает в выдаче. Что со всем этим делать? Здесь есть два вполне равноценных варианта:

Я выбрал второй вариант, так как посчитал его более правильным. Два аргумента было в пользу этого решения:

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

Думайте сами, решайте сами как поступить. В любом случае, не стоит затягивать с решением. Google слишком пристальное внимание уделяет тому, чтобы сайт был mobile-friendly.

В заключение

В момент написания этой статьи сайт MalinaLime.com работает на WordPress на теме Hueman. Поэтому все плюсы и минусы, касающиеся бесплатной версии Hueman попадут в поле зрения этого сайта. О платной версии пока никакой информации, потому, что не уверен, стоит ли переходить на платную тему Hueman. Дело в том, что скорость загрузки страниц в Hueman и так не очень хороша, а в коммерческой версии еще хуже, чем в бесплатной.

Какие ошибки возникают у Вас в связи с удобством для мобильных? Как с ними справляетесь? Возможно, у Вас есть вопросы, пишите в комментариях.

Источник

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

Недавно, сидя дома на самоизоляции, я решил помочь своим хорошим знакомым в том чтобы подлатать и немного приподнять их сайт в поисковиках. О всех деталях я рассказывать не буду, ибо во-первых, это затянется на несколько страниц текста мелким шрифтом, а во-вторых – каждый сайт индивидуален, и работающие в одном случае методики не дают абсолютно никакого результата в другом. Но об одном интересном обстоятельстве, найденном мною, я все-таки хотел бы рассказать.

Сталкивались ли Вы когда-нибудь, когда Ваш сайт, имеющий мобильную версию, или даже просто страница, даже имеющая адаптивный дизайн – в поисковой выдаче Гугла помечается, как не оптимизированная для мобильных устройств? Более того – при проверке специальным инструментом Google-a, так называемым “Инструмент Проверки в Search Console” выдается весьма негативный результат вот такого плана:

Т.е. Гугл уверен, что ваш сайт не оптимизирован для мобильных устройств из-за того, что там “слишком мелкий шрифт”, “Контент шире экрана” и “Интерактивные элементы расположены слишком близко” даже при том, что остальные сайты проверки (такие как Responsinator, позволяющие увидеть, как Ваш сайт выглядит на различных мобильных девайсах – от богомерзких iPhone с iPad до дьявольских Android) – показывают отличный результат и mobile-friendly страницы. Кстати, очень полезный сайт, если у вас нет набора различных девайсов для тестирования, как же ваш сайт выглядит на всем, чем ни попадя, и адаптации его под них.

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

Вот и в данном случае мои друзья столкнулись с такой проблемой, им это было важно, ну а поскольку их сайт был на WordPress, то полез я смотреть, что это такое, и из-за чего Search Console выдает ошибку оптимизации для мобильных устройств. И первое, что привлекло мое внимание, когда я воспользовался их этим инструментом – было то, что сайт действительно довольно криво отображался, как будто мобильной/адаптивной версии у него не было вовсе. Хотя необходимый тег, который говорит отображать контент адаптивно, т.е.

Источник

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

Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…

Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.

Еще раз повторюсь, что проблема не нова, и возможно многим верстальщикам знакома и может я зря так разжевываю, но все же на всякий случай постарался описать подробно.

И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport

который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.

Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.

Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).

Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.

Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.

В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?

Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?

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

Источник

Контент на всю ширину экрана в адаптивной версии

Добрый день, уважаемые специалисты. Я в ступоре, ибо не могу понять как работает адаптивность на моем сайте.

Итак, что я делаю:

В хедере есть следующее:

В медиа-запросах прописал такое:

Т.е. я скрываю сайдбар на маленьких мониторах, а ширину основного контейнера и ширину контента делаю на весь экран. Чтобы было удобно пользователю читать сам контент.

В чем же проблема?

Проблема заключается в том, что при таком раскладе все работает как надо, а сам контент растянут на 100%, но его плохо видно, т.е. для того, чтобы его посмотреть нужно увеличивать вручную на телефоне.

Вот как выглядит и как хотелось бы:

Я понимаю, что это не совсем адаптив и не претендую, просто хоть немного сделать удобнее сайт для пользователей хочу.

Понимаю, что решение на поверхности, но не вижу его. Спасите!

2 ответа 2

Итак, отвечаю сам на свой вопрос. Я перелопатил весь код и в одном из файлов нашел ужасающий момент.

Получается вся проблема была в том, что это правило тянуло сайт до 1000 пикселей, независимо от моих желаний. Хотя я и пытался выставить обнуление ширины для всех элементов.

Сейчас все стало отлично. Поправить пару моментов и будет лайт-пример мобильной версии. Всем спасибо за внимание, читайте свой код! =)

. понять как работает адаптивность на моем сайте.

UPD: ответ на комментарий

В верстке Вашего сайта основные элементы интерфейса “прибиты” намертво, то есть шаблон для сайта создавался для определенного мин. разрешения экрана по горизонтали (у “пациента” 980 или 1000px).

И при включении initial-scale=1 (см. ссылку), часть содержимого выходит за пределы экрана (меньшего 1000px), появляется горизонтальный скролл.

“Другие” сайты избегают этого более сложной логикой верстки основанной, в том числе на процентном соотношении размеров элементов к размеру экрана.

Принимаемые выше меры недостаточны для появления “адаптации для просмотра на разных устройствах” (c). Соответственно, смотрите варианты выше (забыл и добавил про мобильный вариант).

Источник