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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигация

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

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

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

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

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

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

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

SEO-like верстка

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

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

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

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

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

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

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

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

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

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

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

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