UX-дизайн для SEO: как создать сайт, который нравится и поисковым системам, и пользователям

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

Рекламные посадочные страницы – красивые, минимум текста, проработанная графика и коммерческие факторы.

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

Почему же так?

Делится опытом: 

Сергеев Владимир
Основатель студии sergeev.studio по разработке и продвижению сайтов.
За плечами многолетний опыт, более 150 реализованных проектов от производства дверей до установки имплантов.
Опыт взаимодействия с рынками США, Испании, Эстонии, Индонезии, ну и конечно же всей России.

1. Красивый и проработанный со всех сторон лендинг стоит сделать не так уж и дешево. А учитывая, что с лендинга так или иначе начинается сайт – многие тестируют нишу и заведомо понимают, что SEO им сейчас не нужно, а куча непонятного текста – просто снизит конверсию.
2. Как правило, в топе по выдаче редко встретишь молодые сайты, если вы откроете топ10 по любому запросу и посмотрите возраст домена – в среднем он будет 5+ лет. А лендинги делаются и запускаются сразу, а в 80% случаев еще и без SEO подготовки.

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

Много контента – дизайн в помощь

1. Проблема:

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

Когда заказчик это видит, он принимает решение уменьшить кол-во карточек товара до адекватного минимума, ограничив это все популярными позициями. Теряется часть семантики и предложения.

Решение:

1. Фильтры – наподобие как во всех интернет-магазинах. Дорого и сложно, но привычно решает проблему.
2. Карусель товаров. Несложно и достаточно бюджетно. Одномоментно показывает только лишь 3-5 товаров, остальное при клике по навигационным элементам карусели.
3. Табы с товарами. Знаете как разделить 50 товаров на 4-7 частей? Используйте вкладки переключения.
   
4. Карусель + табы. На случай, если хотите сделать максимальное удобство и сохранение пространства. Просто листать 50 товаров может быть неудобно, а когда в каждой вкладке их по 5-10 штук, то почему бы и нет.

Товары мы взяли для примера, это может быть не 50 товаров, а, например блок «Этапы работы», «Наши услуги» (если их более 10 шт.), «Портфолио», «Галерея» и так далее – все это необязательно показывать сразу, можно давать небольшой дисклеймер.

2. Проблема:

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

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

Решения:

1. Функционал «Читать далее».
   Такое можно встретить на ресурсах, продающих доступ к материалу за подписку. Они показывают какую-то верхнюю короткую часть текста, а далее скрывают оставшуюся часть айсберга кнопкой «Читать далее».
   
   
2. Блок «Частые вопросы».
   Он очень компактный в сложенном варианте, а внутрь ответов можно вложить сколько угодно текста, хоть 300 символов, хоть 30 000 символов.
   
   
3. Микроразметка.
   Не забывайте дублировать информацию в микроразметку, например, из блоков HowTo или FAQ – это самое простое и очевидное, что может быть добавлено для роботов.
4. Всплывающие окна.
   Тоже отличное решение, но в случае, если само окно встроено в HTML и текст находится прямо в DOM, чтобы он индексировался роботами.

Вывод

Мы рассмотрели 2 концепции страницы:
1. Продающий лендинг с минимальным кол-вом информации.
2. Максимально подробная страница с подавляющей текстовой составляющей.

Большинство до сих пор уверенно, что это взаимоисключающие подходы при разработке посадочной страницы. Однако, как говорится, плохому танцору… Всегда есть способы добиться максимально синергетического эффекта от этих двух подходов, нужно проявить немного настойчивости и профессионализма, тогда у вас получится убить 2 зайцев одним выстрелом (если честно, то 3-х зайцев, еще и ваш бюджет 😊).