Оптимизация под мобильные: SEO в новых реалиях

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

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

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

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

5 причин, почему оптимизация под мобильные важна

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

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

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

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

2. Мобильный индекс. В ноябре 2016 года Google начал тестирование mobile-first индекса, согласно концепции которого, в будущем алгоритмы будут составлять оценку релевантности в первую очередь на основе мобильной версии страницы. И только в случае ее отсутствия – десктопной. Хотя, на данный момент это все еще позиционируется как «эксперимент», курс на смену парадигмы совершенно понятен.

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

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

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

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

5. Требования поиска. Google, а вслед за ним и Яндекс, четко дали понять – сайты, не отвечающие стандартам мобильной оптимизации, будут понижены в выдаче.

Поисковые системы научились хорошо понимать то, как люди взаимодействуют с сайтами. Если они переходят на страницу и сразу же уходят с нее, возвращаясь обратно к поиску – это повлияет отрицательно на видимость ресурса. И если сайт не адаптирован под мобильные, а процент таких переходов большой – это непременно негативно скажется на dwell time (время возврата к выдаче), показателе отказов и поведенческих факторах в целом.

Как сделать сайт mobile-friendly

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

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

• Отказ от Flash. Большинство мобильных браузеров не поддерживает данную технологию, и вместо нее лучше использовать более современные решения на базе HTML5;
• Относительная ширина элементов. При такой структуре блоков и прочих элементов, в отличии от традиционного фиксированного дизайна, они автоматически изменяются в зависимости от ширины окна. Это позволяет избежать появления прокрутки;
• Четкие и крупные шрифты. Пользователь должен иметь возможность без проблем все разглядеть, не прибегая к масштабированию. То, что вам кажется нормальным на обычном мониторе, на экране мобильного может быть почти неразличимым;
• Расстояние между элементами. Кнопки, иконки и различные CTA-элементы, не должны быть расположены слишком близко друг к другу, что может усложнять их нажатие или визуальное восприятие;
• Отказ от всплывающих окон. Попапы и всплывающие окна перекрывают контент, и закрыть их на смартфоне может быть затруднительно. Это сказывается на пользовательском опыте и увеличивает показатель отказов;
• Высокая скорость загрузки. Как особенности использования, так и скорость мобильного Интернета формируют особые требования к быстродействию мобильных сайтов. Кроме того, это еще и один из факторов ранжирования. Проверить скорость загрузки и получить рекомендации по ее увеличению можно при помощи таких сервисов как PageSpeed Insights и GTmetrix;
• Оптимизация архитектуры сайта. Проектировать сайт нужно таким образом, что им было удобно пользоваться на сенсорном экране, управляя пальцем. Кроме уже перечисленных советов также избегайте сложной навигации, крошечных кнопок, неадаптированных форм и всего прочего, что может усложнить задачу взаимодействия с ресурсом владельцу смартфона.

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

Google AMP, Турбостраницы, адаптивный дизайн

AMP – это аббревиатура от «Accelerated Mobile Pages», что переводится как «ускоренные мобильные страницы». Технология представляет собой надстройку над HTML, призванную ускорить загрузку страницы пользователем.

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

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

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

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

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

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

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

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

Будет ли эта инициатива распространяться массово или останется уделом крупных медиа – время еще покажет.

Адаптивный дизайн – это способ верстки страниц сайта, который позволяет им подстраиваться под размер экрана устройства, с которого осуществляется просмотр контента. Размеры и расположение контента и блоков страницы меняется таким образом, что с сайтом становится одинаково удобно работать как на 23-дюймовом мониторе PC, так и на 5-дюймовом экране смартфона.

Наглядно это можно увидеть на изображении ниже:

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

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

Необходимость, а не тренд

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

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

И если вам есть что посоветовать по этому поводу – пишите в комментариях!