Привет! Продолжаем серию статей-туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24.

Видео и статьи записаны и написаны специально для вайбкодеров без технического бэкграунда, которые хотят создавать надёжные веб-приложения. В туториалах мы будем использовать ИИ-агента для работы с приложениями на React — Claude Code.

Сами не программируем — всю работу проводит ИИ-агент, а мы пишем запросы и контролируем результат.

В прошлых статьях мы создали сайт, настроили сборку, добавили Git, автотесты и TypeScript, а затем развернули проект на сервере Битрикс24. Сегодня займёмся технической SEO-оптимизацией: подготовим страницы для поисковых роботов, добавим пререндеринг и гидратацию, а также проверим, какая информация теперь находится в исходном HTML. После каждого этапа разберём ответ агента и проверим изменения в исходном коде страницы.

О чём расскажем и что покажем сегодня

• Что сделаем и о чём расскажем сегодня

  • Что понадобится

  • Некоторые основные термины, которыми мы будем пользоваться

  • На какой стадии проект сейчас и как его повторить

• Что такое SEO

  • Как браузер получает страницу

  • Гидрация

  • Есть ли способы, которые наверняка поднимут сайт в поисковой выдаче

• Добавляем пререндеринг и гидратацию

• Уточняем, что сделал агент

• Исходный код страницы

• Что ещё можно добавить

• Что изменилось в исходном коде

• Что дальше

Что сделаем и о чём расскажем сегодня

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

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

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

Что понадобится

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

Какие программы использует наш проект:

• Node.js для сборки сайта. Скачать можно на официальной странице: nodejs.org.

• Git Bash понадобится пользователям Windows: через него можно запускать команды из статьи. Скачать на официальной странице: git-scm.com/download/win
  На macOS и Linux те же команды выполняются во встроенном терминале.

• Язык программирования Python не нужен для самого сайта, потому что сайт написан на другом языке, TypeScript.
  Но Python полезен при разработке: ИИ-ассистент часто пишет на нём небольшие вспомогательные скрипты и быстро проверяет идеи. Скачать: python.org/downloads.

• Для деплоя в интернете нужен сервер. Мы используем серверы платформы вайб-кодинга Битрикс24 Вайбкод. Для их использования (и для большинства других серверов) нужна платная подписка или собственный сервер.

Это цикл статей о создании фронтенд-проекта на React.

Есть несколько основных терминов и технологий, которые появляются в нашем проекте. Если вам интересно, что это такое, вот краткий словарь-глоссарий:

На какой стадии проект сейчас и как его повторить

Мы работаем с агентом Claude во вкладке Code:

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

Промпт 1. Создаём основу проекта

Создай минимальный пустой сайт на React, Vite и Tailwind CSS. Подключи компоненты shadcn/ui. TypeScript пока не используй — мы добавим его отдельно.

Промпт 2. Добавляем навигацию и форму заявки

Веб-приложение может содержать разные элементы интерфейса. Чтобы лучше понимать, что вообще можно добавить на свой сайт, мы сделали для вас сайт с визуальной библиотекой самых популярных фронтенд-компонентов shadcn/ui. Посмотреть это можно по адресу: app-117900122a91.vibecode.bitrix24.tech/. Выглядит примерно так:

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

Добавь компонент Menubar с разделами «Главная», «О компании» и «Заявка».На странице «Заявка» создай форму с помощью компонента Form. После отправки формы показывай окно Dialog с подтверждением.

Промпт 3. Ваша кастомизация. Превращаем каркас в полноценный сайт

На этом этапе нужно описать тематику проекта, название компании, содержание страниц, язык интерфейса и требования к оформлению. В нашем примере это сайт студии JRPG-игр Tojita-Hon-Games.

Преобразуй текущий проект в сайт японской компании Tojita-Hon-Games, которая занимается разработкой JRPG-игр.Подбери бесплатное изображение для фона. Добавь на главную страницу раздел с сотрудниками компании: для каждого сотрудника укажи имя, должность, возраст и краткую биографию, а также добавь фотографию из бесплатного источника.Подбирай изображения, фон и цвета так, чтобы текст оставался хорошо читаемым. Весь текст на сайте должен быть на русском языке.

Промпт 4. Настраиваем сборку готовой версии сайта

Сборка сайта — это готовая версия проекта, подготовленная для запуска и публикации.

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

Настрой процесс сборки проекта для публикации. После создания сборки запускай её локальный предпросмотр в браузере.

Промпт 5. Создаём документацию проекта

Команда ниже создаёт файл CLAUDE.md с основными сведениями о проекте. Ассистент сможет использовать его в следующих сессиях, чтобы учитывать структуру проекта, команды запуска и принятые правила работы.

/init

Промпт 6. Готовимся к деплою в режиме чтения

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

Будем разворачивать статический сайт на платформу Битрикс24 Вайбкод. Изучи процесс по документации https://vibecode.bitrix24.tech/v1/me и по дополнительной инструкции https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy.Ключ для чтения: vibe_api_ВАШ_КЛЮЧСкопируй папку deploy из этого репозитория в проект, задай имя приложения <имя-проекта> и выбери самый дешёвый тариф сервера, которого достаточно для статики. Сам деплой пока не запускай.

Промпт 7. Деплой и публикация

После предыдущего промпта стоит проверить тариф, который выбрал агент. Потом можно давать команду к деплою:

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

Промпт 8. После следующих правок — обновление опубликованного сайта 

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

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

Промпт 9. Создаём репозиторий и первый коммит

Подключи Git к проекту, проверь .gitignore и создай первый коммит.

После следующих изменений используем один и тот же запрос для добавления коммитов:

Сохрани текущие изменения отдельным коммитом.

Промпт 10. Проверяем историю версий

Покажи историю коммитов.

Промпт 11. Отправляем проект на GitHub

Сначала нужно зарегистрироваться на GitHub и создать там пустой репозиторий — как это сделать, мы описали в предыдущей статье. Затем нужно скопировать адрес репозитория и передать агенту:

Подключи проект к этому репозиторию и отправь туда все коммиты:<ссылка на репозиторий>

Промпт 12. Готовимся к деплою в Галактику

Скопируй в проект скрипт deploy-galaxy.sh из папки deploy:

https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy

Изучи инструкцию и подготовь проект к размещению статического сайта в Галактике Битрикс24 Вайбкод. Сам деплой пока не запускай.

Промпт 13. Деплоим приложение в Галактику

Поменяй имя приложения на <имя-проекта>-galaxy-v1 и разверни сайт в Галактике.Перед платными и публикующими действиями запроси подтверждение. После завершения проверь результат и выведи адрес опубликованного сайта.

Промпт 14. Добавляем автотесты

Настрой браузерные автотесты для всех страниц и основных функций сайта. Тесты должны проверять загрузку страниц, навигацию, формы, кнопки и другие интерактивные элементы. Добавь команду для запуска всех тестов и запиши в CLAUDE.md правило: перед коммитом и деплоем запускать линтер и полную проверку тестов. Исправь найденные ошибки и сообщи результат.

Промпт 15. Переходим на TypeScript

Поэтапно переведи весь проект с JavaScript на TypeScript, сохранив текущее поведение сайта. Настрой проверку типов и добавь команду npm run typecheck. После миграции запусти проверку типов, линтер, сборку и все браузерные тесты. Исправь найденные ошибки и сообщи результат.

После новых правок — обновление опубликованного сайта

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

Что такое SEO

SEO, или поисковая оптимизация, — это подготовка сайта к работе с поисковыми системами. Она помогает Яндексу, Google и другим поисковикам найти страницы сайта, понять их содержание и показать подходящим пользователям в результатах поиска.

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

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

Как браузер получает страницу

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

HTML можно подготовить несколькими способами:

• CSR или Client-Side Rendering — рендеринг на стороне клиента, то есть браузера пользователя.
  Именно так сейчас работает наш React-сайт. Человеку приходится ждать выполнения JavaScript, прежде чем он увидит страницу целиком. 

• SSR или Server-Side Rendering — рендеринг на стороне сервера.
  Когда пользователь или поисковый робот открывает адрес, сервер собирает для него готовый HTML и отправляет в браузер. В этом варианте основное содержимое страницы можно увидеть сразу, ещё до выполнения JavaScript.

• SSG или Static Site Generation — генерация статического сайта. Такой способ также называют статическим рендерингом или пререндерингом.
  Во время сборки проекта специальный инструмент заранее создаёт отдельный HTML-файл для каждой страницы. После деплоя эти файлы уже лежат на сервере в готовом виде. Когда на сайт заходит человек или поисковый робот, сервер сразу отдаёт нужный HTML.

Последний вариант хорошо подходит нашему проекту: содержимое сайта одинаково для всех посетителей и меняется только тогда, когда мы редактируем проект и публикуем новую сборку. Готовые страницы быстро загружаются, не требуют сборки HTML при каждом запросе и удобны для индексации поисковыми системами.

Гидрация

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

Следующий шаг — загружается JavaScript и подключает к готовому HTML нужное поведение. Этот процесс называется гидрацией. Упрощённо можно сказать, что JavaScript оживляет уже показанную страницу, то есть делает её интерактивной.

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

Есть ли способы, которые наверняка поднимут сайт в поисковой выдаче

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

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

Добавляем пререндеринг и гидратацию

Попросим Claude сделать первые шаги к SEO-оптимизации:

Что должен сделать агент:

1. Объяснить, что такое SSG.

2. Выбрать подходящий способ пререндеринга для проекта.

3. Настроить создание готового HTML для каждой страницы во время сборки.

4. Сохранить работу интерактивных элементов — таких как кнопки и меню.

5. Запустить сборку и проверить, что в HTML действительно есть текст страницы.

Сначала смотрим на результат, потом разбираем:

Сейчас Claude настроил статическую генерацию сайта. Теперь во время сборки React заранее создаёт 6 готовых HTML-страниц с текстом и заголовками. Благодаря этому поисковые роботы могут прочитать содержимое сайта сразу, без запуска JavaScript.

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

• sitemap.xml — список страниц сайта для поисковых систем. Он помогает роботам быстрее найти все доступные страницы и понять структуру сайта.

• robots.txt — файл с инструкциями для поисковых роботов. В нём можно указать, какие разделы сайта разрешено индексировать, какие лучше пропустить и где находится sitemap.xml.

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

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

Уточняем, что сделал агент

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

Например, после нашего последнего запроса и действий агента можно спросить:

Ответ агента:

Агент использовал встроенные инструменты React и Vite, а для управления процессом написал небольшой собственный скрипт. Дополнительные библиотеки для SSG не устанавливал.

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

Готовые средства React выполняют сам рендеринг и гидратацию, а собственный код связывает этапы и создает отдельный HTML-файл для каждой страницы. Агент выбрал этот способ, потому что подключение SSG-фреймворка потребовало бы переработать навигацию.

Исходный код страницы

Щёлкните по странице правой кнопкой мыши и выберите пункт «Показать исходный код страницы».

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

До нашей оптимизации исходный код страницы выглядел примерно так:

А теперь код выглядит так:

Обратите внимание на строку 37. Раньше там было пусто и выглядело так:

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

Теперь эта строка выросла с 25 символов до 25 922. Это вся видимая страница, записанная текстом. Если развернуть её начало, там по порядку идёт то же, что мы видим глазами:

Чем это помогает поисковику: робот заходит на сайт и просто скачивает файл. Некоторые поисковые роботы не выполняют JavaScript, а Google может обработать его позднее, на отдельном этапе. Поэтому готовый HTML помогает роботам быстрее и надёжнее получить основное содержимое страницы. Раньше робот видел пустой <div> и уходил ни с чем: слов нет — индексировать нечего, по запросу студия JRPG сайт не найти.

Теперь слова лежат прямо в скачанном файле. Робот сразу видит: заголовок «О студии», текст про студию, 2011 год, Киото, вопросы-ответы. Есть что положить в индекс и с чем сопоставлять запросы.

А вот ещё два плюса:

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

2. Человек видит страницу мгновенно, не дожидаясь загрузки скрипта.

Что ещё можно добавить

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

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

• Open Graph-теги задают заголовок, описание и изображение для красивого превью ссылки в мессенджерах и социальных сетях.

• Русский язык страницы помогает браузерам и поисковым системам правильно обрабатывать русскоязычный текст.

• sitemap.xml должен содержать список страниц сайта, чтобы помогать поисковым роботам их найти.

• В robots.txt нужны правила обхода сайта для роботов и указания на путь к карте сайта.

• Канонический адрес показывает основной URL страницы, чтобы поисковик не считал разные варианты одного адреса отдельными копиями.

Составляем запрос:

Отправляем агенту и ждём выполнения:

Агент проверил SEO-настройки и выяснил, что большая часть уже была готова: у всех страниц есть уникальные заголовки и описания, канонические адреса, русский язык и карта сайта.

Что ещё добавлено:

1. Изображение для превью ссылок в мессенджерах и социальных сетях.

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

3. Тесты, которые проверяют SEO-настройки на всех страницах.

! Осталась одна особенность платформы: Битрикс24 Вайбкод самостоятельно подменяет robots.txt и запрещает поисковым системам индексировать сайт. Код проекта настроен правильно, но на этом хостинге изменить запрет нельзя. На обычном хостинге созданный агентом robots.txt будет работать.

Это означает, что сайт работает и доступен пользователям по прямой ссылке, но Яндекс и Google не должны добавлять его страницы в результаты поиска. Причина в том, что Битрикс24 Вайбкод предназначен прежде всего для разработки, проверки и демонстрации проектов, а не для размещения полноценных публичных сайтов.

Что изменилось в исходном коде

После последних действий Claude в раздел <head> добавились данные для превью ссылки:

• og:image — адрес изображения.

• Размеры и описание изображения.

• twitter:title, twitter:description и twitter:image.

Теперь мессенджеры и социальные сети могут сформировать карточку с заголовком, описанием и картинкой. Остальные основные SEO-настройки уже присутствовали раньше.

Что дальше

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

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