Как сохранить позиции сайта и трафик после редизайна

Краткое содержание статьи:

Рано или поздно дизайн сайта и его функционал устаревают, поэтому раз в 2-5 лет (в зависимости от специализации) необходим редизайн. Сайт снижает свою эффективность по разным причинам:

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

Редизайн бывает трех видов. Первый – это когда затрагивается только внешний вид сайта; второй – частичный, при котором обновляется часть функционала; третий – полный, когда изменяются его дизайн, вёрстка, структура, функционал, и в некоторых случаях контент. Отличие редизайна от разработки с нуля заключается в том, что обновление проводится на текущем сайте, где учитываются его разные составляющие, например: имеющаяся статистика, контент, особенности функционала.

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

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

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

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

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

• Проведите технический аудит сайта и исправьте найденные технические ошибки. Что-то можно проверить вручную, а что-то с помощью специализированных программ. Например, избавьтесь от пустых страниц, настройте 404-ответ сервера для разных видов несуществующих страниц, укажите правильные атрибуты canonical, настройте ЧПУ и многое другое.
• Проведите аудит юзабилити сайта – так вы сможете понять, в какую сторону двигаться, что улучшить и как. С помощью него вы сможете определить задачи редизайна.
• Сделайте полный бекап сайта и его базы данных. Например, вы можете настроить резервное копирование на хостинге и сохранить его себе локально или выкачать файлы вручную с помощью FTP и БД-клиентов, например, FileZilla и phpMyAdmin.
• Зафиксируйте данные вашего сайта: трафик с разных источников, позиции в Яндекс и Google, конверсии, наиболее посещаемые страницы, статистические показатели (отказы, время на сайте, глубина просмотра, прямые заходы и пр.), информацию об аудитории: пол, возраст, география, их интересы. Понимание перечисленного поможет понять каким образом необходимо внедрять доработки, ничего не испортив, а напротив – создать возможности для дополнительного расширения.
• Сохраните оптимизацию сайта (title, description, h1, SEO-тексты) в отдельных файлах.
• Составьте список актуальных URL сайта, например, вы можете спарсить ссылки вашего ресурса специальными программами или с помощью генератора sitemap.xml. Такой список поможет в настройке 301-редиректов в случаях, если адреса страниц будут меняться.
• Перенесите тестовую версию сайта, предназначенную для редизайна, на отдельный домен или поддомен, который должен быть закрыт от индексации поисковыми системами.

Как сохранить позиции? Рекомендации при редизайне

Мета-теги, заголовки и тексты

Проверьте наличие правильных title, description, h1 (в т.ч. шаблонов оптимизации title, description, h1), SEO-тексты. Если они отсутствуют, разместите их повторно. Также не спешите вносить новые изменения в title, description, h1, дождитесь, когда сайт полностью проиндексируется поисковыми системами после редизайна, и уже тогда вносите правки.

Контент

Помимо SEO-текста необходимо проверить наличие и другого контента, а именно: страниц «Контакты», «О компании», «Доставка», «Оплата» и подобных; сайдбаров, различных блоков с рекомендациями товаров, отзывов, количества выводимых товаров в категории, реквизитов, лицензий, сертификатов, прайс-листов, новостных и статейных лент, описаний товаров, телефонов, адресов и пр.

Структура

Изменения в структуре нежелательны, но не всегда от них можно отказаться. Если структура всё-таки менялась, сравните сохранённые URL старого сайта с тем, что есть сейчас. Там, где есть изменения, настройте 301-редиректы, чтобы сохранить позиции, ссылки, поведенческие показатели документов.

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

Для оперативного поиска битых ссылок просканируйте сайт специальными программами, например, Xenu’s Link Sleuth, Screaming Frog SEO Spider, LinkChecker.

CMS

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

Форматирование и вёрстка

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

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

Редиректы и ответы сервера

Вручную и с помощью сервисов проверьте редиректы и их ответы сервера. Например, с http на https, c www на без www, с адреса со слешем на конце адресации на адрес без слеша и пр. При этом важно, чтобы у них был правильный код ответ сервера – 301 (запрошенный документ был окончательно перенесен на новый URL). Обычная страница – например, категория каталога – должна давать код 200.

Для несуществующих страниц необходимо проверить не только код ответа сервера 404, но и соответствующее оформление. У таких страниц не рекомендуется настраивать перенаправление на другие страницы.

Исходный код сайта

Для быстрой загрузки сайта необходимо, чтобы CSS-стили и JS-скрипты были вынесены в отдельные файлы. Неиспользуемые скрипты и стили рекомендуется удалить. Уже после выкатывания нового сайта могут вноситься какие-то доработки по CSS-стилям, поэтому важно следить, чтобы не допустить их конфликта.

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

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

Внутренние ссылки

Важно, чтобы использовался единый формат адресации, например, рекомендуется относительный вид URL – благодаря этому вы избежите разных проблем. Единообразие начала и окончания ссылок, например, у относительных URL слеш в начале и слеш на конце адреса. Также проверьте, чтобы отсутствовали индексные ссылки, т.е. содержащие index.php или index.html.

Изображения

Проверьте, чтобы у изображений были прописаны атрибуты alt и title. Можно дополнительно оптимизировать изображения: автоматически обрезать их до нужных размеров и сжимать до более лёгкого веса. Изображения должны иметь современные форматы, минимальный объем при оптимальном качестве отображения.

Мобильная версия

После редизайна важно проверить и мобильную версию сайта с помощью инструмента Google – Mobile-Friendly Test и Яндекса – «Проверка мобильных страниц». Вот обязательные пункты, которые должны быть реализованы на сайте для мобильных устройств:

• Размер шрифта не меньше 12 пикселей.
• Используйте мета-тег viewport, чтобы указать браузерам области просмотра контента.
• В контейнерах, на блоках, таблицах нежелательно наличие горизонтальной или вертикальной прокрутки.
• На мобильной и основной версии сайта должен совпадать исходный код сайта, а именно: текст, мета-теги, заголовки, HTTP-заголовки (например, canonical, hreflang, vary, expires, last-modified и др.), перелинковка, исходящие ссылки.
• Интерактивные элементы должны располагаться так, чтобы пользователь мог кликать на один, не попадая на другие.
• Не должно быть Flash-элементов, Java-апплетов, Silverlight-плагинов.

Кроссбраузерность

Рекомендуется проверить отображение сайта на разных популярных браузерах, в том числе на мобильных. Это можно сделать как вручную, установив браузеры, так и с помощью онлайн-сервисов. Проверка поможет выявить ошибки в коде, несоответствие стандартам HTML-разметки, некорректное отображение CSS.

Пагинация

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

После индексации сайта можно внести в неё некоторые изменения, например, с недавних пор Google рекомендует для страниц листинга настраивать атрибут canonical так, чтобы страницы ссылались сами на себя. Также можно сделать деоптимизацию title и description (убрать максимум коммерческих слов), и добавить в них приписку с номером текущей страницы.

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

Производительность сайта

Проверьте скорость загрузки сайта с помощью Page Speed Insights, Pingdom, GTmetrix. Для оптимизации производительности сайта рекомендуем избегать установку дополнительных пакетов и скриптов, это может сработать против вашего сайта, замедлив его еще больше. Для размещения сайта выберите хорошего хостинг-провайдера, чтобы по мере роста числа посетителей избежать проблем с неработоспособностью сайта.

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

Навигационные цепочки

Проверьте корректность строчек навигации: привычное расположение в левой-верхней части экрана, наличие полного пути, их логичность относительно иерархии (Главная - Категория - Подкатегория - Товар) или атрибутов (Главная - Продукт - Размер - Цвет), корректности названий и в целом понятности. Последний текущий элемент не должен ссылаться сам на себя.

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

С помощью «Валидатор микроразметки» от Яндекса, «Проверка расширенных результатов» от Google, «Валидатор разметки» от Schema.org проверьте на ошибки и предупреждения микроразметку, возможно, что при редизайне, какие-то её части могли потеряться.

Статистика

Проконтролируйте, что были перенесены счетчики систем статистики, и, установлены метки для целей – проверьте их отправку в Яндекс.Метрику и Google Аналитику. Если появились новые формы обратной связи или кнопки – настройте для них цели. Установите фильтрацию ваших заходов, чтобы они не попадали в системы статистики.

Работоспособность функционала

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

Robots.txt

Заново настройте файл robots.txt. С помощью директивы «Disallow:» закройте:

• документы PDF, DOC, XLS;
• страницы с версиями для печати;
• страницы служебного пользования (напр. авторизацию для входа в админку, в личный кабинет);
• страницы оформления заказов и отслеживания;
• функционал сравнения товаров;
• сортировку;
• неоптимизированные фильтры;
• профили пользователей;
• вид отображения товаров «Список», «Таблица»;
• страницу поиска по сайту;

С помощью директивы Allow откройте для индексации файлы с расширениями .js, .css, .fonts.

Sitemap

Проверьте наличие карты сайта. Если менялась структура сайта, обязательно обновите карты в формате XML и, если есть – в формате HTML. Отправьте XML-карту на переобход в Яндекс.Вебмастере и Google Search Console.

Яндекс.Вебмастер и Google Search Console

После обновления сайта панели вебмастера Google Search Console и Яндекс.Вебмастер помогут вам отслеживать индексацию сайта и выявлять разные технические ошибки и ошибки оптимизации, например, вы сможете увидеть какие варианты дублей начали индексировать поисковые системы, на каких страницах присутствуют одинаковые title и description или какие страницы долго отвечают роботу ПС.

Технический аудит

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

Отслеживание изменений

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