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

Проверка инструкций по индексации

Потратив массу времени и усилий на грамотную техническую оптимизацию, вы явно будете заинтересованы в том, чтобы максимально возможное число страниц вашего сайта попало в индекс поисковых систем. И всего несколько неосторожных директив в X-Robots-Tag, Meta Robots и robots.txt могут свести на нет шансы вашего сайта на индексацию. В некоторых случаях информация о запретах на индексацию важных страниц сайта отображается в панелях для вебмастеров (включая Google Search Console).


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

Вы можете выполнить эту процедуру следующим образом:

  1. Запустите Netpeak Spider.
  2. В основном меню откройте «Настройки» → «Опции».
  3. Нажмите «Восстановить настройки по умолчанию» в нижней части окна.
  4. Перейдите на вкладку «User Agent» и выберите агента нужной вам поисковой системы.
  5. Сохраните настройки.
  6. На боковой панели в основном окне программы на вкладке «Параметры» уберите галочки со всех параметров, кроме тех, что относятся к пункту «Индексация».

  1. В адресной строке введите URL сайта.
  2. Запустите сканирование кнопкой «Старт» и дождитесь результатов анализа.

После окончания сканирования в основной таблице результатов в столбце «Код ответа сервера» будет отображаться расширенный статус-код со статусом индексации. Если будут обнаружены страницы, заблокированные в robots.txt, Meta Robots или X-Robots-Tag, а также ссылки с атрибутом nofollow, они будут отображаться как страницы с ошибками. Вы сможете найти их и отфильтровать, открыв список ошибок на вкладке «Отчёты» → «Ошибки» на боковой панели, либо же перейдя на панель «Дашборд» с наглядными диаграммами и графиками.

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

А Вы нуждаетесь в «адаптации»? ↑

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

Для понимания можно создать и заполнить сводную таблицу на основе данных одного из популярного интернет-ресурса, которая более наглядно изображать все необходимые данные:

Сайт\Трафик (сеансы) Доля мобильного трафика (смартфоны+ППК) Всего трафика на сайт Всего трафика на сайт с Google Доля трафика Google в общем мобильном трафике Доля мобильного трафика Google в общем трафике Google
www.сайт.ru (можно взять последний месяц) 11,7% (52 169) 443 951 118 133  26,5% (13 811) 11,7% (13 811)

Здесь отображены данные по одному из ресурсов: доля в % и и общее количество под данным Google Analytics.

Далее мы покажем как определить долю мобильного трафика в Google Analytics:

Сперва следует перейти Аудитория — Мобильные устройства — Обзор:

Здесь мы видим сводные данные по пунктам Mobile (смартфоны) и Tablet (планшетные ПК). Их необходимо сложить и высчитать долю от всех посещений. Доля мобильного трафика получилась 11,7% или 52169 посещений.

Далее необходимо знать сколько трафика получил сайт с ПС Google, для этого переходим в отчете Google Analytics Источники трафика — Обзор — Источник/канал: 


Получаем данные по общему количеству переходов из ПС Google в количестве 118133, вписываем в таблицу.

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

Чтобы узнать этот показатель, необходимо в отчете Google Analytics выбрать и добавить сегмент из предложенного списка с соответствующим названием «Трафик со смартфонов и планшетных ПК»:

На основе этого сегмента произведется необходимая нам выборка данных:

Из полученных данных нам стало известно, что мы имеем 13811 сеансов с мобильных устройств с ПС Google. Соответственно доля в общем объеме сеансов с мобильных устройств в ПС Google составила 26,5%. Вписываем в таблицу.

Для определения этого показателя нам нужно взять количество мобильного трафика ПС Google и высчитать его долю из общего количества сеансов с ПС Google (это число мы получили ранее). В итоге эта доля составила 11,7%. Как Вы видите этот показатель ниже нормального в ~22%, а значит ещё есть над чем потрудиться в развитии сайта для мобильных устройств.

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

У Google есть несколько сервисов по реализации анализа сайта в этом направлении:

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

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

А также ещё один список конкретных ошибок в удобстве просмотра сайта на мобильных устройствах можно найти в личном кабинете Google Webmasters:

О резиновых макетах

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

Как правило, для адаптивных страниц характерны точки разрыва, соответствующие популярным разрешениям устройств: 1280, 1024, 960, 768, 640, 480, 320 пикселей.

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

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


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

Позиции сайта в мобильном поиске

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

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

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

Как проверить адаптивность сайта

Как проверить сайт на адаптивность? Все просто. Для этого используются специальные инструменты и сервисы. Среди числа таковых — Google Mobile Friendly. При переходе на этот ресурс задаем URL сайта, который нужно проверить, в строку, и буквально за 2-3 минуты получаем отчет.

Отличие адаптивной и мобильной версии

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

Так вполне можно поступить, если бы не несколько «но»:

  • В таком случае придется создавать под каждую ОС приложение. Это затратно финансово и отнимает много времени и сил;
  • Пользователям придется скачивать и устанавливать специальные приложения. Далеко не каждому это понравится. Вряд ли ваш сайт в таком случае будет популярным;
  • Поисковые системы не слишком «любят» такие новшества. А значит, подобные действия негативным образом повлияют на продвижение сайта. Произойдет так называемое разделение трафика – между сайтом и различными версиями приложений;
  • Придется синхронизировать основной ресурс и приложения или наполнять отдельно контентом мобильное приложение. Все это, в свою очередь, приведет к большим финансовым потерям, которые вполне можно было бы избежать.

Но главное – если сайт хорошо адаптирован, можно вовсе забыть о каких-либо мобильных приложениях

Более эффективно для бизнеса сконцентрировать внимание на другом – как наполнить и обеспечить качественное продвижение основного ресурса

Адаптация сайта на WordPress

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

Именно поэтому важно вовремя перейти на адаптивную верстку. Иначе вы потеряете позиции в выдаче, а значит, и финансы

Большинство сайтов на платформе WordPress уже поддерживают адаптивность. Вместе с тем, если проверка не подтвердила факт адаптивности, можно поставить соответственный плагин. Но как именно? Все достаточно просто. Более детально – здесь.

Улучшение адаптивности сайта – задача для программистов, которые занимаются его версткой

Среди ключевых заданий, выполнению которых следует уделить внимание:

  • Обеспечение автоматической адаптации дизайна сайта под корректное отображения, учитывая разные разрешения экранов;
  • Автоматическая проверка сайта на адаптивность при первом запуска на том или ином устройстве. Если обнаружены проблемы информация сразу же направляется ответственному специалисту.

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

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

  1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
  2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
  3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

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


Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper {max-width: 960px;} оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% . Таким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Например, размер шрифта 32рх, тогда 32/16=2em. После чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

img{
max-width:100%;
height: auto;
}

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

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

Ну, вот наша с вами основа готова, теперь необходимо определить контрольные точки, в которых макет будет перестраиваться, продумать, как будут вести себя блоки, что будем скрывать и записать это все в медиа – запросы. Определять эти самые переломные точки мы будем при помощи браузера google chrome.

Откроем в нем наш макет, нажмем клавишу F12 и будем уменьшать размер окна браузера. В верхнем правом углу у нас будут писаться размеры окна, нас интересует первое значение, оно указывает на ширину. Необходимо сжимать до тех пор, пока дизайн не перестанет корректно отображаться. В том размере, когда макет выглядит не корректно, мы и будем создавать контрольную точку. Определив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

@media only screen and (max-width: 910px){
/* контентную часть мы делаем во всю ширину, отменяем выравнивание*/
section {
width: 100%;
float: none;
}
/* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/
aside{
width: 100%;
float: none;
}
}

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%;  тогда ширину запишет следующим образом width: 96%;.

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

По такому же принципу мы создаем и остальные контрольные точки, находим ширину, при которой макет ломается (смотрится не корректно) записываем медиа – запрос, формируем для него стили задаем ширину блоков, можем скрыть менее важные блоки (display: none).

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

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

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


С этим читают