Адаптивный дизайн сайта и его значение для SEO

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

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

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

Наш блог – именно с таким дизайном. Попробуйте сузить по ширине окно браузера и посмотрите, что изменится. Тестить адаптивный дизайн можно при помощи данного сервиса от Google.

Адаптация сайта: возможные варианты

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

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

Отзывчивый адаптивный дизайн. Этот вариант является наиболее подходящим. Блоки в этом случае становятся «резиновыми» и при достижении минимально возможной ширины экрана, перестраиваются.

Мобильная версия сайта или Адаптивный дизайн?

По этому поводу существует множество мнений. Google и Яндекс советуют работать именно с адаптивным дизайном. Но давайте все же пройдемся по основным плюсам и минусам и одного и другого.

Адаптивный сайт

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

Мобильная версия

Гибкость. Данную версию сайта можно максимально заточить под интересы вашей ЦА. И не учитывать при этом основной сайт. Можно переключаться на десктопную версию. Да и сайт грузится быстрее. Несколько адресов. Приходится работать в два потока. Усложнение работы с сайтом.

RESS

Упомянутый нами варианты разработки – это не все, что можно использовать. Можно работать еще и с RESS (Responsive Design Server Side). Это технология, которую используют Google на своих сервисах. Всё легко: в зависимости от устройства, открывается тот или другой шаблон страницы.

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

Адаптивная верстка и ее роль для SEO

Поговорим на примере сайта с услугами по продаже и установке систем умного дома. Это достаточно старый ресурс.

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

Всё просто сделали на новый лад, слегка поменяли и адаптировали. И вот что получилось:

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

Общий показатель отказов уменьшился на 5 %. И это в основном за счет мобильной аудитории.

Это значительно отразилось на реакции Google и Яндекса:

Применять ли это в поисковой оптимизации?

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

Успехов!