Внедряем SEO на этапе дизайна

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

Нужно задуматься о SEO еще на этапе написания ТЗ на сайт. По-хорошему, не стоит давать дизайнеру работать по брифу, если у вас нет желания заплатить команде сеошников еще 100-200-300 тысяч рублей за переработку сайта. Пригласите SEO на этапе создания ТЗ, проведите вместе с ним анализ конкурентов, соберите ядро запросов (семантическое ядро) и составьте ТЗ для дизайнера. Тогда, есть шанс что конверсия нового сайта будет выше старого сразу, а не после десятков A/B тестов. То же относится и к позициям сайта в ПС.

Начинаем разработку с SEO

SEO – это комплекс мер, направленный на повышение рейтинга сайта в поисковой выдаче, он обеспечивает органическое продвижение сайта. Другими словами, чем лучше оптимизирован сайт, тем выше он будет показываться в Гугле, Яндексе и других поисковиках (при этом, механизмы продвижения под разные поисковики - тоже разные). Быть в топе важно, так как пользователь редко заходит дальше второй страницы поиска. SEO – это и техническая часть, и контент, но многие моменты нужно учитывать еще на этапе создания дизайна.

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

Чем вам поможет SEO-специалист:

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

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

Составляем семантическое ядро

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

Семантическое ядро собирается с помощью аналитических сервисов Google и Яндекс – они показывают, что люди ищут по вашей тематике, какие запросы они используют совместно с основными, в каком городе или регионе чаще возникают эти запросы. Для наиболее полного анализа специалисты используют специальное ПО – например, KeyCollector. При этом анализируется и семантика ваших основных конкурентов.

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

Анализ семантического ядра поможет определить важные моменты:

  • Какие ваши товары и услуги будут наиболее востребованы. Например, если вы продаете одежду и видите, что в вашем городе очень популярны запросы «Одежда больших размеров» – следует сделать отдельный блок по этой тематике.
  • Что еще, помимо основных товаров и услуг, ищут потенциальные клиенты. Например, вместе с запросом «Женская одежда» многие ищут «Работа в магазине одежды» – значит, стоит разместить на сайт раздел с вакансиями. Или в запросах популярны вопросы «Как носить платье в горошек» – это завести на сайте блог и разместить там статью на эту тему.
  • Какие дополнительные услуги можно ввести. Например, пользователи часто ищут доставку одежды или химчистку – значит, можно подумать о включении этих услуг в свой прайс-лист и, конечно, указать их на сайте. Если дополнительно вы увидите, что популярны такие запросы, как «Срочная доставка» или «Срочная химчистка», можно разместить на сайте тарифную сетку по срочности услуг.
  • Если пользователи часто ищут одежду определенных брендов, это повод отдельно сделать фильтрацию по брендам.
  • Также вы можете определить смарт-теги для вашего поиска. Например, если в вашем регионе популярны запросы «маленькое черное платье», «синий мужской костюм» и т.д., вы можете вынести это в отдельные теги, которые будут показываться под строкой поиска.

При этом, важно не переборщить. Помните: информационные и продающие запросы стоит разделять.

Создаем структуру сайта

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

Итак, на основе семантики, мы можем включить в структуру следующие страницы:

  • Главная с отдельными рекламными блоками по одежде XXL и определенным брендам.
  • Информация о компании и вакансии.
  • Каталог с фильтрацией по брендам и смарт-тегами.
  • Блог со статьями по популярным темам.
  • Отзывы.
  • Стандартные, важные для магазина страницы - доставка и оплата, возврат, контакты, политика конфиденциальности и др.

При составлении структуры следует следить, чтобы:

  • Структура соответствовала лучшим страницам конкурентов по ключевым запросам, которые вам интересны.
  • Структура максимально подробно отвечала на вопросы, которые интересуют клиента на каждой странице.
  • В структуре не дублировались страницы сайта, если поисковик “склеивает” несколько страниц в одну.
  • В структуре были только посещаемые (!) страницы. Это особенно важно, так как если на сайте будет много страниц, на которые редко заходят - это приведет к понижению всего сайта.

Делаем прототипы

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

Чтобы создать SEO-like прототипы, дизайнер должен соблюдать несколько правил:

  • Главное меню составляется из основных ключевых запросов. Например, уместно вынести туда раздел «Одежда XXL», если он популярен. Также для SEO хорошо, если на страницах соблюдается двойная вложенность. Например, одежду XXL можно разделить на женскую и мужскую. Тройная уже может быть перебором.
  • Навигационное меню должно быть сквозным и располагаться на всех страницах сайта. Лучше сделать его раскрывающимся.
  • Каталог и карточки товаров должны содержать фотографии с возможностью их просмотра и увеличения, основные характеристики, уникальное описание, цену, кнопку «Купить».
  • Необходимо расположить на сайте блоки, которые увеличивают время взаимодействия пользователя с сайтом: поиск, форму обратной связи, кнопки «Купить в один клик» и «Заказать звонок».
  • Также на продвижение влияет наличие отзывов, реквизитов компании, контактов, карты сайта.
  • Обязательно помнить про коммерческие факторы Яндекса.

Разрабатываем LSI-контент

SEO-копирайтинг умер – да здравствует LSI, латентно-семантическая индексация. Другими словами, если 10-15 лет назад сайты выгружали мало осмысленные тексты, забитые прямыми ключевиками «купить одежду дешево» и «женская одежда размеров XXL в Москве», то сейчас роботы обращают внимание на смысловую нагрузку текстов и их полезность для читателя.

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

Наполнение контентом – это совместная работа SEO-специалиста, дизайнера и копирайтера. Сеошник дает ключевые слова и тематику, дизайнер отмечает размер текстовых блоков и примерный объем, а копирайтер пишет тексты, следуя выгруженным требованиям. Также, нередко, делается и наоборот. Копирайтер пишет тексты, затем – дизайнер их проставляет. Уместным считается создавать контент и на этапе прототипа.

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

Создаем дизайн

И вот несколько ключевых пунктов, которые нужно учитывать при формировании визуала.

Внимание на заголовки

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

  • На каждой странице должен быть только один главный заголовок – H1.
  • Далее нужно соблюдать иерархию. Например, после заголовка H1 должен строго стоять H2, а не H3. И, например, Н3 не может располагаться выше Н2.

Расположение элементов

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

Навигация

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

Структура сайта

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

Контентные блоки

Позаботьтесь о достаточном количестве текста и изображений. Уникальные тексты должны быть везде, на каждой странице. Если сам сайт не предусматривает большого количества текста, можно ввести раздел «Блог». Так вы и обеспечите обилие текстового контента, и получите постоянную обновляемость сайта, что хорошо сказывается на продвижении. При этом, текстовый контент должен быть именно текстовым, сканы - нежелательны. Что касается изображений, они не должны быть очень большими, чтобы не тормозить загрузку сайта. Также следует обратить внимание на корректное отображение на разных мониторах. Где это возможно – размещайте подписи к фото.

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

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

Учитываем SEO после дизайна

SEO-like верстка

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

Хорошо показал себя стандарт БЭМ («блок – элемент – модификатор»). При соответствии этому стандарту код получается удобочитаемым, структурированным, и в него легко вносить изменения, если это понадобится. И, конечно, такой код приятен для поисковых роботов. Принцип верстки по БЭМ состоит в том, что здесь используются 3 главных понятия:

  • Блоки. Это функционально независимые компоненты страницы, которые имеют свой стиль, размер, поведение и т.д. Примеры блоков – это строка поиска, футер, хедер и т.д. Блоки могут быть простыми и составными. Таким образом, вся верстка собирается из таких компонентов.
  • Элемент. Это часть блока, которая не используется отдельно от него. Например, элементами строки поиска может быть собственно строка, иконки, контент.
  • Модификатор. Это свойство блока или элемента, которое отвечает за изменение его поведения или внешнего вида. Например, модификатор может менять цвет строки поиска при неверно заданном значении. У блока или элемента может быть несколько модификаторов.

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

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

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

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

Последние штрихи

1. Натягиваем нашу верстку на движок. Проверяем, что на каждой странице у нас только один H1 (главный) заголовок, присутствуют подзаголовки H2 и соблюдена иерархия – то есть, подзаголовки H3 не находятся, например, выше по уровню, чем H2. Тексты должны быть в простых тегах, микроразметка на месте, картинки сжаты, чтобы не заставлять сайт долго грузиться.

2. Ставим кеширование и проверяем скорость загрузки сайта на https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect.

3. Исправляем ошибки и еще раз консультируемся с сеошником. Если необходимо – переносим URL, тексты, иную информацию со старого сайта под контролем SEO-специалиста.

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

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

Чек-лист юзабилити сайта

  • Легко ли читать текст на сайте? Достаточно ли он контрастен с фоном?
  • Насколько удобно меню и навигация в нем? Подсвечиваются ли в нем «активные» пункты? Имеются ли хлебные крошки? Насколько быстро сворачивается меню, когда мы убираем мышку?
  • Используются ли уникальные качественные изображения? Хорошо ли они отображаются в любой версии сайта?
  • Присутствуют ли логотип и контакты в шапке сайта? Есть ли форма обратной связи?
  • Размещены ли контакты и ссылки на основные разделы в футере?
  • Есть ли на сайте информация о компании и «элементы доверия» – отзывы, сертификаты, дипломы и т.д.
  • Удобно ли сделана форма обратной связи? Не слишком ли много там полей? Продумано ли появление сообщения об успешной отправке формы?
  • Присутствует ли подробная информация о порядке оказания услуг или доставке и оплате?
  • Насколько хорошо работает мобильная версия? Нет ли боковой промотки?

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

На этом все. Как обычно – жду вопросы и комментарии.

Я - Лена, UX/UI дизайнер, делаю осмысленный дизайн стартапов, сложных продуктов (ERP/CRM/BPM), работаю с банками, застройщиками, фармой. От 2000₽/час, от 100.000₽ за проект. Некоторые работы можно посмотреть тут, заказать тут.

Elena Nexman, UX/UI дизайнер
0
10 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

Большое спасибо!

Ответить
Развернуть ветку
Breitson Live

Дизайн без адобе 😂. Проф дизайн

Дизайнеры в корле 😂😂😂

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Молодой горошек

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

Может быть Вы имели ввиду Корел? Так он и сейчас пупырит...

Ответить
Развернуть ветку
Lena Nexman (UX/UI Дизайнер)
Автор

Недавно мне прислали UI Kit в Кореле... странно что не использовали Paint.
Не представляю сколько дизайнер мучался и страдал, пока его делал. А переносить его в PS и Figma - вообще сущее удовольствие, поэлементно...

Ответить
Развернуть ветку
Breitson Live

Дизайнеры, которые клепают в апках на телефоне контент 😂😂😂

А апки пришли за 2000 юаней на диске из Китая 😂😂😂

Ответить
Развернуть ветку
Breitson Live

Дизайнеры, которые клепают в апках на телефоне контент 😂😂😂

А апки пришли за 2000 юаней на диске из Китая 😂😂😂

Ответить
Развернуть ветку
Никита Карнаухов

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

Ответить
Развернуть ветку
Василина

Спасибо, очень полезная статья!

Ответить
Развернуть ветку
7 комментариев
Раскрывать всегда