Как сделать редизайн и обновить сайт, сохранить позиции и не потерять SEO-трафик

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

Подготовка к редизайну и обновлению

Чтобы изменения на сайте принесли пользу и посетителям, и владельцам, к редизайну нужно тщательно подготовиться. Этот процесс можно разбить на 3 этапа. Рассмотрим их по порядку.

Анализ текущего состояния сайта

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

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

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

Все плюсы и минусы в работе сайта нужно записать. Недочеты в процессе редизайна предстоит исправить, а преимущества — сохранить.

Определение ключевых страниц и контента

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

Чтобы определить ключевые страницы, нужно изучить целевую аудиторию (ЦА) и особенности ее поведения. Например, если на решение о покупке влияет наличие отзывов о продукте, стоит добавить раздел с ними. 

Подробнее о том, что такое ЦА и как ее определить, читайте в статье «Что нужно вашим клиентам: изучаем целевую аудиторию».

Ключевой контент — это содержание ключевых страниц. Он включает в себя тексты, фотографии, видео и другие материалы. 

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

Чтобы понять, о чем писать на сайте, пригодится анализ ЦА, о котором мы упоминали выше. Также нужно изучить поисковые запросы пользователей. Простыми словами, выяснить, что гуглят люди и какие фразы для этого используют. Это поможет создать полезный контент, настроить SEO-оптимизацию и повысить посещаемость ресурса. 

А чтобы подготовить сильные тексты для сайта, воспользуйтесь советами из статьи «Как написать текст для сайта».

Планирование структуры и дизайна сайта

Это основной этап подготовки к обновлению и редизайну сайта. От правильно продуманной структуры зависит удобство и информативность сайта, от его дизайна — эстетическая привлекательность и узнаваемость. А вместе они влияют на эффективность сайта. Например, на конверсию и поведенческие факторы, которые важны для SEO.

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

Как сделать удобный и понятный сайт, читайте в нашей статье «Юзабилити сайта: что это такое и как его улучшить».

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

Выбрать подходящее цветовое оформление для сайта поможет наш материал «Психология цвета в веб-дизайне». А посмотреть примеры актуального дизайна можно в статье «Тренды веб-дизайна в 2023 году». 

Процесс редизайна

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

Создание нового дизайна

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

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

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

Пример разработки макета в Figma

Запрет индексации 

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

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

Чтобы запретить индексацию, нужно прописать в файле robots.txt директивы:
User-agent: *
Disallow: /

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

Верстка сайта на тестовой платформе

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

• Создать самописный сайт. Этот вариант хорош для сложных, нестандартных проектов. Но без помощи разработчика, который напишет код, тут не обойтись.
• Сделать проект на CMS (от англ. Content Management System — система управления контентом). Способ подходит для блогов, интернет-магазинов и других проектов. Можно попробовать собрать сайт самому, если вы обладаете временем и терпеливостью, или делегировать эту задачу специалисту.
• Собрать сайт на конструкторе. Оптимальный вариант для сайтов компаний, визиток, портфолио, лендингов и небольших магазинов. Самый простой и удобный способ, который позволяет легко управлять своим сайтом, быстро вносить в него изменения и не думать о размещении на хостинге. Помимо самостоятельной сборки, некоторые платформы предлагают создание сайта под ключ дизайнером. Например, на Craftum лендинг «под ключ» будет стоить до 15 000 рублей, а многостраничный сайт — до 30 000 рублей. А если вы хотите сделать сайт самостоятельно, подписка обойдется всего в 159 рублей в месяц.  

Проверка нового сайта на ошибки и баги

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

Необходимо убедиться, что:

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

SEO-оптимизация обновленного сайта

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

Метатеги

Метатеги — это title, description, alt, заголовки H1-H6. Их стоит скопировать со старого сайта или прописать для обновленных страниц, так как они влияют на позиции сайта в поисковиках.

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

Скорость загрузки

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

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

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

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

Проверить скорости загрузки сайта помогут специальные сервисы, например, PageSpeed Insights или Site Speed.

Создание карты сайта

Карта сайта (sitemap) — это страница, на которой перечислены все разделы и подразделы ресурса, а также ссылки на каждый из них. Она не только упрощает навигацию пользователей на сайте, но и является важным инструментом SEO-оптимизации.

Поисковые роботы используют карту сайта для быстрого и эффективного сканирования всех страниц и их индексации в поисковой базе данных. 

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

• Проверьте, чтобы в карте не осталось ссылок на технические или неактуальные страницы.
• Внесите в карту все новые разделы и ссылки на них.

Пример:

Фрагмент карты сайта интернет-магазина Samsung

Обновление старых ссылок на новые

Если в процессе редизайна менялась структура сайта, какие-то URL-адреса потеряли актуальность или изменились, старые ссылки могут остаться активными и вести пользователя на несуществующие страницы. Это может негативно сказаться на SEO-продвижении сайта.

Чтобы не допустить потери трафика и сохранить позиции в поиске, необходимо обновить старые ссылки на новые, настроив 301-редирект. Для этого можно использовать несколько методов.

• Первый метод — плагины. Если ваш сайт работает на CMS, используйте плагины, которые автоматически перенаправляют пользователей с несуществующих страниц на актуальные. 
• Второй метод — обновление ссылок вручную. Для этого нужно найти устаревшие ссылки на сайте и заменить их на новые. Не забудьте также обновить внутреннюю перелинковку.

Подробнее о 301-редиректе и устранении несуществующих ссылок мы поговорим в следующем разделе.

Читайте также: «Влетаем в ТОП! Пошаговая инструкция по самостоятельной оптимизации и SEO-продвижению сайта».

Обновление сайта

Если редизайн завершен и успешно протестирован, можно приступать к самому ответственному шагу — переносу сайта на работающий домен.

Перенос сайта и обновление всех страниц

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

Алгоритм действий зависит от многих факторов, например:

• Проект переезжает на другой хостинг или остается на прежнем? 
• Раньше у вас был самописный сайт, а теперь вы собрали его на конструкторе?
• На какой именно платформе будет размещен сайт? 

Обычно у платформ есть четкие инструкции по переносу домена и привязке к сайту. Их можно найти в FAQ или базе знаний.

Пример из базы знаний в конструкторе Craftum

Делимся советами, которые помогут качественно и безболезненно выполнить перенос сайта:

• Делать бэкап старого сайта. Это поможет сохранить все данные и избежать потери информации.
• Выбирать оптимальное время для переноса. Если у вас интернет-магазин, не стоит обновлять его в период высокого спроса: в разгар сезона, в преддверии праздников, распродаж или запусков новых коллекций. Лучше изучить метрики и выбрать день недели и время суток, когда посещаемость ресурса ниже всего. Учитывайте, что в работе сайта могут возникнуть ошибки. Важно иметь возможность исправить их в спокойном режиме.
• Контролировать посещаемость. Если трафик упал, перепроверьте, правильно ли вы перенесли все данные на новый домен.

Битые ссылки и их исправление

Битыми называют ссылки, которые ведут на несуществующую страницу. Пользователь при переходе по ним видит сообщение об ошибке. Например, вот такое:

Битые ссылки возникают по разным причинам: когда вы удаляете страницы на сайте, переносите контент на другие страницы или меняете URL-адреса. 

Чтобы найти их, можно использовать бесплатные онлайн-инструменты, например, Broken Link Checker или Dead Link Checker. Другой способ — посмотреть отчет о битых ссылках в сервисе Google Search Console.

Следующий этап — исправление битых ссылок:

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

Установка 301-редиректа

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

Если у страницы теперь другой URL, 301-редирект перенаправит пользователей с устаревшей ссылки на новую.

Настроить редирект можно с помощью:

• внутреннего функционала CMS или используемой платформы;
• файла .htaccess;
• если вы используете популярную CMS WordPress, то помогут плагины Redirection, Yoast SEO или Simple 301 Redirects.

Обновление данных в сервисах аналитики

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

А еще не забудьте снять запрет индексации в файле robots.txt, чтобы ваш-интернет ресурс появился в поисковиках и мог занять там хорошие позиции.

Проверка и отслеживание изменений

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

Полный список показателей, которые нужно держать под контролем, можно найти в статье «Самые важные метрики при анализе эффективности сайта».

Мониторинг показателей трафика и конверсии

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

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

Отслеживание позиций в поисковой выдаче

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

1. Проверьте, проиндексировались ли новые страницы или те, у которых изменился URL. Если что-то пошло не так, через поисковики их никто не найдет.
2. Отслеживайте индексацию страниц без изменения URL. Проконтролируйте, чтобы они не исчезли из поиска.
3. Используйте инструменты для отслеживания позиций. Например, Allpositions, Topvisor или Rush Analytics.
4. Анализируйте изменения. Если заметили, что веб-страницы опустились или поднялись в Google и Яндекс, выясните почему. Возможно, дело в новой структуре сайта, метатегах, контенте или дизайне.

Заключение

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

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

Конструктор Craftum станет удобным помощником в работе над новой версией сайта. Сервис позволяет не только разрабатывать и корректировать дизайн, используя стильные шаблоны и разнообразные блоки, но и настраивать SEO, чтобы привлекать клиентов из поиска.