Loading...
X

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


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

На днях получил фильтр МПК (малополезный контент) на одном из сайтов, причём именно на мобильную версию. Сообщение в веб-мастере от Яндекс выглядит так:

Малополезный контент, некорректная реклама, спам (мобильный поиск)

Позиции сайта в результатах поиска понижены

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

Обычно ограничения снимаются в течение месяца после устранения нарушения.

Я проверил сайт и согласился — да, передоз рекламы на мобильной версии есть. Значит надо принимать меры. Ключевыми в сообщении являются:

  • чрезмерное количество рекламы — слишком много блоков
  • реклама, вводящая пользователя в заблуждение — имеется ввиду блок ссылок

Настольная версия сайта состоит из как бы независимых блоков — шапка на ширину сайта, а затем три колонки, из которых главный контент в центральной, самой широкой. Вот такой шаблон:

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

Проблем у мобильной версии было сразу несколько:

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

Итак, что будем делать:


  1. Уберём блоки ссылок
  2. Уберём некоторые блоки рекламы

Как на компьютере посмотреть как будет сайт выглядеть на телефоне

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

Способов как минимум два. Первый совсем простой: в обычном настольном веб-браузере уменьшаете размер окна до сопоставимого с мобильным видом. Затем нажмите F5 в браузере, чтобы сайт перестроился под эти размеры.

Второй вариант: в веб-браузере нажмите F12, что попасть в консоль разработчика. Далее в Google Chrome нажмите иконку Toggle device toolbar:

Вы можете настроить размер или выбрать пресет устройства:

В Firefox после перехода в консоль разработчика (F12) нажмите эту иконку:


В Firefox аналогично можно установить любой произвольный размер экрана виртуального телефона, можно выбрать разные другие настройки, например, установить скорость сети GPRS, 2G, хороших или обычных 3G и 4G и т. д.

Как скрыть некоторые рекламные блоки для посетителей с телефонов

В файл стилей .css добавьте примерно следующий код:

@media screen and (max-width: 768px) {
    #nb1,#nb2,#nb3,#nb4,#nb5 {
        display: none;
    }
}

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

В строках nb1, nb2, nb3 и т. д. - это идентификаторы для контейнеров div, которые нужно скрывать. Вы можете вместо nb1 вписать любые другие имена.

Теперь оберните рекламные блоки и элементы сайта, которые вы хотите скрыть:

                    <div id="nb1">
                              <p>ЗДЕСЬ РЕКЛАМНЫЙ БЛОК, КОТОРЫЙ НУЖНО СКРЫТЬ</p>
                    </div>

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

В WordPress всё примерно также. Код стилей с display: none; нужно внести в файл style.css вашей темы — это можно сделать в Панели управления WordPress → Внешний вид → Редактор тем.

Я рассказывал про плагин WordPress для вставки рекламы (смотрите Бесплатный плагин для вставки рекламы в WordPress), вы можете обернуть их в div'ы прямо в окнах вставки рекламы этого плагина.


Билеты на автобусы, паромы и поезда, в том числе стыковочные маршруты:

Авиабилеты на международные и местные направления по минимальным ценам:

Рекомендуется вам:


Buy Me a Coffee

One observation on “Как убрать некоторые рекламные блоки в мобильной версии сайта
  1. Пушкин

    Использование этого кода для скрытия рекламного блока не отменяет загрузки этого блока, что делает его бессмысленным в определённых случаях…

     
    Reply

Leave an observation to Пушкин Cancel observation

Ваш адрес email не будет опубликован. Обязательные поля помечены *

wp-puzzle.com logo