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

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

Адаптация сайта под мобильных специально придуман, чтобы сайт одинаково удобно отображался на всех мобильных устройствах, и это больше нужно владельцу сайта, чем поисковику. Но ради справедливости важно отметить, что в некоторых случаях поисковые системы больше нас заботятся о наших сайтах. Вед у человека как — все руки не достает. Или популярное в наше время — «Завтра сделаю». А за это время теряется мобильный трафиксайта, который необходимо вебмастеру.

Я уже писал о том, что установил на сайт фавиконку по инструкции и рекомендации Яндекс вебмастер. Вед в этом ничего плохого нет просто хорошо когда все сделано по людски.

У меня привычка каждый раз проверить нужные рекомендации Google Яндекс о сайте, и если имеется проблемы начинаю искать решение. Потому, что если не решить выявленные поисковиками проблемы, то однажды можно встретить:

  • или взломанный,
  • или зараженный,
  • или еще хуже заблокированный сайт.

И на это раз точно так же виноват сам, что вовремя не проверил — адаптирован ли шаблон для мобильных устройств. Итак после добавления карту сайта  Google Search Console однажды заходя на панель в разделе Эффективность для мобильных встречаю вот такое уведомление:

Уведомление Google Search  о добавлении кода viewport

Суть уведомления такова, что для того чтобы сообщить браузеру, что ваша страница адаптируется к любым устройствам, необходимо добавить определенный код в раздел head в файле header.php.

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

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

Оказывается, что чтобы сайт отображался на всех устройствах нормально нужно выполнить определенное действие — а именно, добавить вот этот стандартный код в заголовок сайта:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

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

«Иначе говоря, как считают умные люди и поисковые системы данный метатег вовремя загрузки предупреждает любой браузер о том, что данная Интернет-страница адаптируется к любым устройствам.»   

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

И так заходим по схеме Управление сайтом — Внешний вид — Редактор тем, выбираем текущую тему (это в том случае если у вас установлены несколько тем, поэтому выбираем активную, которая действует на сайте) и в редакторе открываем header.php, а потом вставляем вот этот код в раздел head, где находятся все метаданные сайта:

Код viewport добавлен

И правда, волшебство. И кто же придумал эти метатеги и коды разных для браузеров да и вообще. Иногда это для нас не постижимо! Набор каких-то простых символов совершает чудо! Нет честное слово это совсем приятно.

Но, не все сразу. И только через некоторых дней самый капризный, но заслуженно капризный поисковик Гугл на том же панели Google Search Console сообщит нам о том, что все на сайте в порядке.

Да кстати, я забыл, о том, что после добавления кода нужно нажать на кнопку «Проверить», там где выявлена данная ошибка. А вот результат, довольно приятно не так ли?:     

Ошибка viewport исчезла

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