Як оновити дизайн сайту та не втратити трафік. План дій від SEO-спеціаліста

Як оновити дизайн сайту та не втратити трафік. План дій від SEO-спеціаліста Якщо вбити в Google запит «редизайн сайту», то ви побачите, окрім статей-порад, ще й кейси «Як редизайн сайту допоміг збільшити кількість лідів у N разів». Тому для підприємців, котрі, дивлячись на свій сайт, подумують про редизайн, є дві новини. Хороша та… хороша.

Так, оновлення сайту, неспішне, продумане, може суттєво збільшити конверсію, коли просто відвідувачі перетворюються на ваших клієнтів.

І так, якщо грамотно зробити редизайн, можна зберегти існуючий трафік на сайт.

Я розповім у статті, з яких етапів складається процес редизайну сайту і що важливо врахувати. Насправді важливих етапів є два.

Етап перший. Підбір варіантів та створення нового дизайну

Реалізувати новий дизайн можна за допомогою:

  • шаблонів дизайну для перевірених CMS (opencart, WP, cs-cart тощо);
  • перевірених і вже готових рішень на платформах для створення сайтів та інтернет-магазинів (Хорошоп, Shopify).

А можна заморочитися та створити оригінальний дизайн.

Але насамперед потрібно вивчити тренди, сайти конкурентів. Провести трохи часу за комп’ютером та промоніторити топові сайти. А краще вивчити топові сайти конкурентів у ніші, щоб побачити круті фішки у дизайні, які роблять використання сайту зручним за умовчанням. Навіть якщо ви скористаєтеся шаблонним рішенням, можна його адаптувати.

Метод реализації нового дизайнуПеревагиНедолікиКому підходить
Використання шаблонів дизайну для CMS (сюди входить не просто використання якогось шаблону, а і його адаптація під вимоги ресурсу)Середня вартість в 50$.

Умовно швидка установка та адаптація.

Треба встановити, купити всі необхідні модулі та багато іншого.

В будь-якому випадку потрібен програміст для реалізації всього.

Оригінальним бути не вийде

У вас є ідея, й ви хочете її перевірити. Або ідея хороша, але поки недостатній бюджет. Цей метод збереже вам час та допоможе стартувати швидко й заробити гроші на зовсім інший дизайн, якщо захочете.
Використання готових рішень на платформах для сайтівВсе працює одразу й нема необхідності залучення програміста, дизайнера.

Відсутні витрати на хостинг і сервер.

Базовий набір функціонала для SEO закладений у продукті.

Неможна вносити свої коригування в дизайн, функціонал тощо.

SEO, як правило, представлене базово (редагування метатегів, тексти, що індексуються фильтрами)

Такі рішення добре підійдуть для стартапів, інтернет-магазинів. Inweb радить популярний в Україні Хорошоп
Створення оригінального дизайнуДизайн розробляється з урахуванням тематики, ЦА, ваших потреб, відгуків клієнтів.

Можна реалізувати всі бажання та відстроїтись від конкурентів.

Создание оригинального дизайна сайта затратно как по времени, так и по финансам.Оригінальний дизайн підійде вже сформированим бізнесам, які планують масштабування, ребрендинг. Такий формат дизайну реалізують звичайно дизайн-студії.

Додам приблизний план дій при створенні оригінального дизайну:

  1.  Ресерч сайтів конкурентів. Вивчення фідбеку від користувачів щодо взаємодії з продуктом конкурентів (профіль компанії, раніше Google my Business, відгуки на сайті та ін.)
  2. Розбір свого продукту та виявлення слабких та сильних якостей.
  3. Створення user flow.
  4. Проєктування UX-дизайну.
  5. Підбір стилістики для проєкту, вибір палітри, шрифтів, стилів ілюстрацій та графічних елементів.
  6. Підбір референсів.
  7. Створення концепту головної сторінки та підготовка 2-3 блоків головної сторінки.
  8. Розробка UI-дизайну.
  9. Створення дизайн-системи.
Розробників не таких, а сучасних та зручних сайтів, ви знайдете серед партнерів Inweb

Розробників не таких, а сучасних та зручних сайтів, ви знайдете серед партенрів Inweb

Я хотів промовчати, але це ще не все. Далі на вас чекає верстка, розробка функціоналу, тестування тощо.

Етап другий. SEO — ваше все

Припустимо, що з дизайном ви визначилися і всі узгодили. А що робити тепер, щоб не втратити ваш дорогоцінний трафік? Дуже прошу уважно вивчити чек-лист, бо неодноразово бачив, як найменше відхилення від плану правильного перенесення сайту призводить до катастрофи. Але спочатку вивчимо один момент.

Як закрити тестовий сайт від індексації та сканування

Так, сканування та індексація — це різні процеси. Є кілька варіантів, як це зробити, і ось найпоширеніші.

Використання стандарту виключень для пошукових роботів Robots.txt. Цей спосіб забороняє від сканування. При цьому сторінки можуть потрапити до індексу.

  • User-agent: *
  • Disallow: /

Заливаємо файл у кореневий каталог з таким змістом і тримаємо кулаки. Двома словами: спосіб не дуже надійний. Директива забороняє сканування, але не індексування. За певних умов сторінки тестового сайту можуть потрапити до індексу пошукової системи.

Використання метатегів:

  • noindex, nofollow. При виборі цього варіанта ви безпосередньо забороните індексування пошукових систем.
  • x-robots-tag noindex. Аналог метатегу, описаного вище, лише він реалізується лише на рівні сервера.

Розгорнути сайт на локальному сервері. У такому разі краулери пошукової системи його не знайдуть.

План дій щодо перенесення нового дизайну без втрати трафіку

  1. Закриваємо тестовий сайт, щоб він не сканувався і не індексувався, вибравши один зі способів, описаних вище.
  2. Перевіряємо, чи URL-адреса сайту відповідає рекомендаціям пошукової системи. Не забуваймо: вони мають бути ЛЗУ (людинозрозумілі).
  3. Переносимо всі метатеги та контент зі старого сайту на тестовий. Title, description та заголовки Н1. Не забуваймо, що один заголовок Н1 може бути лише один на сторінці.
  4. Переносимо системи аналітики на тестовий сайт і заново налаштовуємо цілі, торгівлю, відвідування 404 та інші необхідні події.
  5. Переносимо мікророзмітки з тестового на новий сайт: локал бізнес, хлібні крихти, product, якщо це необхідно, інші необхідні.
  6. Формуємо XML-карту сайту.
  7. Проводимо Q/A-тестування та виправляємо помилки, що знайдемо.
  8. Якщо змінилися URL, потрібно підготувати список 301 редиректів зі старих URL.
  9. Перевіряємо швидкість завантаження сайту та показники, які на це впливають. Краще спочатку у движку сайта передбачити формат webp для сайту.
  10. Перевіряємо сторінки сайту на наявність дублів та коректність склеювання дзеркал.
  11. Наразі актуальні мультимовні сайти. Тому потрібно перевірити коректну роботу перемикання мови. Обов’язково реалізовуємо атрибути rel=”alternate”.
  12. Перевіряємо наявність внутрішніх редиректів.
  13. Перевіряємо наявність 404 сторінок у коді сайту.

День Х (переїзд). Але тільки не в п’ятницю, не в передсвятковий день!

Перенесення дизайну можна виконувати тільки після того, як сайт перевірили 100 разів і впевнені, що виправили всі помилки. При переїзді завжди є ризики, що може піти щось не так, і це треба буде оперативно виправити.

Тому. Якщо:

  • Завтра п’ятниця, то ви не просите програміста перевозити сайт.
  • Завтра свято, то ваш програміст НЕ перевозить сайт.

Окей? Домовились?

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

План дій такий:

  1. Програміст прив’язує домен до нового сайту.
  2. Відразу відкриває сайт до індексації. Не забуваймо, перевірити robots.txt і прибрати директиву Disallow: /.
  3. Прописуємо 301 редирект зі старих сторінок на нові, якщо формат URL змінився.
  4. Перевіряємо як усе працює. Якщо знаходимо помилки, то швидко керуємося.

Ось що буде, якщо не виконати рекомендації:

Переезд без внедрения рекомендаций

Обговорити ваш досвід переїзду та задати питання можна в коментарях, а допомагаємо тим, хто заповнить заявку.

Вадим Бадюк
Вадим Бадюк
• SEO Client Project Manager (PM) Team Lead
Агенція digital-маркетингу Inweb
Я прийшов в Inweb у 2018 році на позицію Junior SEO PM і рівно за два роки перейшов на позицію Middle. Мені подобається моя робота, тому що кожен день я бачу результати проєктів і команди, розв'язую нестандартні задачі та доношу до клієнтів важливість цих завдань. Приємно брати участь в розвитку бізнесу і досягати в цьому успіхів. Ще трохи фактів про мене: знаю всі імена персонажів з всесвіту Толкієна, люблю ламати й лагодити речі, папуг і машини. У вільний час граю в різні комп'ютерні ігри.
Більше цікавого