В новом туториале от Битрикс24, подготовленном Александром Сербулом, руководителем больших данных, высоконагруженных систем и машинного обучения, показано, как с помощью ИИ-агента Claude Code добавить техническую SEO-оптимизацию в React-приложение. Материал продолжает серию статей для вайбкодеров — людей без технического бэкграунда, которые создают веб-приложения, управляя ИИ-агентом через запросы.
Проект, созданный в предыдущих частях, уже включал сайт, сборку, Git, автотесты, TypeScript и развертывание на сервере Битрикс24. На этом этапе авторы решили подготовить страницы для поисковых роботов. Проблема в том, что содержимое страниц создается JavaScript в браузере, поэтому поисковому роботу сложно получить и обработать его. Решение — добавить пререндеринг и гидратацию, чтобы контент был доступен в исходном HTML.
Пререндеринг — это процесс генерации HTML-кода страницы на сервере или на этапе сборки, а не в браузере. Гидратация — это процесс «оживления» статического HTML, когда JavaScript подключает интерактивность к уже отрендеренным элементам. Вместе они позволяют поисковым системам видеть содержимое страницы без выполнения JavaScript, что улучшает индексацию.
Добавлены пререндеринг и гидратация, чтобы поисковые роботы получали содержимое страниц в исходном HTML.
В туториале подробно разбирается, как формулировать запросы к Claude Code, как агент выполняет задачи и как проверять изменения в исходном коде. Авторы подчеркивают, что сами не программируют — всю работу делает ИИ-агент, а человек контролирует результат. После каждого этапа приводится ответ агента и анализ изменений в коде.
Для повторения проекта потребуются Node.js, Git Bash для Windows, Python (для вспомогательных скриптов) и сервер для деплоя. Авторы используют серверы платформы вайб-кодинга Битрикс24 Вайбкод, для которых нужна платная подписка или собственный сервер. Это важный момент: хотя сам туториал бесплатный, практическое применение требует затрат на инфраструктуру.
Материал также включает словарь терминов: фронтенд, бэкенд, компонент, JavaScript, TypeScript, React, Vite, Tailwind. Это делает статью доступной для новичков, которые впервые сталкиваются с веб-разработкой. Авторы отмечают, что проект учебный, но поэтапно добавляет элементы, присутствующие в реальных рабочих проектах.
В конце туториала рассматриваются дополнительные возможности для улучшения SEO, такие как мета-теги, структурированные данные и другие. Однако авторы честно предупреждают, что нет гарантированных способов поднять сайт в поисковой выдаче — SEO зависит от множества факторов, включая качество контента и внешние ссылки.
Этот туториал полезен не только вайбкодерам, но и всем, кто интересуется практическим применением ИИ-агентов в разработке. Он демонстрирует, как Claude Code может автоматизировать рутинные задачи, такие как SEO-оптимизация, и как важно контролировать результат. Однако стоит помнить, что использование платных серверов и подписок может быть барьером для некоторых читателей.
