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

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

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

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

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

SEO Driven Development, или Мы пойдем другим путем

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

Работа с возражениями

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

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

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

Понятие SEO Driven Development

В разработке сайтов популярны методологии 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 Driven Development: как разработать сайт сразу с учетом SEO

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

И швец, и жнец, и на дуде игрец

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

Основные этапы работ

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

1. Анализ ниши, целевой аудитории и конкурентов

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

  • что мы продаем / какие услуги оказываем;

  • кому;

  • какова ценность продукта/услуги;
  • аналоги на рынке;
  • УТП (уникальное торговое предложение).

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

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

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

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

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

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

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

2. Построение структуры

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

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

  • Информационные (статьи, обзоры, аналитика).
  • Навигационные (конкретный бренд, торговая марка, определенный сайт, геолокация).
  • Транзакционные (коммерческие).

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

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

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

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

  • Блог/Статьи
  • Вопросы и ответы
  • Отзывы
  • Консультации
  • Галерея
  • и др.

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

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

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

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

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

3. Прототипирование

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

Как создаются прототипы

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

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

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

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

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

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

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

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

  1. Акценты по спросу.
  2. Отдельная услуга, схожая по интенту с основной.
  3. Справа идут запросы-подсказки. Это наиболее частые запросы от пользователей в рамках введенных ключевых слов. Все они относятся к вакансиям: люди ищут работу курьером. Это говорит о необходимости проработки раздела с вакансиями.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Дизайн и верстка

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

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

5. Программирование

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

  • настройку редиректов;
  • принцип формирования карты сайта, мета-тегов, урлов и хлебных крошек;
  • микроразметку;
  • канонические страницы;
  • возможность размещения SEO-текстов;
  • создание дополнительных выборок, посадочных страниц

и так далее.

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

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

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

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

  • карточка организации;
  • блок «Контакты» на сайте;
  • хлебные крошки (навигационная цепочка);
  • товары и цены;
  • отзывы на товары или организацию.

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

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

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

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

6. Подготовка контента

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

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

  • Для каждой страницы сайта должна быть возможность задать уникальный текст.

  • Размещение текста должно быть доступно любому человеку без специализированных знаний html при помощи удобного визуального редактора.

  • Текст доступен без открытия по клику/наведению, не прогружается асинхронно.

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

  1. Выбрать приоритеты в продвижении и страницы под них.
  2. Провести анализ контента конкурентов.
  3. Сформировать ТЗ копирайтеру и контент-менеджеру.
  4. Составить контент-план.

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

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

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

7. Тестирование

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

  • Отсутствие дублирующихся страниц. Настроить 301 редирект, если доступны обе версии сайта с www, либо без www. Общие правила формирования урлов: каждый URL должен быть доступен либо со знаком «/» на конце, либо без него.
  • Кроссбраузерность.
  • Микроразметку.
  • Отображение сайта на мобильных устройствах.
  • Скорость загрузки контента.
  • Отсутствие 5** и 404 ответов сервера – таких страниц на сайте быть не должно.

  • Формирование карты сайта (она должна быть без ошибок. Все ссылки в файле должны отдавать код ответа «200». Карта сайта должна быть актуальной, в идеале – автообновляемой).
  • Наличие уникальных мета-тегов.

  • Закрытие личного кабинета, административной панели, корзины и других служебных страниц от индексации.
  • Соответствие верстки сайта стандартам и успешное прохождение валидации.
  • Разметку страниц: тегом rel=canonical – для дублей, страниц с фильтрами и пр.
  • Подключение SSL-сертификата.

8. Настройка аналитики, AMP и Турбостраниц

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

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

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

  • Страница с услугами компании
  • Контакты
  • Заказ обратного звонка

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

  • Покупка товара
  • Положил товар в корзину
  • Скачивание прайс-листа
  • Оформление заказа

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

  • Заинтересованность пользователя: глубина просмотра, время на сайте, переход на похожие новости, статьи

Резюме

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

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

Краткий чек-лист

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

robots.txt

  • Технические страницы, страницы поиска, корзины, фильтрации закрыты для индексации атрибутом rel=nofollow или с помощью мета-тега noindex.
  • В файле указан путь к sitemap.xml.
  • Страницы пагинации НЕ закрываются атрибутом rel=nofollow, в robots.txt или с помощью мета-тега noindex.

Файл sitemap.xml

  • sitemap доступна по ссылке /sitemap.xml.
  • sitemap обновляется автоматически.
  • Для каждой ссылки указан параметр lastmod.
  • sitemap не содержит запрещенных к индексации страниц.
  • Число ссылок не превышает 50 000.
  • В xml карту включены все страницы сайта, открытые к индексации robots.txt и отдающие 200 код ответа сервера.
  • Исключены урлы, которые не нужно индексировать.
  • Кодировка UTF-8. В файле smap.xml в самой первой строчке перед<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> без отступов, пробелов и табуляции необходимо указать <?xml version="1.0" encoding="UTF-8"?>.

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

  • Нет технических дублей страниц: /index.php, /index.html, /index.htm, со слэшем, без слэша.
  • Стоит 301 редирект с HTTP на HTTPS для всех страниц.
  • Зеркала с WWW и без WWW склеены 301 редиректом.
  • Тестовые среды закрыты от индексирования.
  • Исключены поддомены, дублирующие контент основного сайта.

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

  • Сформированы шаблоны description и title для всех страниц.
  • Нет дублей title и description.
  • Нет пустых title и description.
  • H1 один на страницу.
  • H1 расположен в начале страницы, до тегов h2-h3.

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

  • Динамические url (кроме страниц пагинации) отсутствуют и не анализируются для трафика.
  • Каждой странице соответствует единственный URL.
  • Нет лишних уровней вложенности.
  • Нет дублей ключевых страниц, настроены 301 редиректы.
  • Внешние ссылки закрыты с помощью атрибута rel=«nofollow».
  • Нет битых ссылок.
  • Нет ошибок сервера (ответ 5**) (404).
  • На странице 404 размещена информация о том, что страница, на которую зашел пользователь, не существует. Страница ошибки 404 имеет навигацию и выполнена в стилистике сайта. Код сервера для таких страниц должен отдаваться именно 404.
  • Настроен 301 редирект с версии сайта со / на версию без /.
  • Нет циклических ссылок.
  • Установлены канонические страницы (rel=canonical для дублей).
  • Наличие протокола https.

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

  • Прописаны alt и title.
  • Нет битых изображений, все изображения загружаются быстро.

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

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

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

  • Разметка продуктовых карточек.
  • Разметка контактов.
  • Разметка главной.
  • Разметка хлебных крошек.
  • Open Graph разметка.
2626
33 комментария

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

1
Ответить

Здравствуйте, в данном случае использовался SimilarWeb

1
Ответить

Скорее всего SemilarWeb или Alexa

1
Ответить

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

1
Ответить

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

Ответить

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

1
Ответить