SEO Driven Development: как разработать сайт сразу с учетом SEO

Рассказывает Екатерина Астахова, IT Project manager DD Planet

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

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

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

На этапе разработки сайта часто не совсем очевидно, зачем нужно SEO. Вы можете сказать: «Позвольте, но нам необходим просто сайт, а не продвижение, зачем привлекать к разработке дополнительного специалиста, ведь это повлечет увеличение сроков и стоимости проекта!».

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

Во-вторых, требования к разработке со стороны SEO в 2020 году можно отнести к категории must-have – в основном, это рекомендации по технической части, удобству (usability) и адаптивности.

В разработке сайтов популярны методологии BDD (Behavior-driven development, дословно «разработка через поведение») и CDD (Customer Driven Development или клиентоориентированная разработка). SEO Driven Development не существует как отдельная методология, но понятие вполне имеет место, и мы в DD Planet надеемся на его скорейшую популяризацию. Наравне с BDD, где основная идея – совмещение интересов бизнеса или продукта с техническими требованиями, – разработка с учетом SEO-оптимизации показывает себя весьма эффективно и идеально справляется с основной целью бизнеса – продавать.

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

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

На каком из этапов разработки, указанным выше, нам потребуется привлекать толкового SEO-специалиста? Правильным ответом будет – на всех!

В качестве лирического отступления. Мы в DD Planet приверженцы гибкой методологии разработки проектов и классических ролей – Product Manager (Product Owner) и Project Manager (Account Manager).

Владелец продукта (Product Owner/Product Manager) – это человек, который отвечает за видение конечного продукта и его ценности для пользователя. Продукт имеет фокус на определение цели сайта. Компетенция владельца продукта – ответ на вопросы: что делать и какой продукт создавать исходя из понимания конкуренции, предметной области, общения с заказчиком и интересов конечных пользователей.

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

Ответом на вопрос – кто должен отвечать за разработку – будет стандартная связка из менеджера проекта и менеджера продукта, но ни в коем случае не SEO-специалист.

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

Весь процесс SEO Driven Development можно разделить на 8 основных этапов. Ниже рассмотрим их подробнее.

Для начала необходимо определить для каждого продукта или услуги:

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

Примеры из практики

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

Конкурентный анализ – сводная таблица по источникам трафика:

Распределение сайтов в топ-10 по высокочастотным запросам тематики туризм:

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

Классификация запросов по типу интента:

Примеры из практики

Распределение по типам страниц для запросов кластера «Карты рассрочки» для сайта www.vbr.ru:

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

Определение интента вручную – достаточно сложная и ресурсоемкая задача. Для этого нужно каждый запрос прогнать вручную отдельно для Яндекса и Google, проанализировать выдачу, учесть контекст поискового профиля. Проще всего проверить интент запроса при помощи специального инструмента в арсенале сервиса «Пиксель Тулс».

Структуру сайта можно составить в виде MindMap (карта смыслов). Разработка MindMap визуально помогает определиться с основными страницами и типами шаблонов на будущем сайте. Например, можно спарсить структуру у конкурентов при помощи специального инструмента, так называемой «лягушки» – Screaming Frog SEO Spider.

Пример из практики: MindMap для сайта по оборудованию «умных домов»

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

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

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

Пример из практики:проработка посадочной страницы услуги «Доставка документов» для сайта службы доставки.

На примере услуги «Доставка документов» регион «Москва».

В настоящий момент услуга включена в пакет – классическая доставка.

Это не совсем верный подход, так как существует список запросов, относящихся конкретно к услугам по доставке документов – значит, их логичнее объединить в кластер и вынести в структуре отдельной страницей.

Согласно пользовательскому спросу видим:

Интересны для анализа следующие моменты:

Полученная семантика

Акценты по спросу

На изображении выше красным и зеленым цветом выделены так называемые «акценты по спросу» – в нашем случае это запросы вида:

По интенту запросов становится ясной необходимость проработки различных вариантов по тарифам услуги. Объединив близкие по значению запросы «экспресс» и «срочная», мы получаем тариф №1 – срочная доставка. Решим, что для такого города, как Москва, срочная – это 3 часа. Два других схожих запроса: «за день» и «быстрая» объединим в тариф №2 – для Москвы это доставка до 5 часов.

Отдельная услуга в рамках текущей семантики

Обратите внимание на запрос: Печать документов с доставкой

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

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

Запросы, лежащие «под» запросом «Печать документов с доставкой»:

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

Прототип страницы «Курьерская доставка документов по Москве»

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

На данном этапе в ТЗ для программистов SEO-специалисту важно описать основные логики и правила, например:

и так далее.

Чаще всего для разметки используется специальный стандарт Schema.org, который создан и поддерживается самыми популярными поисковиками. Schema.org нужен для формирования расширенного сниппета и повышения релевантности страницы.

Виды микроразметки

Самыми распространенными видами микроразметки являются элементы, общие практически для любого сайта:

Особняком идет разметка для социальных сетей OpenGraph (для соцсетей), у Твиттера своя разметка.

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

https://search.google.com/structured-data/testing-tool/u/0/ от Google.

https://webmaster.yandex.ru/tools/microtest/ от Яндекс.

https://developers.facebook.com/tools/debug/ от Facebook.

Стоит отметить, что существует эффективная и простая в использовании альтернатива – формат JSON-LD. Поисковики прекрасно распознают JSON-LD, формат облегчает индексирование и повышает видимость сайта в поиске благодаря расширенным сниппетам. При этом JSON-LD совместим со Schema.org.

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

Общие требования к контенту:

На данном этапе SEO-специалисту нужно:

Пример из практики:распределение статей на три категории для контент-плана туристического сайта.

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

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

В зависимости от целей бизнеса SEO-специалист и менеджер продукта на данном этапе настраивают системы аналитики. Сюда входят такие работы, как установка счетчиков, добавление сайта в панели вебмастера Яндекс и Google, проверка корректности отработки целей, подключение систем сквозной аналитики и Call Tracking. В отдельных случаях: настройка чат-ботов, подключение технологий AMP (Accelerated Mobile Pages) от Google и Турбостраниц от Яндекс (Турбо и Амп страницы подключают в основном для информационных сайтов, например новостных ресурсов).

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

1. Взаимодействие/целевые страницы

2. Целевое действие/конверсия

3. Вовлеченность

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

В случае с простыми сайтами влияние SEO на сроки и результаты разработки не так сильно, поскольку базовые аспекты учесть несложно. Если же речь идет о большом проекте и нестандартных решениях (стартапах, маркетплейсах и т.п.), SEO Driven Development может стать ключевым фактором, влияющим на развитие проекта.

И в завершение, приведем краткий чек-лист. Здесь он минимальный по пунктам, однако он поможет оценить, все ли учтено в рамках SEO Driven Development.

robots.txt

Файл sitemap.xml

Зеркала сайта

Использование метатегов

Оптимизация URL

Оптимизация изображений

Организация ЧПУ

Микроразметка