Интерактивные элементы расположены слишком близко как исправить wordpress

Открепить

Cправка – Search Console

Войти

Справка Google

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

Тема отзыва

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

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

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

Search Console

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

Как сделать мобильную версию сайта WordPress

Мобильная версия WordPress

Зачем вообще делать мобильную версию сайта? Почти каждый житель планеты носит с собой мобильное устройство определенной марки. Даже дети играют в игры и смотрят YouTubee на планшетах и смартфонах. Поскольку у большинства людей есть мобильный телефон, с большой долей вероятности они читают на нем чей-то блог или сайт. Скорее всего ваш сайт также просматривают со смартфонов, и если не проведена мобильная оптимизация, пользователь видит некорректно работающий ресурс.

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

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

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

Создать мобильную версию WordPress сайта – технически не сложная задача. Ознакомьтесь с приведенными ниже советами, чтобы ваш сайт корректно отображался на мобильных устройствах.

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

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

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

Мобильные плагины для WordPress

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

Плагин WPSmart Mobile (мобильная тема)

Обновление 21.05.2020. До марта 2020 года я использовал многофункциональный плагин JetPack. Однако данный плагин прекратил поддержку мобильной темы. Но я быстро нашел более качественную замену в виде плагина WPSmart Mobile. Не обращайте внимания на то, что плагин не обновлялся долгий промежуток времени. На данный момент это лучший плагин адаптации сайта к мобильным устройствам. Лично мною было протестировано около 10 плагинов, только WPSmart Mobile смог создать качественную мобильную версию моего сайта.

Чтобы создать мобильную версию сайта, нужно просто установить и активировать плагин «WPSmart Mobile». После активации плагина автоматически создаться мобильная версия сайта, которая будет показываться на всех мобильных устройствах. На компьютерах и ноутбуках будет показываться полная версия сайта. На смартфонах, планшетах и мобильных устройствах будет отображаться мобильная версия, адаптированная для экранов с маленькими размерами.

После активации рекомендую в настройках включить отображение меню. Для этого перейдите в «WPSmart» в админке WordPress, выберите «Menu», поставьте галочку напротив надписи «Enable drop-down pages/links menu.», добавьте нужные вам статьи и нажмите на кнопку «Save All Changes». После проделанных манипуляций в мобильных устройствах буде отображаться аккуратная иконка с меню.

Адаптивные таблицы WordPress

Плагин WPSmart Mobile адаптирует все элементы сайта, кроме таблиц, которые продолжают некорректно отображаться на мобильных устройствах даже после активации мобильной темы. Чтобы это исправить, достаточно установить и активировать плагин «Make Tables Responsive». Настроек в плагине нет, после его активации все таблицы на сайте станут адаптивными для всех мобильных устройств. Вот так таблицы выглядели до установки плагина «Make Tables Responsive»:

А вот так выглядят таблицы после установки плагина:

Соответственно, чтобы создать мобильную версию WordPress сайта в автоматическом режиме, нужно установить и активировать два плагина: «WPSmart Mobile» и «Make Tables Responsive» (адаптивные таблицы в WordPress).

Как в Google исправить проблемы категории «Удобство для мобильных»

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

Гугл Вебмастер показал, что одна статья сайта является проблемной. Я стал разбираться и обнаружил, что страницу действительно неудобно просматривать на мобильных устройствах. Также я нашел проблемную статью в результатах поиска Google. Статья прямо в поиске была помечена надписью «Страница не оптимизирована для мобильных устройств». Естественно, посетители, которые увидят подобную надпись, вряд ли зайдут на мой сайт.

Нужно решать эту проблему, ведь в случае бездействия начнется падение мобильного трафика. К тому же, Google уже давно обновил алгоритмы ранжирования сайтов, в которых важная роль отведена именно категории «Удобство для мобильных». То есть, если у сайта нет мобильной версии, он будет терять позиции в поисковой выдаче.

Google Webmaster обнаружил три ошибки: контент шире экрана, интерактивные элементы расположены слишком близко и слишком мелкий шрифт. Давайте разбираться, как устранить эти проблемы.

Ошибка: Контент шире экрана. Баннеры в шапке сайта, видео ролики с Ютуба и блоки контекстной рекламы выходят за рамки экрана:

Ошибка: Интерактивные элементы расположены слишком близко. В подвале сайта блок контекстной рекламы расположен сверху навигационных ссылок, тем самым закрывая их:

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

Что сделал я, чтобы исправить проблемы «Удобство для мобильных»? Установил два вышеописанных плагина. В итоге Google Webmaster перестал ругаться, подтвердив исправление ошибок:

Примечание. Также на сайте тестировались плагины «WPtouch» (мобильная версия) и «Automatic Responsive Tables» (плагин таблиц). Однако оба этих плагина не смогли решить поставленных перед ними задач. «WPtouch» не смог создать мобильную версию сайта, а после установки плагина «Automatic Responsive Tables» таблицы не адаптировались под мобильные устройства.

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
✓ Как сделать таблицу в WordPress
✓ Обзор хостинга TimeWeb
✓ Как установить капчу на сайт
✓ Обзор плагина All In One SEO Pack
✓ Необходимые плагины для WordPress

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

А спонсором блога в этом месяце выступает сервис Rookee. Когда требуется комплексное поисковое продвижение, контекстная реклама на автопилоте или формирование репутации в сети – на помощь приходят Rookee!

Посетители современных веб-сайтов, которые пользуются мобильными устройствами, не хотят видеть огромные и не оптимизированные страницы, без возможности удобно воспринимать информацию. Вы сможете существенно упростить им жизнь, если установите несколько простых плагинов, подстраивающих оформление сайта в зависимости от устройства, с которого он открывается.

Пользователи Глобальной сети уже давно мигрировали с настольных компьютеров на мобильные устройства. Теперь им не нужен полноценный широкоформатный монитор, чтобы открывать документы и изображения. Экран современного смартфона позволяет просматривать фотографии высокого качества, поддерживая Full HD.

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

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

Проверьте скорость загрузки своего сайта на среднестатистическом смартфоне. И если главная страница не откроется за пару секунд, можно делать выводы, что часть посетителей попросту отказывается от перехода, ещё на этапе загрузки.

Что такое плагин для WordPress?

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

Плагины являются неотъемлемой частью движка WordPress. Многие вебмастеры сегодня уже не могут полноценно обслуживать собственные проекты без определённого набора расширений.

Написанные на языке программирования PHP, плагины стали столь популярными благодаря тому, что WordPress был изначально оснащён открытым исходным кодом.

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

Как установить плагин в WordPress

Эти модули очень похожи на мобильные приложения. Вы можете найти огромное количество различных инструментов на все случаи жизни. Причём большинство из них совершенно бесплатны.

Для того, чтобы добавить расширение в свой WordPress, необходимо зайти в панель администратора и перейти в раздел «Плагины». Там находится кнопка «Добавить новый».

Далее вы увидите строку поиска, в которой можно найти всё, что вас интересует. Когда отыщите подходящий инструмент, выберите пункт «Установить».

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

8 плагинов WP для оптимизации мобильной версии сайта

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

1. WPtouch

• Страница в репозитории wordpress.org

Его рекомендует сам Google. По сути, плагин является обязательным для всех разработчиков на WordPress.

WPtouch оптимизирует изображение под экран устройства пользователя. Фактически, речь идёт не о модернизации исходной страницы в более удобный форм-фактор. Происходит банальная оптимизация, без внесения принципиальных изменений в исходный код страницы.

Тем не менее, он позволяет:

• Автоматически перенастроить шаблон на мобильную версию, в том случае, когда к вам приходит пользователь смартфона.
• Создать отдельную версию сайта для пользователей мобильных устройств. Она может достаточно сильно отличаться от того, что вы увидите, заходя с настольного компьютера.
• Это лёгкий плагин, он не добавляет существенного веса вашему сайту и практически никак не влияет на скорость его загрузки.
• Кроме того, вы, фактически, не модернизируете исходный код сайта, а просто добавляете в него дополнительную тему, которая включается по запросу посетителя.

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

2. Jetpack

• Страница в репозитории wordpress.org

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

Jetpack – это, своего рода, «всё в одном» для WordPress. Инструментарий плагина включает такие возможности, как:

• Автоматическая защита сайта (резервное копирование, отслеживание вредоносного ПО, защита от спама, безопасная система входа, защита от внешних атак).
• Повышение быстродействия и производительности (отложенная загрузка изображений, пользовательский поиск по сайту, фильтры товаров на WooCommerce и eCommerce сайтах).
• Мощные функции для развития сайта (расширенная статистика и аналитика, кросспостинг в социальные сети, интеграция с Instagram, PayPal и Stripe, встроенная XML-карта сайта, управление рекламой).
• Простые и понятные инструменты дизайна (темы, похожие записи, галереи, слайд-шоу, контактная форма, подписки, поддержка oEmbed).
• Совместимость с другими популярными плагинами (WooCommerce, AMP 2.0, Google Analytics, WP Super Cache, Akismet, Contact Form 7 и др.).

Это крайне популярный и востребованный плагин. Он постоянно обновляется и регулируется разработчиком.

3. Smush

• Страница в репозитории wordpress.org

Современные ресурсы в интернете не воспринимаются аудиторией без красочных и чётких изображений. Но картинки и фотографии в состоянии настолько перегрузить страницу, что скорость её загрузки окажется неприлично низкой.

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

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

Плагин сам проверит изображения на сайте и проинформирует администратора о тех из них, которые оказывают существенное влияние на скорость загрузки. Для оптимизации работы, Smush оснащён функцией автоматического форматирования изображений до заданных параметров ширины и высоты.

• Страница в репозитории wordpress.org

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

WP Mobile Menu позволяет добавить трёхуровневое меню на все страницы сайта. Базовая версия включает в себя лишь основные элементы дизайна и управления. В том случае, если вам их не хватает, придётся оплатить один из трёх уровней премиума, в зависимости от конкретных задач.

Стандартные функции:

• трёхуровневое меню;
• чистый заголовок;
• оверлей при открытии меню;
• брендинг логотипа и текста;
• фоновое изображение для меню;
• сокрытие определённых элементов, когда Mobile Menu видно;
• шрифты Google;
• настройка стиля мобильного меню.

5. Hummingbird

• Страница в репозитории wordpress.org

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

Фактически, такой плагин позволяет избежать задержек, связанных с обращением к информации на вашем сервере.

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

Модуль Hummingbird даёт полезные советы по оптимизации и адаптации страниц вашего сайта под мобильные устройства. Отслеживая результаты вносимых изменений, вы сможете самостоятельно оценить все достоинства приложения.

Премиум-версия плагина включает такие инструменты, как:

• автоматическое сканирование;
• мониторинг работоспособности;
• улучшенное сжатие файлов;
• CDN.

6. AMP for WP

• Страница в репозитории wordpress.org

Google не стоит на месте. Вместо того, чтобы оставлять создание инструментов оптимизации на откуп частным разработчикам, поисковик создал собственный плагин. Им стал AMP.

Это физическая реализация тех инструментов, которые Google хотел бы предоставить сознательным вебмастерам для отладки и оптимизации десктопых версий сайтов под мобильные устройства.

Не стоит говорить о том, что Google, хоть и не признаётся в этом публично, но всё же может отдавать предпочтение разработчикам, выбирающим AMP, а не сторонние плагины.

Плагину есть что вам предложить, включая такие вещи, как:

• Пользовательский AMP-редактор, позволяющий сделать ваш пост или страницу AMP-совместимой.
• Перетаскиваемый конструктор страниц.
• Поддержка Аналитики Google.
• Поддержка SEO-плагинов.
• Неограниченная цветовая тема.

7. Asset Clean-Up

• Страница в репозитории wordpress.org

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

Но далеко не каждый плагин применяется на сайтах повсеместно. Например, контактные формы должны всплывать только на одной странице.

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

Плагин Asset Clean-Up сканирует ваш сайт и находит невостребованные участки кода, влияющие на вес страницы, но не оказывающие на неё никакого прямого воздействия. Указав в настройках работы модуля коды, которые загружать не нужно, вы сможете существенным образом снизить объёмы раздувания страниц.

В результате ваш сайт сможет:

• Уменьшить количество загружаемых HTTP-запросов (что важно для ускорения загрузки страницы) за счёт выгрузки бесполезных CSS/JS.
• Минимизировать и комбинировать оставшиеся загружаемые файлы CSS/JavaScript.
• Сократить реальный HTML-код страницы.
• Достигнуть лучших показателей производительности, при тестировании на таких сайтах, как GTmetrix, PageSpeed Insights или Pingdom Website Speed Test.

8. Autoptimize

• Страница в репозитории wordpress.org

Плагин, который оптимизирует базу данных, очищает кэш и объединяет дублирующиеся скрипты. Фактически, это бесплатный модуль, который в состоянии ускорить загрузку вашего сайта (до 30%).

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

Скорость сайта – ваше конкурентное преимущество

Бесплатные и платные плагины WP дают вам преимущество, повышая позиции вашего сайта, увеличивая скорость страниц и улучшая пользовательский опыт постоянных и новых посетителей.

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

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

Только не переусердствуйте с количеством плагинов, которые вы решите использовать. Если установить их слишком много, возникает риск испортить производительность сайта – то, что вы пытаетесь оптимизировать.

Кроме того, имейте в виду, что установка нескольких плагинов, которые, по сути, делают одно и то же, может привести к тому, что один из них (или оба) не будет работать должным образом.

А какой у вас любимый WordPress-плагин, помогающий вам делать сайты более дружественными для современных мобильных технологий? Делитесь в комментариях!

ПОНРАВИЛСЯ ПОСТ? ПОДЕЛИСЬ ССЫЛКОЙ С ДРУЗЬЯМИ!

СТАТЬИ ИЗ РУБРИКИ:

• Как помочь Google ранжировать товары с дублирующимися описаниями
• Два типа краулинга Google: Discovery и Refresh
• Google не будет предоставлять подробности обновлений основного алгоритма поиска (core updates)
• Что такое OTT-реклама: руководство по использованию
• Пугающая PPC-статистика для арбитражников и рекламодателей (11 примеров и советы по выживанию)
• Чистый спам или контент для взрослых могут отравить ваш домен
• Google не наказывает за партнёрские ссылки без рекомендуемой разметки
• 5 способов улучшить свои навыки публичных выступлений
• 5 секретов успеха бизнеса Макдоналдс
• Ноябрьское обновление поисковых алгоритмов Google 2021: что это было