Как веб-дизайн влияет на SEO-продвижение сайта

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

Поисковые алгоритмы сейчас более многогранны, чем десять или даже пять лет назад. В этой статье мы разберем, как дизайн сайта влияет на ранжирование в Яндекс и Google и как в связи с этим нужно учитывать треб1ования SEO при разработке дизайна. Специалисты Kokoc Group Павел Талакин и Лилия Голикова поделятся с вами опытом, накопленным за более чем 15 лет практики. 

Как дизайн влияет на позиции сайта в поисковой выдаче

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

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

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

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

SEO, конверсионность и дизайн часто тесно связаны и дополняют друг друга: 

• изменили дизайн – получили больше заказов на сайте – улучшились позиции на поиске (потому что предыдущий пункт улучшает поведенческие факторы) – получили еще больше продаж;
• изменили дизайн – улучшились позиции на поиске – получили больше продаж – еще улучшились позиции – получили еще больше продаж.

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

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

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

Удобная структура каталога

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

• "Давайте сделаем каталог компактнее".
• "Давайте вот эти разделы объединим, они же по смыслу похожи".
• "Давайте формировать каталог, исходя из структуры категорий в админке – так проще будет реализовать его вывод".

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

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

Пример раздела "Постельное белье" на Озоне. Как видим, с помощью фильтра можно выбрать размерность и материал

Посмотрим на примере. Допустим, вы торгуете домашним текстилем, и у вас есть раздел "Постельное белье".

В каталоге, организованном по принципу обычной логики и "давайте сделаем его компактнее", вы сделали подразделы "Хлопковое белье", "Шелковое белье", "Бамбуковое белье" и т. д. – структура по материалу ткани. В раздел "Хлопковое белье" вложили подразделы "Сатин", "Бязь", "Жаккард" и т. д. А уже внутри этих подразделов с помощью фильтра можно выбрать двуспальные, полуторные или односпальные комплекты.

​Казалось бы, хорошее решение. Но: 

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

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

• "Постельное белье из жаккарда";
• "Постельное белье из бязи";
• "Постельное белье 1.5";
• "Постельное белье из жаккарда 1.5" и так далее. 

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

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

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

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

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

Адаптивный дизайн сайта Wired.com

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

Почему это важно? Здесь также работает "тройное влияние": 

• И Яндекс, и Google проверяют, оптимизирован ли сайт под мобильные устройства. Если ответ "да", позиции такого сайта улучшаются.
• Улучшаются поведенческие факторы по сеансам с мобильных устройств, а доля мобильного трафика в некоторых нишах может доходить до 80%.
• Если посетителю с мобильного удобно выбрать и купить товар, то конверсия сайта растет.

У поисковиков есть специальные инструменты для проверки mobile friendly сайта: 

• для Яндекса: Яндекс.Вебмастер – Инструменты – Проверка мобильных страниц;
• для Google – инструмент "Проверка оптимизации для мобильных" https://search.google.com/test/mobile-friendly.

Коммерческие факторы

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

• Формирование доверия к вам как к продавцу;
• Удобный и быстрый выбор товара на сайте;
• Полную информацию о товаре, необходимую для принятия решения о покупке.

Факторы доверия

К коммерческим факторам ранжирования, которые повышают доверие покупателя к вам (и поисковых систем тоже), относится наличие на сайте: 

• Контактов. Лучше, чтобы способов связи было больше, имелся хотя бы один региональный телефон, а также номер формата 8-800 (для России); Оптимально вынесение списка контактов на отдельную страницу, а также расположение главных из них в шапке и подвале сайта;
• Онлайн-консультанта, обратной связи;
• Адреса офиса / торговой точки (или нескольких) и схемы проезда к ним;
• Условий гарантии и возврата товара, сервисного обслуживания, техподдержки;
• Лицензий, сертификатов, дипломов;
• Юридических реквизитов компании.

Удобный подбор товара

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

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

• Основывались на поисковом спросе. Можно выбрать низкочастотные поисковые запросы, в которых пользователи запрашивают товар с какими-либо параметрами, и на их основе создать фильтры. На примере того же постельного белья это могут быть цвет/рисунок ("белое постельное", "постельное белье с цветами"), точные размеры и т. п.
  По "неконкретным" запросам (например, "мощная точка доступа") можно добавить фильтр по мощности, который поможет пользователю выбрать товар с лучшими показателями.
• Оптимально отвечали потребностям покупателей. Слишком много фильтров сделают неудобным их использование, слишком мало – не позволят отобрать товары по всем важным параметрам.
• Были корректно реализованы с технической точки зрения. Иногда фильтры могут медленно обрабатывать запрос пользователя или работать с техническими ошибками.
• Стали основой для продвижения низко- и ультранизкочастотных запросов. Здесь нужно будет проработать техническую реализацию: формировать уникальный URL и метатеги для страниц – результатов отбора.

Поэтому так важно заложить в дизайне: 

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

Полнота информации в карточках товаров

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

Поисковым системам и пользователям важно, чтобы на странице товара были: 

• Цена;
• Качественные фото в разных ракурсах;
• Характеристики;
• Описание;
• Подробные фото- и видеообзоры;
• Информация о наличии товара (есть на складе или доступен под заказ, в какой срок будет привезен под заказ);
• Возможность добавить товар в "корзину" и позже оформить заказ (реализуется кнопкой "Купить" или "Добавить в корзину");
• Отзывы (важный фактор, влияющий на принятие покупателем решения о покупке);
• Информация о сроке гарантии;
• Опция сравнения с другими товарами;
• Информация о сроках доставки и условиях оплаты: даже если у вас есть отдельная страница "Доставка и оплата", нужно разместить краткую информацию и здесь, желательно – условия именно по этому товару;
• Ссылки на аналогичные товары: они дают возможность покупателю рассмотреть другие товары, если этот его чем-то не устроил, кроме того, это хорошая схема перелинковки.

Как правило, карточки товаров на сайте Mvideo.ru содержат все вышеперечисленные элементы

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

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

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

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

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

Для проверки скорости можно использовать инструмент от Google. В нем же можно посмотреть рекомендации о том, что нужно изменить.

Выявляем проблемные места дизайна, которые негативно влияют на SEO и продажи

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

• CTR в поисковой выдаче. Если ваша страница показывается на поиске (возможно, даже в топе), но кликают по ней мало – это плохо. Чаще всего виной всему – сниппет страницы. Он может быть нерелевантным запросу, непривлекательным, содержать ошибки и т. д. Или скорость загрузки страницы настолько медленная, что пользователь уходит с нее до полной загрузки, поэтому поисковик не фиксирует переход.
• Показатель отказов. Отказом в Яндексе считается посещение пользователем страницы продолжительностью менее 15 секунд без каких-либо действий. Для Google – если посетитель был только на одной странице и ничего там не делал. Нужно проанализировать страницы с высокими показателями отказов и понять, что препятствует пользователю задержаться на сайте, перейти к выбору товара или покупке.
• Время на сайте. Если пользователи быстро уходят, это может говорить о недостаточном количестве контента или ошибках в его отображении, о сложной навигации и структуре каталога, и т. д. В таких случаях помогают анализ с помощью Вебвизора, самостоятельный просмотр проблемных страниц в разных браузерах и т. д.
• Глубина скролла. Интересную и удобную страницу пользователи будут пролистывать до конца. Мешать этому может неправильное расположение элементов, ошибки в плагинах постепенной загрузки и т. п.

Вывод

Было бы странно пытаться перечислить все возможные взаимосвязи дизайна и SEO в одном коротком материале. У поисковиков 1000+ факторов ранжирования, и продвижение каждого конкретного сайта зависит от множества деталей и индивидуальных особенностей компании. Важно помнить, что разработка сайта должна идти комплексно, и привлекать SEO-специалистов лучше всего на самом первом этапе. Их задача – провести аудит конкурентов и дать рекомендации, связанные с коммерческими блоками, дизайном и отдельными элементами.