Интерактивные элементы расположены слишком близко как исправить
Мобильная адаптация как инструмент SEO
Задача мобильного SEO — улучшение видимости сайта в мобильных версиях поисковых систем, а следовательно, увеличение мобильного трафика. Мобильное SEO часто пересекается с понятием mobile friendly, введенным специалистами Google, которое означает адаптацию сайта для мобильных устройств. Они тесно взаимосвязаны: без одного не может быть другого.
Если вы заботитесь об эффективности своего проекта, есть 3 основных причины адаптировать сайт.
Изменение позиций нашего портала auto-offer.ru в Google после адаптации — 57% позиций улучшилось.
После адаптации сайта показатель отказов снизился на 4,4%.
Конверсия с мобильного трафика выросла на 1%.
Инструменты выявления ошибок, возникающих при просмотре сайта на мобильных устройствах
Search Console
Выявить ошибки, возникающие при просмотре сайта на смартфонах и планшетах, довольно просто: вся необходимая информация есть в Search Console (бывший Google Webmaster Tools): раздел «Поисковый трафик», пункт «Удобство просмотра на мобильных устройствах».
Этот способ возможен только для сайтов, подтвержденных в Search Console. Подтверждая сайт, вы получаете исчерпывающие рекомендации по каждой проблеме и список страниц, на которых эта проблема встречается.
Mobile-Friendly Test
Инструментом от Google Mobile-Friendly Test можно проверить любой сайт, не добавляя его в Search Console.
Положительный результат теста вы можете видеть на скриншоте, а при отрицательном инструмент дает общие рекомендации по устранению найденных ошибок и показывает сайт так, как его бы видел поисковый робот Google.
Responsive.is
Отличается от остальных тем, что тут можно посмотреть, как выглядит ваш сайт на разных типах устройств: монитор, планшет в горизонтальном и вертикальном положениях и смартфон в таких же положениях.
В поле для url нужно вставлять только имя домена (без http:// и https://).
Google Chrome
Для пользователей Google Chrome существует удобный инструмент для проверки адаптации, встроенный в браузер. Нажимаем F12 на подопытном сайте, на открывшейся внизу панели инструментов слева кликаем на значок смартфона. Теперь рабочая область браузера масштабируется под выбранное мобильное устройство. Вверху этого блока вы можете выбрать одно из нескольких популярных устройств и его расположение (вертикальное или горизонтальное). А потянув за край окна, можно посмотреть, как сайт адаптируется под данный размер.
Ошибки
В большинстве случаев на неадаптированных сайтах появляются первые 3 ошибки из скриншота.
Область просмотра не настроена
Данная ошибка появляется, когда страница сайта не подстраивается под размер окна мобильного браузера. В итоге мы можем видеть обрезанный текст, картинки и блоки сайта.
Одно из решений: страницы должны содержать в контейнере head метатег viewport. Он сообщает браузеру, как нужно контролировать размер и масштаб страницы.
Маленький размер шрифта
Эта ошибка чревата не только тем, что некоторые тексты невозможно прочитать без масштабирования, но и тем, что перейти по ссылке в меню или тексте практически невозможно, а это сильно затрудняет навигацию по сайту. Рекомендуется в качестве базового размера шрифта задавать 16 пикселей.
Интерактивные элементы расположены слишком близко
Когда ссылки, поля форм, кнопки и другие кликабельные элементы сайта находятся на близком расстоянии друг от друга, то прицельно кликнуть по ним пальцем на порядок сложнее, чем курсором мыши. Поэтому располагать такие элементы нужно с интервалом около 10 мм друг от друга (средняя ширина подушечки пальца человека).
Использование Flash
Большинство мобильных браузеров не поддерживает воспроизведение Flash-контента. В качестве альтернативы можно использовать HTML-5.
Виды сайтов
Различают 3 основных вида сайтов с точки зрения верстки, корректно отображающихся на мобильных устройствах: адаптивный дизайн, динамический показ и отдельный домен с мобильной версией.
Адаптивный дизайн
Google рекомендует использовать именно этот вариант, так как при заходе на сайт с адаптивным дизайном с любого устройства (не важно, с ПК или смартфона) мы получаем от сервера один и тот же ответ, один и тот же HTML-код, а элементы сайта трансформируются с помощью стилей CSS. Это позволяет избежать ошибок в индексировании сайта при продвижении, а неизменный URL позволяет удобнее делиться контентом.
Динамический показ
При этом варианте настраивается определение устройства, обращающегося к сайту, на уровне сервера, и в зависимости от того, с какого устройство зашел пользователь, серверу отдается разный HTML-код: для пользователя, зашедшего со смартфона, показывается сайт с одним HTML-кодом, а для пользователя, зашедшего с ПК — с другим.
Поддомен с мобильной версией
При таком варианте создается отдельный сайт для мобильной версии: m.site.ru, mobile.site.ru и т. д. Здесь надо быть осторожным, так как поддомен имеет ту же структуру и почти тот же контент (обычно, упрощенный), поэтому по умолчанию создаются страницы с одинаковым содержимым, т. е. дубли, которые негативно сказываются на поисковом продвижении. Необходимо правильно расставить теги rel=»canonical» и rel=»alternate» на основном и мобильном домене, чтобы Google верно определил, где оригинал страницы, а где дубль.
Часто бывает, что пользователь, не успев дочитать интересную статью на смартфоне, сохраняет ее в закладках. А когда открывает ее на ПК, открывается та же мобильная версия сайта, и переадресации на основной сайт не происходит. Чтобы этого избежать, делайте в подобных случаях редирект на основной сайт, определяя устройство пользователя, или просто используйте адапативный дизайн.
Кроме того, реализовать мобильный сайт можно и другими способами. Например, в подпапке сайта site.ru/m/ или для каждого устройства сделать свой дизайн. Так удобнее контролировать конверсию сайта в целевом сегменте: создавая свой дизайн для каждой версии сайта, легче подстроиться под аудиторию.
Если при проверках вы выявили некоторые ошибки или некорректное отображение в мобильном браузере, необходимо, чтобы верстальщик настроил отображение во всех основных форматах, в противном случае потенциальные клиенты из мобильного трафика так и останутся только потенциальными.
Оптимальный вариант — проектировать адаптацию сайта еще на этапе разработки. Это сэкономит вам средства на дополнительной работе верстальщика и усилит динамику развития проекта как в области конверсий, так и в области поисковой оптимизации.
Интерактивные элементы расположены слишком близко как исправить
что именно вам не ясно в фразах:
— интерактивные элементы слишком близко
— контент шире экрана
— cлишком мелкий шрифт.
вот для мобильной может быть что то это. того
Anamnado:
вот для мобильной может быть что то это. того
Исправить и посмотреть на результат. Неужели сложно подправить CSS?
у мня на самом первом этапе в сайтах ругнулся на близкое расположение элементов.
Обычно такие ошибки выдает, когда стили и скрипты закрыты от Гугла:
У гугла бывают заскоки, одну и ту же страницу может нормально видеть, а может стили не подгрузить и ага.
У меня периодически выскакивают подобные ошибки на разных страницах, с которыми все ок. Тупо отправляю на проверку, ошибка исчезает.
danineo:
На search.google.com в разделе «Удобство для мобильных» красуются ошибки:
— Интерактивные элементы расположены слишком близко
— Контент шире экрана
— Слишком мелкий шрифт и т.д.
Хотя вроде всё нормально открывается, как понять на какие именно элементы ругается Гугл и нужно ли это?
Контент шире экрана
Добрый день, дорогие читатели блога! Сегодня я расскажу Вам про трудности возникших у многих вебмастеров. Наверняка многие из Вас сталкивались с сообщением в выдаче 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 и так не очень хороша, а в коммерческой версии еще хуже, чем в бесплатной.
Какие ошибки возникают у Вас в связи с удобством для мобильных? Как с ними справляетесь? Возможно, у Вас есть вопросы, пишите в комментариях.
Интерактивные элементы расположены слишком близко как исправить
что именно вам не ясно в фразах:
— интерактивные элементы слишком близко
— контент шире экрана
— cлишком мелкий шрифт.
вот для мобильной может быть что то это. того
Anamnado:
вот для мобильной может быть что то это. того
Исправить и посмотреть на результат. Неужели сложно подправить CSS?
у мня на самом первом этапе в сайтах ругнулся на близкое расположение элементов.
Обычно такие ошибки выдает, когда стили и скрипты закрыты от Гугла:
У гугла бывают заскоки, одну и ту же страницу может нормально видеть, а может стили не подгрузить и ага.
У меня периодически выскакивают подобные ошибки на разных страницах, с которыми все ок. Тупо отправляю на проверку, ошибка исчезает.
danineo:
На search.google.com в разделе «Удобство для мобильных» красуются ошибки:
— Интерактивные элементы расположены слишком близко
— Контент шире экрана
— Слишком мелкий шрифт и т.д.
Хотя вроде всё нормально открывается, как понять на какие именно элементы ругается Гугл и нужно ли это?