Редизайн сайту з Claude Code: як переробити старий сайт і не втратити SEO

Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні. Сайт uxhero.design, на якому ти це читаєш, я зібрав і веду сам з Claude: чистий HTML, один спільний CSS, деплой на Cloudflare. І не раз переробляв його частини, поки він продавав курси.

Майже всі статті про сайти в цьому блозі досі були про збірку з нуля: пайплайн сайту з AI, лендинг за вечір, портфоліо. Редизайн - інша задача. Тут є що втрачати: сторінки, які вже в пошуку, форма, з якої йдуть заявки, аналітика за кілька років. Claude про все це не знає, поки ти йому не скажеш.

Редизайн чи новий сайт з нуля: як вирішити?

Перше питання просте: що старий сайт приносить зараз? Відкрий Search Console і подивись кліки за останні три місяці.

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

Крок 1. Як зробити аудит старого сайту з Claude?

Перед редизайном я прошу Claude Code нічого не міняти, а тільки прочитати старий сайт. Це працює і для сайту на конструкторі: Claude забирає HTML сторінок за адресою, доступ до адмінки не потрібен.

Ось старий сайт: https://old-site.com
Нічого не змінюй, тільки читай.
1. Візьми /sitemap.xml і склади список усіх сторінок.
2. Для кожної збери: URL, title, description, H1, canonical,
   форми (куди відправляють), скрипти аналітики і пікселі.
3. Збережи це в audit.csv.
4. Окремо напиши, що може зламатись при переїзді.

Якщо сторінка віддає майже порожній HTML (так буває з конструкторами, які малюють сайт скриптами), скажи про це Claude: тоді йому потрібен браузер, а не простий запит.

Другий файл бери з Search Console: звіт «Ефективність», вкладка «Сторінки», період три місяці, експорт. Це список сторінок, які реально приводять людей з пошуку. Покажи обидва файли Claude і попроси позначити в audit.csv сторінки з трафіком. Тепер у тебе є список того, що не можна зламати.

Крок 2. Як задати новий стиль, щоб не вийшов generic-шаблон?

Без стилю Claude зробить «сучасний сайт»: той самий градієнт і ті самі картки, що й у тисяч інших. Для редизайну це подвійно сумно. Стара версія хоча б була твоєю.

Стиль живе в Skills-файлі. У Claude Code це файл SKILL.md у папці скіла, наприклад .claude/skills/site-style/. Що туди писати для сайту загалом, я розбирав у статті про пайплайн сайту з AI, а приклад для особистого сайту є в матеріалі про портфоліо з Claude за вечір. Для редизайну додай блок, якого при збірці з нуля нема:

---
name: site-style
description: Стиль нового сайту і правила редизайну. Використовуй у кожній задачі з версткою сторінок.
---
## Новий вигляд
- Шрифт, шкала розмірів, сітка, відступи кратні 8
- Кольори токенами з ролями: --bg, --text, --accent
- Заборони: градієнти на тексті, тіні на картках

## Що не чіпаємо
- Тексти, заголовки і порядок блоків
- URL, title, description, canonical
- Форми, скрипти аналітики, пікселі
- alt у картинок

Другий блок важливіший за перший. Claude дуже старанний: попросиш «оновити hero», і він заодно «покращить» заголовок, який два роки збирав кліки з пошуку. Тому правило «зміст і URL не чіпаємо» я ще й дублюю одним рядком у CLAUDE.md, щоб воно діяло в кожній сесії.

Крок 3. Як робити новий сайт, поки старий продає?

Найгірший редизайн той, що робиться прямо на живому сайті. Тиждень сайт виглядає як ремонт у під'їзді, а форма то працює, то ні. Тому новий сайт живе окремо:

• Старий сайт уже в git. Claude створює гілку redesign. На Cloudflare Pages, підключеному до репозиторію, кожна гілка отримує свою preview-адресу, а продакшн далі віддає стару версію.
• Старий сайт на конструкторі. Новий проєкт деплоїться на тимчасову адресу на кшталт project.pages.dev, а домен лишається на старому сайті до дня релізу.

Так ми робили з лендингами курсів UX Hero у вересні. Нові версії жили на адресах з -new, поки старі продавали. У день запуску нова версія стала на основну адресу, а тимчасові -new отримали 301 на неї. Ці рядки досі лежать у нашому _redirects.

Одна пастка: прев'ю не має потрапити в пошук. Попроси Claude перевірити заголовки прев'ю командою curl -I і додати noindex, якщо його нема. Як влаштовані гілки і прев'ю на Cloudflare, покроково є в статті про деплой на Cloudflare Pages з Claude Code.

Крок 4. Як переносити сторінки, щоб нічого не загубити?

Спершу одна сторінка-еталон, зазвичай головна. Доводиш її до ладу, виносиш спільні стилі в один CSS, і далі кожна сторінка робиться за зразком. Решту переносиш у порядку трафіку з audit.csv: найважливіші сторінки отримують увагу, поки ти ще свіжий.

Переверстай /services у стилі зі скіла site-style,
за зразком еталонної головної.
Збережи зміст і URL, міняй тільки вигляд:
- тексти, заголовки, порядок блоків і посилання як є;
- title, description, canonical, H1 і alt без змін;
- форму і скрипти аналітики перенеси як були.
Після правки порівняй текст старої і нової сторінки
і покажи, що зникло або змінилось.

Останній рядок мій улюблений. Claude витягує текст обох версій і показує різницю. Час від часу там знаходиться абзац, який «випадково» не переїхав. Краще знайти його зараз, ніж після того, як сторінка випаде з пошуку.

І ще. Тексти дуже хочеться переписати разом з дизайном. Не роби цього. Якщо після релізу трафік просяде, ти не знатимеш, що винне: новий вигляд чи новий текст. Спершу переїзд, тексти окремим релізом через пару тижнів.

Крок 5. Яке SEO ламається при редизайні і як його вберегти?

Пошуковик не бачить твій новий дизайн. Він бачить адреси, теги і посилання. Ось що ламається найчастіше:

• URL. Ідеально, коли всі адреси лишились як були. Якщо адреса змінилась, потрібен 301-редирект зі старої на нову. Напряму, без ланцюжків «стара, проміжна, нова».
• title і description. Переносимо як є. Покращувати будемо потім, окремо.
• canonical. Повна адреса фінального домену на кожній сторінці. Класичний баг: canonical показує на прев'ю або на старий домен, і ти сам кажеш Google, що справжня сторінка деінде.
• sitemap.xml. Новий, тільки з фінальними адресами, без тих, що редиректять.
• robots.txt і noindex. Перевір, що з прев'ю на продакшн не переїхав Disallow: / чи meta robots з noindex.
• alt у картинок. При переверстці alt легко загубити. Попроси Claude знайти всі картинки з порожнім alt.
• Швидкість. Новий дизайн любить відео на фоні й анімації. Прожени головні сторінки через PageSpeed Insights на мобільному до і після. Нова версія повільніша - спершу стискаємо медіа, потім релізимо.

Редиректи на Cloudflare задаються одним файлом _redirects у корені сайту. Попроси Claude згенерувати його з audit.csv, а не писати руками:

# _redirects: стара адреса, нова адреса, код
/about-us          /about             301
/uslugy/*          /services/:splat   301
/blog/post.html    /blog/post         301

Код саме 301, постійний. 302 означає «тимчасово», тобто пошуковик чекає, що стара адреса повернеться. І пиши код явно: якщо його не вказати, Cloudflare поставить 302. Google у документації про переїзд сайту радить тримати редиректи якомога довше, загалом щонайменше рік.

На uxhero.design кожен pull request проходить автоматичну перевірку: биті посилання, відсутні файли, title, description і canonical на місці. Таку перевірку Claude пише за один запит, і на редизайні вона окупається з першого релізу.

Крок 6. Що перевірити у формах, аналітиці й пікселях до релізу?

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

• Кожна форма відправлена з нового сайту хоча б раз, і заявка дійшла туди, куди треба: пошта, CRM, Telegram.
• Форми з конструктора працюють на його сервері. Коли переїжджаєш на свій код, вони не їдуть разом з версткою. Потрібен свій сервіс форм, наприклад Tally, і нова перевірка.
• Сторінка «Дякуємо» на тій самій адресі, якщо на неї налаштовані конверсії в GA4 чи рекламному кабінеті.
• GA4 з тим самим ідентифікатором G-XXXXXXX. Новий ресурс в Analytics означає, що історія почнеться з нуля.
• Події на кнопках. У нас кнопка реєстрації на ефір шле generate_lead у GA4 і Lead у Meta Pixel. Перепише Claude кнопку - подія зникне тихо, без жодної помилки.
• Усі пікселі й теги зі старого сайту: Meta Pixel, Microsoft Clarity, Google Ads, що там у тебе стоїть.
• Favicon, OG-картинка для прев'ю в соцмережах і сторінка 404.

Промпт на весь блок один: «порівняй скрипти і форми кожної нової сторінки з audit.csv і покажи розбіжності».

Крок 7. Що робити в день релізу і перший тиждень після?

1. Реліз. Злий гілку redesign у main або переключи домен на новий проєкт.
2. Прожени старі адреси. Промпт нижче. Кожна стара адреса має віддати сторінку або один 301 на правильну.
3. Відправ новий sitemap.xml у Search Console, у розділі «Файли Sitemap».
4. Попроси індексацію головних сторінок через «Перевірку URL-адреси».
5. Якщо змінився домен, старий домен цілком редиректиш на новий і запускаєш у Search Console інструмент «Зміна адреси».

Візьми всі старі адреси з audit.csv і перевір їх на новому сайті.
Покажи таблицю: адреса | код відповіді | куди веде.
Окремо: усі 404 і всі ланцюжки з кількох редиректів.

Перший тиждень я щодня дивлюсь у Search Console звіт «Сторінки» (чи нема нових 404) і покази у звіті «Ефективність». Невеликі коливання в перші тижні нормальні, Google прямо пише про це в документації про переїзд сайту. Тривожний сигнал інший: конкретна сторінка з audit.csv різко втратила покази. Тоді перевіряю її адресу, редирект і текст.

У нас на uxhero.design була така історія з адресами /courses/.... Воркбуки курсів живуть на окремій платформі для студентів, а на основному домені ці адреси віддавали 404. Кілька рядків у _redirects, і люди з цих посилань тепер потрапляють на лендинги курсів, а не в порожнечу.

Які помилки при редизайні з AI найдорожчі?

• Змінити всі URL, бо так красивіше. Адреса /poslugy-dyzainu-2019 виглядає негарно. Але якщо вона в топі пошуку, хай живе. Позиції дорожчі за красиву адресу.
• Попросити «зроби редизайн сайту» одним промптом. Claude перепише все за раз, і ти вже не скажеш, що він змінив по дорозі. Сторінка за сторінкою, з порівнянням тексту після кожної, довше на вечір, зате спокійніше на місяць.
• Загубити форму заявок. Найтихіша помилка. Сайт працює, помилок нема, просто ніхто не пише.
• Лишити старий домен без редиректів. Переїхав на новий домен, старий вимкнув, і всі посилання з інших сайтів, закладки і позиції ведуть у нікуди.

Де подивитись редизайн з Claude Code наживо?

У четвер 22 жовтня о 19:00 за Києвом безкоштовний ефір #4 «Редизайн сайту і в прод за 1 годину». Показую цей шлях руками на екрані, без слайдів: від старого сайту до нової версії в продакшні. Реєстрація в Telegram-боті @uxhero_bot: бот нагадає за годину і за 15 хвилин до старту, а після ефіру надішле запис і бонус. Читаєш це пізніше - запис уже на YouTube-каналі UX Hero.

Якщо хочеш пройти весь шлях від сетапу Claude до сайту в проді з формами й аналітикою, це курс «Сайти з AI». Там є окремий бонус-модуль «Редизайн існуючого сайту», якраз для випадку, коли старий сайт уже є і його треба переробити, а не зібрати з нуля.

Часті питання

Скільки часу займає редизайн сайту з AI?

Невеликий сайт на 5-10 сторінок реально перенести за 2-3 вечори, якщо аудит і Skills-файл зі стилем готові до старту. Лендинг переноситься за вечір. Найбільше часу йде на перевірки: редиректи, форми, аналітика. Після релізу заклади ще тиждень на спостереження в Search Console.

Чи просяде SEO після редизайну сайту?

Не обов'язково. Якщо адреси, title, description, canonical і тексти лишились, а змінені URL мають 301-редиректи, пошуковик бачить ту саму сторінку в новому вигляді. Невеликі коливання в перші тижні можливі, Google пише про це в документації про переїзд сайту. Серйозне просідання майже завжди має конкретну причину: змінений URL без редиректу, загублений текст або noindex, що переїхав з прев'ю.

Чи варто переїжджати з конструктора на свій код?

Варто, якщо сайт для тебе робочий інструмент: ти хочеш правити його з Claude Code, тримати код у своєму репозиторії і не залежати від платформи. Не варто, якщо сайт роками ніхто не чіпає і він усе влаштовує. При переїзді з конструктора головні ризики - форми, які працювали на його сервері, і адреси сторінок: їх треба зберегти або закрити 301-редиректами.

Що таке 301-редирект і навіщо він при редизайні?

301 - це постійне перенаправлення зі старої адреси на нову. Людина зі старим посиланням потрапляє на нову сторінку, а пошуковик переносить на неї сигнали старої. На Cloudflare редиректи задаються одним файлом _redirects у корені сайту, і Claude Code може згенерувати його зі списку старих адрес. Google радить тримати редиректи щонайменше рік.

Чи можна зробити редизайн, не зупиняючи старий сайт?

Так, і саме так це й варто робити. Новий сайт живе в окремій гілці або на тимчасовій адресі з прев'ю, закритою від індексації, а старий працює до дня релізу. Сам реліз - це злиття гілки в main або переключення домену на новий проєкт.

---

Редизайн з AI швидкий. Небезпечний він тим самим: за вечір можна переробити все, включно з тим, що не треба було чіпати. Тому правило одне: зміст і адреси переносимо, вигляд міняємо. Решту робить Claude, перевіряєш ти.