Мобильное seo продвижение? пошаговое руководство. Отправка на проверку «мобилопригодности»

18.04.2019

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

В закладки

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

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

Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» - мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.

Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»

Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:

  • Нам не требуется отдельная структура страниц для отображения на мобильных устройствах. Достаточно откорректировать десктопную версию сайта с помощью CSS.
  • Для десктопной и мобильной версий используется единый URL-адрес. Поэтому контент сайта не дублируется, страницы не конкурируют между собой, а работа по продвижению влияет на ранжирование в десктопном и мобильном поисках.

Мобильная версия - более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:

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

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

Проблемы с адаптивной вёрсткой

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

Ошибочная интерпретация адаптива

Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона - десктопный и мобильный. В зависимости от устройства пользователя нужная часть кода остаётся видимой, а остальная скрывается с помощью display: none . Так возникают три проблемы:

  1. Все элементы контента загружаются дважды: тексты, изображения, заголовки H1 и H6, хлебные крошки, сопутствующие и рекомендуемые товары и так далее. А поисковые системы очень не любят дубли.
  2. Неиспользуемые части контента скрываются с помощью CSS. Мнение поисковиков по этой проблеме неоднозначно. Google заявляла, что игнорирует содержание скрытых блоков, а «Яндекс» - что учитывает контент страницы целиком. Большинство SEO-специалистов сходится во мнении, что такая схема создаёт риск попадания под санкции.
  3. Код дублируется, и сайт загружается медленнее.

Подобная реализация - неправильный подход к технологии RESS.

Скрытие ненужных элементов

Чтобы сделать интерфейс адаптивной версии удобнее, некоторые избавляются от части функциональности: отвлекающих блоков, больших текстов в категориях каталога и так далее. Всё лишнее скрывают с помощью display: none . Но проблема в том, что для загрузки страницы используется весь код, и сайт работает медленно. К тому же, как уже говорилось выше, у поисковиков спорное отношение к такому контенту - есть риск попасть под санкции.

Неверное использование JavaScript

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

Почему всё-таки используют адаптивный дизайн

Выбор адаптива обычно обусловлен двумя основными плюсами: разработкой только одной версии сайта и отсутствием проблем с несколькими URL-адресами.

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

А для Google создать страницу с адресами филиалов, чтобы поисковик понял, в каких регионах вы работаете. Адаптивную вёрстку с единым доменом очень успешно использует «М.Видео». У магазина высокие позиции в мобильной и десктопной выдачах по товарным, категорийным и информационным запросам.

Можно пойти другим путём - использовать геоподдомены, чтобы повысить текстовую релевантность страниц. В этом случае поддоменам вроде spb.site.ru, samara.site.ru, kazan.site.ru присваивают регионы через «Яндекс.Вебмастер» и затем прописывают заголовки и мета-теги с указанием топонима. Ещё один плюс - для геоподдоменов легко настроить отдельную аналитику, чтобы отслеживать результаты по регионам. Такой способ продвижения практикует MediaMarkt.

Проблемы с мобильными версиями сайтов

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

Двойная работа по продвижению

Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется больше ресурсов, чем в случае с адаптивом. Начать оптимизацию нужно с того, чтобы мобильная версия корректно индексировалась и не конкурировала с десктопной. Для этого свяжите их в «Яндекс.Вебмастере» и Search Console, пропишите корректные атрибуты rel="alternate" , настройте индексацию и генерацию XML-карты.

Хаос из-за абсолютных ссылок в контенте

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

  • Если у десктопной версии определяется user agent, пользователю откроется мобильная версия страницы.
  • В остальных случаях пользователь увидит десктопную страницу, и работа по созданию мобильной версии будет напрасной.

При этом внутренний ссылочный вес сайта может нарушиться. Чтобы проблема не возникла, используйте в контенте относительные ссылки. То есть у атрибута href указывайте /page/ вместо https://site.ru/page/ .

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

У «Яндекса» в этом плане всё чётко - он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel="alternate" с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства.

Неясность требований mobile-first индекса

Чтобы подготовиться к переходу на mobile-first индекс, логично выбрать мобильную версию сайта в качестве канонической страницы. Правда, в рекомендациях относительно mobile-first есть свои неясности. Например, в руководстве Google сказано, что контент мобильной и десктопной версий должен быть аналогичным, но степень «аналогичности» не раскрывает.

А что, если для ранжирования в десктопном поиске требуется определённый блок контента, который в мобильной версии будет лишним, но приоритет будет отдаваться именно мобильной версии?

Выдержка из руководства Google об индексировании мобильных сайтов

Выдержка из доклада Google о внедрении mobile-first индекса

Бездумное использование турбостраниц

Некоторые внедряют нововведения поисковых систем без разбора, с расчётом повлиять на ранжирование. Например, турбостраницы «Яндекса», которые не заменяют полноценные мобильные страницы в поиске, включают малую часть пользовательской функциональности и являются менее конверсионными. Если у вас коммерческий сайт и вы уверены в качестве мобильной версии, не спешите внедрять «турбо» - даже для страниц со статьями и обзорами.

Снижение эффекта от внешних ссылок

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

Особенности продвижения в регионах

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

В первом случае мы продвигаем основной домен и мобильный поддомен m.site.ru. Каждому из них нужно задать регионы через «Яндекс.Справочник». Проблема в том, что иногда самостоятельно привязать мобильную версию сайта к филиалу невозможно. Придётся обратиться в техподдержку, но и это не гарантирует результат. Создать отдельную организацию под мобильную версию сайта нельзя. Поэтому, если филиалов много, привязка может затянуться надолго.

Вариант с использованием поддоменов вроде m.spb.site.ru или spb.m.site.ru мы вообще исключаем. Хотя «Холодильник.ру», например, его использует. Но в этом случае нужно настраивать адресацию между всеми регионами мобильных и десктопных версий, поддерживать их в актуальном состоянии, отслеживать изменения и мониторить сервисы для веб-мастеров. Это огромная работа, которая вряд ли окупится.

Отправка на проверку «мобилопригодности»

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

Фрагмент общения с техподдержкой «Яндекса» о присвоении региона мобильной версии сайта

Почему же используют мобильные версии

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

Также многие SEO-специалисты отмечали рост поискового трафика после внедрения мобильного сайта вместо адаптива. Хотя я не исключаю, что причина роста была в том, что в их адаптивной вёрстке были ошибки, которые негативно влияли на ранжирование.

Какой вариант выбрать

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

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

Также можно использовать технологию RESS, но помните, что в этом случае Google отдаёт предпочтение мобильной версии.

Выдержка из руководства Google об индексировании сайтов, использующих RESS

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

Благодарю SEO-специалистов

Существует четыре способа создания страниц, оптимизированных для просмотра с переносных устройств (смартфонов и планшетов).

    Адаптивный дизайн . Приоритетен в разработке для SEO. Используется единый HTML-код и URL для всех устройств. Сама страница - подстраивается под разрешение и размер экрана устройства.

    Динамический показ . Используется единый URL для всех устройств, но вёрстка (код) зависит от разрешения и размера экрана.

    Мобильная версия . Используется отдельный поддомен или домен для пользователей на мобильных устройствах.

    AMP и Турбо-страницы . Отдельные страницы, которые хранятся на сервере поисковой системы (AMP или Accelerated Mobile Pages - Google. Турбо - Яндекс).

Тип адаптации и суть метода URL остается без изменений Код остается без изменений Плюсы и минусы для SEO

Адаптивный дизайн.
Используется универсальная вёрстка и стили, которые адаптируют отображение страницы под то разрешение экрана, на котором просматривается URL.

    Повышенная сложность и размер кода, более сложная стартовая реализация / вёрстка.

Динамический показ.
Сначала - определяется какой тип устройства и разрешение экрана у пользователя и в зависимости от параметров - показывается один из вариантов HTML-вёрстки.

    Использование одного URL.

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

    Как правило, приводит к наличию ошибок в технической оптимизации сайта.

Отдельная mobile-версия.
Расположение мобильной версии сайта на отдельном поддомене или домене.

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

    Необходимость отдельного контроля.

    Большие сложности технической настройки.

    Сложности для SEO в учёте факторов ранжирования из-за различных URL для мобильных и десктопных пользователей.

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

    Поисковые системы выделяют документы данного типа в результатах выдачи (SERP), что может приводить к росту трафика на них.

    Пользователь не переходит на сам сайт, так как документ располагается на сервере поисковой системы (типичный вид URL в случае с Турбо-страницей «https://yandex.ru/turbo?text=URL-документа-с-исходного-сайта»).

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

    Сложности в учёте факторов ранжирования.

Аудит мобильной версии сайта: чек-лист

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


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


Чек-лист для отдельной мобильной версии

В том случае, если ваш проект использует отдельную мобильную версию на поддомене m.site.ru , требуется проверить реализацию по трём дополнительным пунктам чек-листа.


Продвижение сайта в мобильной выдаче

Поисковые системы учитываю адаптированность сайта при ранжировании в мобильной выдаче. В Яндексе с 2016 года действует алгоритм Владивосток , Google начал учёт ещё ранее - с 2015 года.

Фактор наличия mobile-версии - существенно сказывается на позициях проекта в поиске с переносных устройств. Снижение позиции в мобильном поиске будет приводить и к плавному снижению позиций сайта и в основном поиске. Как минимум, за счёт поведенческих метрик.

Для улучшения позиций в мобильной выдаче требуется:

    Проверить проект на соответствие требованиям по чек-листу выше.

    Провести аналитику позиций в десктопной и mobile-выдаче и сравнить показатели.

    На основании полученной аналитики - сделать выводы о необходимости проведения дополнительных работ по росту сайта в мобильной выдаче.

Хорошей практикой является регулярный контроль показатели сайта в выдаче для устройств двух типов и оценка основных метрик - CTR × WS, % ТОП-10, количество запросов в ТОП.


Сравнительная динамика KPI ресурса в «Пиксель Тулс».

Что делать, если позиции проекта в мобильной выдаче существенно ниже, чем в обычной?

Если SEO KPI ресурса в мобильной выдаче ниже, чем в обычной, то требуется:

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

AMP и Турбо-страницы как решение проблемы

Разработка AMP и Турбо-страниц часто позволяет устранить проблемы низких позиций для mobile. Поисковые системы дополнительно помечают данные результаты и, при прочих равных, показывают в выдаче именно их, а не канонические URL.

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

Частые ошибки и их решение

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

Ошибка или недочёт Критичность Описание и устранение

Отсутствие / несовпадение оптимизации в title и meta-тегах на мобильной версии.

Требуется проверить, какие заголовки окна браузера и meta-теги у URL mobile-версии. Теги должны совпадать с основной версией сайта.

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

Следует минимально использовать контейнеры с прокруткой (вертикальной или горизонтальной). Продумайте отдельно вид адаптации сложных блоков и таблиц на URL, иногда, это требует более креативного подхода.

Всплывающие блоки, виджеты и объявления, мешающие просмотру.

Блок, который занимает на десктопе 5% экрана может закрывать значимую часть всего функционала на переносном устройстве. Часто, к данным блокам относится реклама мобильного приложения, которое есть у проекта. Следует продумать момент отображения данных всплывающих и рекламных блоков и ограничить их объем 5-15% экрана.

Неправильная настройка переадресации.

от 5 до 10/10

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

Скрытие от индексации картинок, JS и CSS-файлов.

Запрет на индексацию JS и CSS-файлов считается ошибкой для всех типов сайтов. Критичной проблема считается в Google, который использует более продвинутый рендеринг при сканировании и выполняет JS. Если от индексации скрыты лишь некоторые скрипты (для нужд SEO), то проблема не является критической.

Наличие невоспроизводимого контента.

от 3 до 8/10

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

Фактически, задача касается не только мобильной версии и актуальная для всех проектов. Медленная загрузка может стать критическим фактором, если интернет пользователя так же медленный, что характерно для смартфонов без использования Wi-Fi.

Исследования показывают, как связаны скорость загрузки и конверсия . Следи за тем, чтобы время загрузки исходного кода было ниже 700 мс, а размер самого кода - до 120-140 КБ.

Неверная настройка meta-тега viewport и область просмотра.

Без корректной настройки meta-тега viewport ресурс не пройдёт проверку на мобилопригодность, что будет приводить к снижению объемов привлекаемого трафика. Часто встречается, что указана фиксированная ширина и страница неправильно отображается на многих устройства и минимальная область просмотра слишком широка и у пользователей появляется горизонтальная прокрутка. Следует устроить эти ошибки.

Наличие мелких элементов, функциональных блоков. Нечитабельный текст.

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

Неоптимизированные формы заказа и конверсионные элементы.

Те формы, которые можно легко заполнить с десктопа, порой, невозможно отправить со смартфона. Убирайте все лишние поля, оставляйте только самое необходимое, скажем, одно обязательное поле - номер телефона или e-mail.

Уделить отдельное внимание процессу оформления товара через корзину и оплате со смартфона.

Функциональные элементы, которые работают только при наведении курсора.

Помните, у переносных устройств нет курсора в привычном понимании слова (при касании экрана происходит событие «клик»). Если в дизайне обычной версии используются события, которые срабатывают при наведении курсора (подсказки, увеличение фото, выпадающее меню), то требуется отдельно продумать их поведение на адаптивной версии.

Невозможность осуществить звонок в один клик.

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

+7 495 989-53-11

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

В этом году состоялся релиз нового алгоритма ранжирования мобильных сайтов от Google, который веб-мастера уже успели окрестить «Mobilegeddon». Обновление включало новый параметр «мобильной дружественности» (mobile friendliness) в качестве фактора, влияющего на рейтинг выдачи при поиске с мобильных устройств. Если вы ещё не в курсе, что мобильное SEO нужно прокачивать отличным образом от обычного SEO, то заявляем: теперь это так!

Те, кто не будут учитывать разницу для мобильного SEO, потеряют огромную часть трафика: к примеру, в США Google обрабатывает намного больше запросов с мобильных устройств , чем с десктопных систем.

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

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

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

Разработка под мобильный сегмент с нуля

Скорость загрузки страницы

Есть множество факторов, влияющих на ранжирование страниц в Google. Скорость их загрузки – один из наиболее важных. Пользователи, ищущие с мобильных устройств, тратят гораздо меньше времени на ожидание загрузки сайтов. Даже 1 секунда задержки кардинально влияет на результат. Вообще, скорость загрузки страниц – ключевая вещь, которая влияет на частоту уходов с сайта: примерно половина пользователей ожидает не более 2 секунд. 40% посетителей уйдут после ожидания в 3 секунды или больше. Google же считает, что задержка не должна превышать 1 секунды . Следовательно, каждая доля секунды задержки влияет на ваши позиции в поисковой выдаче. Чем медленнее ваш сайт, тем больше посетителей/прибыли теряете.

Разрабатывая сайты под мобильные устройства помните, что большинство гаджетов оснащены менее мощными процессорами по сравнению с ПК, а также слабой батареей. Следовательно, придётся принять вызов 1 секунды от Гугла. Также необходимо учесть время на поиск DNS, обработку TCP и отправление HTTP-запроса. В итоге, вам останется приме рно 400 миллисекунд на загрузку самой страницы. Используйте все возможные способы снижения нагрузки на интернет/гаджет пользователя:

  • Оптимизируйте размеры изображений : не полагайтесь на HTML для уменьшения веса изображений. Он просто меняет их внешний вид, но не размер. Используйте графические редакторы вроде Photoshop, они дадут реальный эффект.
  • Положитесь на кэширование браузера : уменьшите количество HTTP-запросов за счёт использования кэширования браузера. Используйте mod_expires для Apache и контроль кэша в хедере , чтобы ускорить загрузку страницы.
  • Уменьшите количество или уберите редиректы: некоторые перенаправления неизбежны. Помните, что каждое из них является лишним HTTP-запросом, которое увеличит скорость загрузки.
  • Минимизируйте код : используйте инструменты вроде YUI Compressor или JSMin , чтобы убрать ненужные символы из JavaScript и таблиц стилей вашего мобильного сайта. Это улучшит кэширование и сократит использование полосы канала Интернета пользователей.
  • Избегайте использования внешних скриптов JavaScript и стилей CSS : каждый раз, когда браузер пытается подключить внешний скрипт, он должен остановиться и скачать этот ресурс. Это значительно замедляет скорость загрузки. Используйте встроенный JavaScript и CSS.
  • Медленный старт TCP : новое TCP-соединение не может использовать полную пропускную способность соединения между браузером и сервером, поэтому сервер ограничен приёмом 10 пакетов за один цикл загрузки. Следовательно, весь контент, который пользователь увидит немедленно без необходимости скроллинга (англ. «Above the fold» - ATF-контент) должен весить 14 Кб или меньше. Убедитесь, что ваш сервер обновлён до последней версии, иначе этот недочёт может ограничить передачу до 3 или 4 пакетов при первом соединении.
  • Ускоренные мобильные страницы (англ. Accelerated Mobile Pages - AMP): используйте оптимизированные веб-страницы, созданные на открытом исходном коде, что позволит серверу/браузеру быстро их обрабатывать. Google хранит утверждённые AMP в специальном кэше и обслуживает их уже оттуда. Используя структурированную разметку, эти страницы могут загружаться мгновенно.

Если вам нужно увеличить скорость загрузки страниц, начните с инструмента Google’s PageSpeed Insights . С его помощью можно измерить производительность ваших страниц как на мобильных, так и десктопных системах по шкале в баллах от 0 до 100. Результат от 85 баллов и выше свидетельствует о хорошей производительности. Тестируется время загрузки ATF-контента и полной страницы. Также вы можете использовать браузерные инструменты вроде Developer Console в Chrome, Web Console в Firefox или Tools Console в Internet Explorer для поиска ошибок и узких мест.

Помните о пользовательском опыте

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

После скорости загрузки страниц пользовательский опыт (англ. User eXperience, UX) является наиболее важным фактором, который определит, останется посетитель на сайте и совершит желаемое вами действие либо же покинет, толком ничего не сделав. Способ использования вашего сайта мобильными посетителями кардинально отличается от такового при работе с его десктопной версией. Это связано не только с размерами экрана – мобильные посетители ожидают получить возможность почти немедленного достижения своих целей. 70% мобильного поискового трафика вырабатываются в течение 1 часа. Мобильные пользователи – народ нетерпеливый, следовательно, вам нужно оптимизировать получаемый ими UX для того, чтобы открыть более прямой путь к конверсии:

При создании мобильного сайта у вас есть 3 варианта, как сообщить поисковым системам, что у вас именно мобильный сайт: адаптивный дизайн, динамичный дизайн и мобильный поддомен:

  • Адаптивный дизайн является рекомендованным Google методом создания мобильного сайта. Он не требует каких-либо изменений текущего кода, чтобы сообщить роботам о своём мобильном характере. Для реализации адаптивности необходимо установить мобильный мета-тег в шапку (head) страницы. Этот тег сообщает мобильным устройствам о способе отображения в зависимости от размера экрана. Правильный код тега выглядит следующим образом:
  • Динамический дизайн сайта - данный метод потребует больше времени на разработку. Суть в том, что такие сайты используют различный HTML-код для мобильной и десктопной версии путём обнаружения характера устройства пользователя. Вам нужно использовать в таком случае Vary HTTP в хедере, чтобы оповестить бота Google о мобильном характере страницы.
  • Мобильный поддомен – этот метод требует больших затрат времени и ресурсов, чем другие два. Он заключается в создании отдельного мобильного сайта и последующим размещением его на поддомене (как правило, mobile.домен.com). Как и в случае с динамическим дизайном, бот Гугла не сможет обнаружить, что данный сайт предназначен для мобильных пользователей. Вы должны будете использовать тэг Schema для локального бизнеса указывает поисковикам, что означает информация, представленная у вас на сайте. Дополнительно вы можете включить информацию о формах оплаты, географии обслуживания, логотипе, обзорах и рейтингах вашей компании. Google использует схемы разметки, чтобы найти информацию для своих баз знаний. Воспользуйтесь этим, чтобы данные о вашем бизнесе появились в Гугловской поисковой выдаче.
  • Убедитесь, что название вашей компании и её местоположение включены в главную страницу мета-тега заголовка наряду с его описанием. Если тег заголовка содержит лишь название компании, поисковым системам будет трудно определить, к какой отрасли относится ваш бизнес. Это сеть цветочных магазинов, строительных или бижутерии? Кто знает. Укажите эти данные. Сделать это просто, пример: Стройсервис | Строительство | Москва. Если ваш бизнес действует в нескольких регионах, создайте страницу для каждого из них.
  • Также рассмотрите включение названия вашего города в URL, но делайте это аккуратно, поскольку использование ключевых слов прямого вхождения может принести больше вреда, чем пользы.

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

В значительной степени поисковые системы полагаются на рейтинги и обзоры. Убедитесь, что ваш бизнес присутствует в списках Yelp, Foursquare, Google+ и прочих подобных сервисах. Вы не можете контролировать получаемые отзывы, зато можете стимулировать их положительный окрас: скидки, пробные версии, дополнительные товары или просто пошумите о себе в социальных сетях. Оставьте знаки, напоминающие вашим покупателям о важности предоставления ими отзыва. Для локальных продаж отзывы очень важны, чем их больше будет, тем лучше.

Анализ ключевых слов для мобильного SEO

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



Выводы

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

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

Вы заметили какие-либо заметные перемены в ваших поисковых рейтингах после того, как Google изменил мобильный алгоритм поиска весной 2015 и 2016 годов? Насколько ваш мобильный трафик стал отличаться от десктопного после этого?

Особенности мобильного SEO

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

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

Мобильная оптимизация сайта

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

1. Адаптивный
Используя его, посетителям будет предоставляться идентичная версия страницы HTML, с изменением CSS стилей, с целью корректного отображения всех элементов. Этот способ весьма простой и является одним из лучших.
Особенности адаптивного дизайна:

  • Его можно применять под любые размеры;
  • Простота настройки;
  • Отсутствие проблем с дублями страниц;
  • Снижение скорости работы площадки.

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

Особенности динамического дизайна:

  • Возможность изменять содержимое страниц для различных видов трафика;
  • Снижение скорости работы площадки;
  • Необходимость дополнительных затрат времени, для добавления каждой публикации в 2 видах;
  • Нет проблем с дублями страниц.

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

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

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

Вам решать, какой из представленных способов использовать.

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

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

      • Если вы решили использовать способ, заключающийся в создании отдельного сайта для мобильного трафика, не забудьте о применении тегов rel canonical и alternative. С их помощью, поисковая система Google, будет легко отличать, какая из площадок является основной, а какая – мобильная версия;
      • Для того чтобы поисковые системы могли благополучно сканировать все мобильные страницы проекта, появляется необходимость в создании карты сайта для мобильных сайтов;
      • Лучший способ повышения удобства использования ресурса – создание различных мобильных приложений. Разработка – занятие не из лёгких. Но, если вам под силу сделать это – приступайте как можно скорее. Вы не ошибётесь;
      • Не допускайте ошибку, которая уже вошла в привычку большого количества вебмастеров (при использовании мобильной версии они направляют пользователя на главную страницу, а не по релевантной ссылке). Ставьте правильные редиректы с каждой страницы, на те же страницы мобильной версии;
      • Различные видео, так же как и изображения, могут не поддерживаться с мобильных устройств. А без этих материалов, пользователи могут хуже воспринимать информацию сайта. Во избежание этого, необходимо изменить формат видеороликов с Flash на HTML5. После этого, информация станет доступна пользователям с мобильных устройств;
      • Какие-то страницы вашей основной площадки, могут не иметь аналогов. В подобных случаях, нужно настраивать страницу с ошибкой 404 на мобильной версии площадки;
      • Многие забывают о том, что интерфейс является одним из самых важных факторов мобильных сайтов. Размер дизайна становится на порядок меньше, и, чтобы он был удобным, нужно грамотно всё разместить (меню, форму поиска, контактные данные…..). Тщательно продумайте, как правильно разместить всё самое важное на не очень большой странице;
      • Использование интеграции с социальными сетями, обеспечит вам и пользователям дополнительные удобства. Ведь практически все, привязывают свой профиль от Вконтакте или Facebook. Так же, будет хорошо, если на мобильной версии помещена кнопка, позволяющая поделиться страницей через свой профиль;
      • После того, как вы создали сайт под мобильный трафик, привяжите его к определённому региону. Это необходимо, так как, исходя из статистических данных, пользователи мобильных устройств, пользуются региональной выдачей;
      • Важнейший элемент каждого ресурса – оформление контента. Вам необходимо позаботиться о том, чтобы информация на вашей площадке, красиво, качественно и корректно отображалась в мобильных устройствах.
        По аналитическим прогнозам, в будущем, интернет будут посещать ещё чаще с помощью мобильных устройств. В этом нет сомнений, из-за безумного роста продаж смартфонов. Поэтому, владельцам сайтов нужно заблаговременно побеспокоиться об этом, и грамотно настроить свою площадку.

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

(Прим. пер.: От «только компьютерные фанаты будут пользоваться Интернетом» до «каждый пялится в свой смартфон весь день напролет» через 20 лет. Неплохо, команда .)

Телефон стал продаваться примерно с 1878 года, но потребовался 71 год, прежде чем он появился в каждом доме в США. Это позволило типичному владельцу бизнеса в 1907 году размышлять на протяжении 50 лет, нужен ли ему телефон в магазине или нет.

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

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

Почему мобильные устройства стали сейчас жизненно важными

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

2. Выберите решение для создания сайта, адаптированного под мобильные устройства

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

Отзывчивый дизайн – это «гибкая» сетка, которая автоматически «отзывается» (т.е. масштабируется) на изменение размеров экрана.

Мобильная версия – это мобильная копия сайта, доступная по отдельному URL адресу. Вместо www.example.com посетители с мобильных устройств будут перенаправлены на m.example.com.

Динамический показ – это конфигурация, при которой сохраняется URL адрес, но сервер, в зависимости от устройства, отправляет разные варианты веб-страницы.

С точки зрения веб-разработки, каждый из методов имеет свои достоинства и недостатки. Для получения более подробной информации прочтите , от SEO PowerSuite.

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

Если у вас уже есть работающий сайт на WordPress, проверьте его с помощью тестовой страницы Google. Если тест на адаптацию под мобильные устройства не будет пройден, тогда у вас будет два варианта:

Много современных тем для WordPress являются адаптивными. Подумайте о замене своей старой темы.

Если смена темы вас не устраивает, то существует масса бесплатных и платных плагинов, которые вам помогут.

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

Активность пользователей на вашем сайте является еще одним фактором при ранжировании. Поэтому убедитесь в том, что посетителям вашего сайта будет легко найти кнопку «позвонить» или карту.

4. Сделайте так, чтобы сайт не загружался медленно

Уменьшение количества HTTP запросов и оптимизация изображений помогут вашему сайту загружаться быстрее. Инструмент от Google под названием PageSpeed Insight точно скажет, какие проблемы существуют у вашего сайта и как их решить. Далее я перечислил наиболее распространенные.

Уменьшение числа HTTP запросов

Каждое изображение, CSS и JavaScript файл создают отдельный HTTP запрос к серверу. Вот некоторые техники по уменьшению числа запросов:

Убедитесь в том, что у вас всего один внешний CSS файл и внешний JS файл.

Разместите внутренний JavaScript код внизу вашего html документа, перед закрывающим тегом body.

Минифицируйте CSS и JavaScript код.

CSS спрайты помогут объединить многочисленные запросы в всего лишь один.

Используйте data: URI.

Избегайте неправильных HTTP запросов, убирая «битые» ссылки.

Включите браузерное кеширование.

Оптимизация изображений

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

Похожие статьи