подписка
Подписаться
05/03/2021
Как веб-дизайн влияет на SEO-продвижение сайта

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

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

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

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

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

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

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

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

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

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

Screenshot_57

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

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

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

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

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

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

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

Screenshot_78

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

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

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

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

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

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

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

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

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

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

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

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

Screenshot_79

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Screenshot_83

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

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

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

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

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

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

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

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

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

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

Вывод

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

Прокомментировать
Читайте также
Николай Полушкин
эксперт, DIUS
11/02/2021
Влияет ли CMS на SEO-продвижение. Или это только миф
Что лучше для SEO-продвижения - платный или бесплатный движок. И влияет ли на продвижение конкретная CMS. Давайте разбираться... Подробнее
Руслан Суханов
Интернет-маркетолог, агентство MTP DIGITAL
10/12/2020
Продвижение в Фейсбук: пошаговая инструкция для интернет-магазинов
Любой интернет-магазин нуждается в продвижении. Что нужно знать для раскрутки страницы интернет-магазина в Фейсбук... Подробнее
26/04/2018
"Яндекс" включил в поисковую выдачу кнопку для чата с магазином
Компании, пользующиеся JivoSite, теперь могут добавить в свой сниппет в выдаче кнопку, которая отправляет клиента в чат... Подробнее
23/08/2016
"Маркет" позволит рассказать о товаре больше
В сентябре "Яндекс.Маркет" добавит для товарных категорий, переведенных на CPA, страницы с подробным описанием товара... Подробнее
15/07/2013
Что влияет на позиции сайта в Google?
Исследование MozCon: главные факторы ранжирования - авторитетность ссылок, ключевые слова и скорость загрузки... Подробнее