Почему ваш Lovable-проект не индексируется в Google (и как это исправить)

TL;DR

При быстрой разработке с помощью AI-инструментов типа Lovable/Bolt/v0 часто страдает SEO, особенно мультиязычность. Классический i18n подход с JSON-файлами несовместим с rapid prototyping. Показываем работающее решение с server-side рендерингом переводов и автоматическими hreflang тегами.

Введение: AI vs SEO Reality Check

Современные AI-инструменты позволяют за выходные собрать рабочий SaaS-продукт, но при этом создают скрытые проблемы с индексацией. Основные pain points:

1. Языковой барьер: Google индексирует контент только на основном языке (обычно английском)
2. i18n overhead: Традиционные решения типа react-i18next требуют ручного управления сотнями translation keys
3. Layout shift: Клиентские переводчики ломают UX из-за FOUT (Flash of Untranslated Text)

# Типичная статистика нового проекта в Search Console
Impressions: 0
Clicks: 0
Indexed pages: 1 (английская версия)

Проблемы классического подхода

Стандартный i18n в React-приложениях выглядит так:

// Локализация по учебнику
import { useTranslation } from 'react-i18next';

function PricingPage() {
  const { t } = useTranslation();
  
  return (
    <div>
      <h1>{t('pricing.title')}</h1>
      <p>{t('pricing.description')}</p>
      {/* 50+ таких элементов на странице */}
    </div>
  );
}

Где собака зарыта:

• При каждом изменении UI нужно синхронизировать N языковых файлов
• AI-инструменты часто ломают структуру translation keys
• Динамический контент (например, из CMS) требует дополнительных костылей

Практическое решение для AI-генерации

Для проектов на Lovable/Bolt/v0 эффективна гибридная схема:

1. Server-side language detection
   Определяем язык из URL или заголовка Accept-Language

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  },
}

2. Статическая генерация страниц
   Next.js автоматически создаст роуты типа /fr/pricing

# Структура выходных файлов
out/
  ├─ en/
  │  ├─ pricing.html
  ├─ fr/
  │  ├─ pricing.html
  ├─ de/
  │  ├─ pricing.html

3. Автоматические hreflang теги
   Критически важно для SEO:

<!-- Генерируется автоматически -->
<link rel="alternate" hreflang="en" href="https://example.com/en/pricing"/>
<link rel="alternate" hreflang="fr" href="https://example.com/fr/pricing"/>
<link rel="alternate" hreflang="x-default" href="https://example.com/pricing"/>

Интеграция с AI-воркфлоу

Для проектов на Lovable работаем через промпт-инжиниринг:

При генерации нового компонента:
1. Создавай текстовые блоки с data-i18n атрибутами
2. Добавляй комментарии для перевода в формате:
   <!-- i18n-key: pricing.title -->
   <h1>Get started today</h1>
3. Не используй динамические ключи типа t(`pricing.${plan}`)

Пример адаптации AI-сгенерированного кода:

// Было (проблемный AI-код)
function Hero() {
  return (
    <div>
      <h1>Build faster with AI</h1>
      <p>Ship products in days</p>
    </div>
  );
}

// Стало (SEO-оптимизированная версия)
function Hero() {
  return (
    <div>
      <!-- i18n-key: hero.title -->
      <h1 data-i18n="hero.title">Build faster with AI</h1>
      <!-- i18n-key: hero.subtitle -->
      <p data-i18n="hero.subtitle">Ship products in days</p>
    </div>
  );
}

Результаты внедрения

После правильной настройки:

Ключевые улучшения:

• В 3 раза больше индексируемого контента
• Рост органического трафика с европейских рынков
• Уменьшение TTFB за счет статической генерации

Когда что выбирать

AI-friendly i18n (наш случай):

• MVP/startup phase
• Ограниченные ресурсы на локализацию
• Проекты с частыми UI-изменениями

Традиционный i18n:

• Enterprise-приложения
• Сложные динамические интерфейсы
• Наличие профессиональных переводчиков

Заключение

AI-инструменты революционизируют rapid prototyping, но требуют адаптации под SEO-реальность. Предложенный подход дает:

• Мультиязычность без ручного управления JSON
• Корректную индексацию всех языковых версий
• Совместимость с AI-воркфлоу

Для indie-разработчиков это game changer — возможность выйти на международные рынки без увеличения бюджета в 10 раз. Главное — не забывать про техническую сторону SEO с самого начала.

Источник: https://dev.to/charlesperret/why-your-lovable-app-isnt-showing-up-in-google-and-how-i-fixed-it-34b4