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

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

● длительность визита пользователя;
● возвраты на сайт;
● социальные сигналы - отметки “нравится”, репосты понравившегося контента, комментарии.


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

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

1. Они помогают поисковым “паукам” легко и быстро определить структуру сайта и обнаружить наиболее важные страницы.
2. Правильно организованная навигация и разбивка контента на логические блоки помогают пользователям эффективно ориентироваться на ресурсе. Это может увеличить вероятность того, что посетители останутся на сайте и продолжат искать интересующую их информацию. Хорошо себя зарекомендовало наличие блоков “похожие товары”, грамотная организация каталогов по принципу “одна продвигаемая страница - один запрос” и другие SEO-практики в коммерции.
3. Html-теги помогают поисковикам определить наиболее важные фрагменты контента и ключевые слова на странице. Так, например, заголовки h1-h6, метатеги title и description определяют для ПС тематику страницы, а также то, какие ключевые слова следует учитывать на ней в первую очередь.

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

Когда разработкой дизайна занимается только дизайнер, имеющий, как правило, художественный вкус и тонкую душевную организацию, существенно повышается вероятность того, что готовая верстка будет содержать самые качественные и красивые изображения, видео, иконки и другие элементы графического интерфейса. Экраны потенциальных покупателей будут выдавать самую четкую, сочную и детализированную картинку.
Звучит неплохо? Однако именно здесь кроется один из самых опасных подводных камней!
Дело в том, что в своей работе дизайнер редко задумывается об оптимизации. По этой причине у верстальщика, в задачи которого входит “перевести” макет в код, на руках оказываются качественные, уникальные, но неоптимизированные изображения, которые тратят огромные вычислительные мощности, замедляя загрузку и отрисовку контента в браузере. Особенно это касается коммерческих сайтов с большим каталогом товаров, насчитывающим десятки тысяч позиций.

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

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

Технологии не стоят на месте. Все больше пользователей полностью переходят на мобильные устройства, функциональность которых с каждым годом охватывает все больше сфер человеческой жизни. Даже в сложных промышленных тематиках, основной аудиторией которых являются люди среднего и старшего возраста, доля пользователей, посещающих сайт с мобильных устройств, составляет 55-60%.
Такие технологические гиганты, как Google и Яндекс, несомненно, в курсе данного тренда, и уже несколько лет продвигают принцип Mobile-first: в первую очередь любой интернет-ресурс должен быть оптимизирован именно под мобильные устройства.
Адаптивный дизайн предполагает не только правильное отображение на различных экранах, но и:


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


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

1. Наличие правильно оформленной карточки компании. В ней должна быть вся необходимая клиенту информация: график работы, все возможные способы связи, карта проезда (если актуально).
2. Наличие корзины, функционала заказа, возможность оплаты любым удобным способом.
3. Формы обратной связи, охватывающие все возможные способы: обратный звонок, онлайн-чат, формы обратной связи с возможностью прикрепления файлов.
4. Возможность поставить оценку и/или написать отзыв о товаре.
5. Наличие функционала фильтрации и сортировки товаров.
6. Продуманный и оформленный блок “Преимущества” с уникальными торговыми предложениями.

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

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


Некоторые работы могут включать в себя:


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


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