Как провести редизайн сайта и не потерять позиции и заявки

Больше всего редизайн теряет в день запуска: адреса сменились, тексты пропали, цели в Метрике молчат. Внутри 6 этапов с результатом каждого, сроки по типам сайтов, карта адресов с примером, редиректы 301 для nginx и чек-лист первого часа после переключения.

Больше всего денег редизайн съедает в день запуска. Новый сайт выходит аккуратным, быстрым, с хорошими фотографиями, а через 2 недели в отчете минус треть переходов из поиска и вдвое меньше заявок. Дизайн тут ни при чем. При переезде поменялись адреса страниц, пропали тексты разделов, форма заявки перестала отправлять цель в Метрику.

Редизайн сайта проходит 6 этапов: аудит текущего сайта, структура и прототипы, дизайн-макеты, верстка и программирование, перенос контента с настройкой редиректов, запуск с контролем. Корпоративному сайту на это нужно 2–4 мес., интернет-магазину 3–6 мес. (это моя оценка по типовым проектам, ниже покажу, из чего она складывается). Позиции и заявки сохраняются, если до начала работ собрана карта старых адресов, а после запуска 2–3 недели кто-то каждый день смотрит в Вебмастер и Метрику.

Редизайн, рестайлинг или новый сайт: что именно вы заказываете

Под словом «редизайн» заказчики понимают 3 разные работы. От того, какая из них нужна вам, зависят срок, бюджет и риск для поискового трафика. Поэтому первый вопрос на встрече у меня всегда один: что останется от старого сайта?

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

Этапы редизайна сайта

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

1. Аудит текущего сайта. Выгружаем список всех страниц, смотрим в Метрике и Вебмастере, какие из них приносят переходы и заявки, фиксируем позиции по основным запросам, скорость, работу форм. Результат этапа: таблица страниц с пометками «оставить», «объединить», «убрать» и замеры «до», с которыми потом сравним новый сайт.
2. Структура и прототипы. Решаем, какие разделы будут на новом сайте и что стоит на каждой странице. Прототип здесь серый и схематичный, без цветов. Его задача в том, чтобы спорить о содержании до того, как дизайнер потратил 2 недели на макет.
3. Дизайн. Сначала главная и 1–2 ключевые внутренние страницы, после согласования стиля все остальные шаблоны и мобильные версии. Отдельно рисуются состояния: пустая корзина, ошибка в форме, страница 404.
4. Верстка и программирование. Макеты превращаются в шаблоны, подключаются формы, каталог, интеграции с CRM и учетной системой. Работа идет на тестовой копии, закрытой от поисковых роботов.
5. Перенос контента и редиректы. Тексты, фотографии, документы, метатеги переезжают на новые шаблоны. Для каждого старого адреса, который меняется, настраивается перенаправление на новый.
6. Запуск и контроль. Переключение, проверка по чек-листу, ежедневный мониторинг первые 2–3 недели.

Самая частая ошибка в порядке работ: аудит пропускают. Логика заказчика понятна, старый сайт все равно под снос, зачем его изучать. Но без аудита неизвестно, какие страницы кормят бизнес. Собирательный пример: у производственной компании 40% переходов из поиска приходило на 12 старых статей в разделе «Вопросы и ответы», который в новой структуре никто не предусмотрел. Его бы просто не перенесли.

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

Сколько длится редизайн

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

Цифры в таблице оценочные: это типовые сроки проектов, нормативов здесь нет. По этапам время делится примерно так: аудит и структура занимают 2–3 недели, дизайн 3–6 недель, разработка 4–10 недель, перенос и запуск 1–2 недели.

Теперь о том, что растягивает срок на практике. Не разработка.

• Согласования. Макет главной лежит у директора 10 дней, потом возвращается с правками от 4 человек, которые противоречат друг другу. Лечится одним ответственным со стороны заказчика и сроком ответа в договоре: 3 рабочих дня на этап.
• Контент. Новые тексты и фотографии обычно пишет и собирает сам заказчик. Это всегда дольше, чем планировалось. Если в новом дизайне под каждую услугу нужны 5 фотографий и отзыв, а их нет, готовый сайт будет стоять с заглушками.
• Интеграции. Обмен с 1С, CRM, платежи, доставка. На старом сайте они как-то работали, документации нет, человек, который их настраивал, уволился.
• Правки после согласования. «Давайте еще добавим раздел» на этапе верстки стоит втрое дороже, чем на этапе прототипа.

Мое мнение: срок редизайна на 60% определяет заказчик. Проект, где на вопросы отвечают в тот же день, заканчивается вовремя почти при любом объеме.

Как не потерять позиции: карта адресов и редиректы

Поисковая система знает ваш сайт как набор адресов. К каждому адресу привязаны история, ссылки с других сайтов, поведение посетителей. Если после редизайна страница «Монтаж вентиляции» переехала с /services/ventilation.html на /uslugi/montazh-ventilyacii/, а со старого адреса ничего не ведет, для поиска это 2 события: одна страница исчезла, другая появилась с нуля.

Правило первое и главное: если адрес можно не менять, не меняйте. Новый дизайн прекрасно живет на старых адресах. Менять их стоит, когда старая структура мешает (технические адреса вида ?id=345, разделы, которых больше нет), а не ради красоты.

Там, где адрес все же меняется, нужен постоянный редирект с кодом 301. Яндекс в справке Вебмастера прямо рекомендует при смене структуры сайта ставить серверный редирект 301 со старых адресов на новые; если точного аналога страницы нет, а тематика сохранилась, перенаправлять на раздел. Google в руководстве по переносу сайта с изменением адресов советует держать переадресацию как можно дольше, по крайней мере год, и не строить цепочки длиннее 3–4 переходов.

Как собрать карту адресов

Карта адресов — это таблица из 2 основных колонок: старый адрес и новый. Старые адреса берутся из 4 источников: файл Sitemap, выгрузка страниц в поиске из Яндекс Вебмастера, отчет «Страницы входа» в Метрике за год и список страниц, на которые есть внешние ссылки. Источники надо объединить, потому что в карте сайта часто нет старых акций и статей, которые до сих пор находят в поиске.

old_url;new_url;action;visits_year
/services/ventilation.html;/uslugi/montazh-ventilyacii/;301;4120
/services/cond.html;/uslugi/kondicionery/;301;2890
/faq/kak-vybrat-split.html;/blog/kak-vybrat-split-sistemu/;301;1730
/news/akciya-2021.html;/akcii/;301;45
/about/vacancy.html;;404;12
/contacts/;/contacts/;keep;3350

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

Редирект всех старых страниц на главную — плохое решение. Посетитель искал вентиляцию, попал на главную и ушел. Поисковая система видит то же самое.

Как выглядят редиректы на сервере

Десяток перенаправлений можно прописать по одному. Когда их сотни, удобнее таблица соответствий. Пример для nginx:

# в секции http
map $request_uri $new_uri {
    /services/ventilation.html   /uslugi/montazh-ventilyacii/;
    /services/cond.html          /uslugi/kondicionery/;
    /faq/kak-vybrat-split.html   /blog/kak-vybrat-split-sistemu/;
}

# в секции server
if ($new_uri) {
    return 301 $new_uri;
}

После запуска каждую строку карты проверяют автоматически: скрипт запрашивает старый адрес и смотрит, что вернулся код 301 и что конечная страница отвечает 200. Одна такая проверка выглядит так:

curl -sI https://example.ru/services/ventilation.html | grep -iE "^(HTTP|location)"
# HTTP/2 301
# location: https://example.ru/uslugi/montazh-ventilyacii/

Что перенести кроме адресов

Редиректы спасают адреса. Но страница может остаться на месте и все равно потерять позиции, потому что с нее исчезло то, за что ее показывали.

• Заголовки и метатеги. Title, description и H1 каждой значимой страницы переносятся как были или улучшаются осознанно. Новый шаблон, который подставляет во все title название компании, обнуляет годы работы.
• Тексты. Дизайнеры любят воздух и короткие подписи. Если на странице услуги было 4 абзаца с ответами на вопросы клиентов, а в новом макете осталось 2 строки под фотографией, запросы, по которым страницу находили, уйдут вместе с текстом. Текст можно переупаковать: вкладки, раскрывающиеся блоки, таблицы. Выбрасывать нельзя.
• Доступность для робота. Яндекс отдельно предупреждает: при смене дизайна проверьте, что содержимое есть в HTML-коде страницы, а не подгружается только скриптами, и что на страницах нет случайного запрета индексации.
• Микроразметка. Хлебные крошки, товары, организация, вопросы и ответы. В старых шаблонах она была, в новых про нее забыли.
• Счетчики и цели. Код Метрики, цели на отправку форм и клики по телефону, передача данных электронной коммерции. Если у форм поменялись идентификаторы, цели перестанут срабатывать, и вы решите, что заявок нет.
• Служебные файлы. robots.txt, Sitemap с новыми адресами, файлы подтверждения прав в Вебмастере и Search Console.

Отдельная история — запрет индексации на тестовой копии. Пока сайт в разработке, его закрывают от роботов, и это правильно. Неправильно, когда запрет уезжает на боевой сайт вместе с шаблонами. В коде это одна строка:

<meta name="robots" content="noindex, nofollow">

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

День запуска и первые 2 недели

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

Чек-лист первого часа после переключения:

1. На страницах нет метатега noindex, robots.txt не закрывает сайт целиком.
2. Выборочно 20–30 старых адресов из карты отдают 301 на правильные страницы.
3. Каждая форма отправляет заявку: письмо пришло, сделка в CRM создалась, цель в Метрике сработала.
4. Телефон кликается с мобильного, коллтрекинг подменяет номер.
5. Оплата и оформление заказа проходят до конца (для магазина).
6. Sitemap с новыми адресами добавлен в Вебмастер и Search Console и отправлен на переобход.
7. Страница 404 отдает код 404, а не 200.

Дальше начинается наблюдение. В Яндекс Вебмастере каждый день смотрим исключенные страницы и ошибки обхода: всплывут адреса, которых не было в карте. В Метрике сравниваем переходы из поиска и конверсию форм с теми же днями прошлой недели. По справке Яндекса, новые страницы попадают в поиск в течение 2 недель, если отправить их на переобход; столько же уходит на удаление старых.

Колебания позиций в первые недели — норма, и Google об этом пишет в своем руководстве прямо. Тревожный сигнал другой: конкретная страница, которая приносила переходы, исчезла из поиска и не возвращается через 2–3 недели. Тогда проверяем по порядку: редирект, код ответа, метатеги, текст.

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

Где редизайн теряет заявки

Трафик может сохраниться полностью, а заявок станет меньше. Причины обычно прозаичные.

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

Вторая причина — формы. В новом дизайне форма заявки стала длиннее (маркетолог попросил добавить 3 поля) или уехала с первого экрана в самый низ. Третья — скорость: тяжелые анимации и видео на фоне делают страницу красивой на макете и медленной на телефоне. Замерьте скорость до и после; как это сделать, описано в статье про проверку скорости загрузки сайта.

Поэтому я за то, чтобы у редизайна была измеримая цель. «Сделать современно» целью не является: это невозможно проверить. «Поднять конверсию страницы услуги в заявку и не потерять поисковый трафик» — можно. Замеры «до» мы взяли на первом этапе, замеры «после» снимаем через месяц после запуска, когда поиск успокоится. В Design Lab сравнение показателей до и после запуска входит в проект редизайна как отдельный пункт плана.

С чего начать, если редизайн уже решен

До разговора с подрядчиком сделайте 3 вещи. Выгрузите из Метрики отчет по страницам входа за год, чтобы видеть, какие страницы приводят людей. Запишите, что на текущем сайте работает хорошо: об этом редко спрашивают, а зря. И назначьте одного человека, который будет принимать решения по проекту.

С этим набором техническое задание пишется за неделю (что в него включить, есть в материале про ТЗ на разработку сайта). И уже в ТЗ должны стоять 2 строки, которые чаще всего забывают: «карта адресов и редиректы 301 входят в работы» и «контроль индексации 3 недели после запуска входит в работы». Если их нет в смете, редизайн сайта закончится в день запуска, а его последствия вы будете разбирать сами.