SEO Driven Development: как разработать сайт сразу с учетом SEO
Рассказывает Екатерина Астахова, IT Project manager DD Planet
Как выглядят основные этапы разработки сайта? Обычно все начинается с определения целей, задач и анализа целевой аудитории. Далее разрабатываются прототип и дизайн-макеты, создается сайт, проходит тестирование и запуск. И в большинстве случаев только после этого задумываются о развитии и продвижении сайта.
С первого взгляда такая последовательность кажется логичной, но в реальной жизни данный формат уже не работает. Давайте разбираться, почему. То, что продвижение сайта скромно стоит на последнем месте, в корне неправильно. 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-специалист.
И швец, и жнец, и на дуде игрец
Если смотреть на этапы, предваряющие собственно разработку сайта, может показаться, что часть работ лежит вне компетенции SEO-специалиста и проходит на стыке разработки и маркетинга, однако в действительности трудно представить грамотного сеошника, не разбирающегося в основах web-разработки, аналитики и UX-дизайна.
Основные этапы работ
Весь процесс SEO Driven Development можно разделить на 8 основных этапов. Ниже рассмотрим их подробнее.
1. Анализ ниши, целевой аудитории и конкурентов
Для начала необходимо определить для каждого продукта или услуги:
что мы продаем / какие услуги оказываем;
кому;
- какова ценность продукта/услуги;
- аналоги на рынке;
- УТП (уникальное торговое предложение).
На данном этапе SEO-специалист совместно с менеджером продукта изучают входящий бриф от заказчика. Важно понять цели, основные направления деятельности компании, приоритетные в продвижении регионы, товары и услуги заказчика и их особенности на рынке.
Примеры из практики
Конкурентный анализ в рамках SEO бывает нескольких типов. Ниже для примера приведен анализ по источникам трафика для сайта службы доставки и распределение конкурентов по топ-10 в тематике туризма для сайта известного туроператора.
Конкурентный анализ – сводная таблица по источникам трафика:
Распределение сайтов в топ-10 по высокочастотным запросам тематики туризм:
2. Построение структуры
На этом этапе происходит сбор и кластеризация семантического ядра. Собранные запросы распределяются для продвижения по категориям. Важно учитывать не только общность групп запросов, но и их интент (цель, что именно хотел увидеть пользователь, набирая тот или иной запрос в поисковике). Разный интент требует разных посадочных страниц.
Классификация запросов по типу интента:
- Информационные (статьи, обзоры, аналитика).
- Навигационные (конкретный бренд, торговая марка, определенный сайт, геолокация).
- Транзакционные (коммерческие).
Примеры из практики
Распределение по типам страниц для запросов кластера «Карты рассрочки» для сайта www.vbr.ru:
Страница сайта должна быть релевантна интенту запроса. На основе полученных данных после сбора и кластеризации семантики выстраивается будущая структура сайта, прорабатываются разделы, категории, вид карточки товара, а также выявляется необходимость в дополнительных информационных страницах:
- Блог/Статьи
- Вопросы и ответы
- Отзывы
- Консультации
- Галерея
- и др.
Определение интента вручную – достаточно сложная и ресурсоемкая задача. Для этого нужно каждый запрос прогнать вручную отдельно для Яндекса и Google, проанализировать выдачу, учесть контекст поискового профиля. Проще всего проверить интент запроса при помощи специального инструмента в арсенале сервиса «Пиксель Тулс».
Структуру сайта можно составить в виде MindMap (карта смыслов). Разработка MindMap визуально помогает определиться с основными страницами и типами шаблонов на будущем сайте. Например, можно спарсить структуру у конкурентов при помощи специального инструмента, так называемой «лягушки» – Screaming Frog SEO Spider.
Пример из практики: MindMap для сайта по оборудованию «умных домов»
Задача SEO-специалиста: распределить собранные кластеры по страницам, продумать «дерево запросов», понять, как именно создать структуру и навигацию, как пользователи будут искать сайт.
3. Прототипирование
На основе данных, полученных после анализа конкурентов, составляются прототипы для дизайнеров. Для SEO характерно общее правило бенчмаркинга, когда «лучшие» в своем сегменте проекты задают правила «успешности». Тем не менее, стоит смотреть не на вообще всех конкурентов, а только на «похожих» (наиболее близких по формату). Например, не имеет смысла сравнивать сайт одного производителя и крупный агрегатор с предложениями разных компаний.
Как создаются прототипы
На этапе прототипирования продумывается навигация и взаимодействие пользователя с сайтом. Исходя из семантики, выстраиваем макет идеальной посадочной страницы, попав на которую, пользователь получит максимально полный ответ на свою потребность.
Пример из практики:проработка посадочной страницы услуги «Доставка документов» для сайта службы доставки.
На примере услуги «Доставка документов» регион «Москва».
В настоящий момент услуга включена в пакет – классическая доставка.
Это не совсем верный подход, так как существует список запросов, относящихся конкретно к услугам по доставке документов – значит, их логичнее объединить в кластер и вынести в структуре отдельной страницей.
Согласно пользовательскому спросу видим:
Интересны для анализа следующие моменты:
- Акценты по спросу.
- Отдельная услуга, схожая по интенту с основной.
Справа идут запросы-подсказки. Это наиболее частые запросы от пользователей в рамках введенных ключевых слов. Все они относятся к вакансиям: люди ищут работу курьером. Это говорит о необходимости проработки раздела с вакансиями.
Полученная семантика
Акценты по спросу
На изображении выше красным и зеленым цветом выделены так называемые «акценты по спросу» – в нашем случае это запросы вида:
По интенту запросов становится ясной необходимость проработки различных вариантов по тарифам услуги. Объединив близкие по значению запросы «экспресс» и «срочная», мы получаем тариф №1 – срочная доставка. Решим, что для такого города, как Москва, срочная – это 3 часа. Два других схожих запроса: «за день» и «быстрая» объединим в тариф №2 – для Москвы это доставка до 5 часов.
Отдельная услуга в рамках текущей семантики
Обратите внимание на запрос: Печать документов с доставкой
Интент: Пользователь хочет загрузить документы со своего устройства, заказать услугу печати данных документов с доставкой в последствии на дом. Варианты: ксерокопия паспорта, печать дипломной или курсовой работы.
Отдельная услуга в рамках кластера – очень хороший пример того, что на первый взгляд неочевидно и скрыто без детальной проработки семантики SEO-специалистом.
Запросы, лежащие «под» запросом «Печать документов с доставкой»:
Итак, проработав семантику, распределив запросы по группам, можно предположить, что именно хочет увидеть пользователь на посадочной странице. Это могут быть тарифы, информация о времени доставки, возможность отслеживания, выбор удобных для доставки времени и даты. Структуру посадочной страницы отразим схематично в прототипе – получится своеобразный Landing Page в рамках одного домена.
Прототип страницы «Курьерская доставка документов по Москве»
Вывод: проработка и прототипирование структуры посадочных страниц в соответствии с ожиданиями и потребностью пользователя помогут улучшить usability, снизят процент отказов, что, в свою очередь, благоприятно повлияет и на продвижение сайта в целом.
4. Дизайн и верстка
Дизайн и верстку мы будем рассматривать единым фронтом работ, главное понять необходимость тестирования верстки непосредственно SEO-специалистом. Сеошник должен проверить:
- верную навигацию, перелинковку;
- наличие хлебных крошек;
- наличие разводящих страниц;
- присутствие и вид заголовков;
- отсутствие верстки телефонов и email-адресов с помощью изображений;
- доступность контента и прочее.
5. Программирование
На данном этапе в ТЗ для программистов SEO-специалисту важно описать основные логики и правила, например:
- настройку редиректов;
- принцип формирования карты сайта, мета-тегов, урлов и хлебных крошек;
- микроразметку;
- канонические страницы;
- возможность размещения SEO-текстов;
- создание дополнительных выборок, посадочных страниц
и так далее.
Микроразметка и SEO
Чаще всего для разметки используется специальный стандарт Schema.org, который создан и поддерживается самыми популярными поисковиками. Schema.org нужен для формирования расширенного сниппета и повышения релевантности страницы.
Виды микроразметки
Самыми распространенными видами микроразметки являются элементы, общие практически для любого сайта:
- карточка организации;
- блок «Контакты» на сайте;
- хлебные крошки (навигационная цепочка);
- товары и цены;
- отзывы на товары или организацию.
Особняком идет разметка для социальных сетей OpenGraph (для соцсетей), у Твиттера своя разметка.
Проверить корректность микроразметки можно специальным валидатором:
https://webmaster.yandex.ru/tools/microtest/ от Яндекс.
https://developers.facebook.com/tools/debug/ от Facebook.
Стоит отметить, что существует эффективная и простая в использовании альтернатива – формат JSON-LD. Поисковики прекрасно распознают JSON-LD, формат облегчает индексирование и повышает видимость сайта в поиске благодаря расширенным сниппетам. При этом JSON-LD совместим со Schema.org.
6. Подготовка контента
Пока сайт находится в стадии разработки, самое время уделить внимание проработке контента. SEO-специалист на основе семантического ядра и анализа конкурентов составляет ТЗ на тексты для копирайтеров.
Общие требования к контенту:
Для каждой страницы сайта должна быть возможность задать уникальный текст.
Размещение текста должно быть доступно любому человеку без специализированных знаний html при помощи удобного визуального редактора.
- Текст доступен без открытия по клику/наведению, не прогружается асинхронно.
На данном этапе 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 разметка.
"Конкурентный анализ – сводная таблица по источникам трафика: "
когда вы собирали вот эти данные, какими источниками вы пользовались?
Здравствуйте, в данном случае использовался SimilarWeb
Скорее всего SemilarWeb или Alexa
"Пока сайт находится в стадии разработки, самое время уделить внимание проработке контента."
Всегда было интересно, от чего зависит порядок стадий.
Я предпочитаю отдавать дизайнеру макет страницы с уже готовым текстом. Обычно структура страницы блочная, блоки можно переставлять.
Тексты для типовых страниц можно отдать дизайнеру и сразу, но в итоговом варианте текстов же будет гораздо больше. Порядок стадий более зависит от порядка принятого в компании.
Статья-оправдание или "за что я тебе бабки плачу, Катя?"... И почему статью про SEO пишет Project manager, а не шмео-специалист?