Ошибка SEO: ключи i18n в заголовке Google при пререндере Vue

Владельцы сайтов на Vue.js нередко сталкиваются с ситуацией, когда в результатах поиска Google отображаются технические ключи интернационализации (i18n) вместо корректных переведённых заголовков. При этом в описании страницы выводится сообщение об ошибке загрузки, хотя сам сайт работает исправно. Данная проблема характерна именно для Google - в Яндексе или DuckDuckGo всё отображается корректно. Рассмотрим причины и способы решения.

Почему Google видит ключи i18n?

Основная причина - неправильная работа пререндера (prerender-spa-plugin) с библиотеками перевода, такими как es2015-i18n-tag. Googlebot при индексации запрашивает статический HTML, сгенерированный пререндером. Если пререндер завершается до того, как i18n-библиотека подгрузит и применит переводы, в финальный HTML попадают сырые ключи (например, header.title), а не переведённые строки.

Как исправить отображение заголовков и описаний

1. Настройка времени ожидания пререндера

Убедитесь, что событие render-event (или другое, указанное в renderAfterDocumentEvent) срабатывает только после полной загрузки всех переводов. Вместо setTimeout используйте явный вызов события из кода приложения после инициализации i18n:

// В корневом компоненте Vue
mounted() {
  this.$nextTick(() => {
    document.dispatchEvent(new Event('render-event'));
  });
}

2. Использование renderAfterTime

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

renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
  headless: true,
  renderAfterTime: 5000, // 5 секунд
  // ... остальные опции
})

3. Проверка конфигурации Puppeteer

Убедитесь, что navigationOptions.timeout не равен 0 (как в вашем примере). Лучше установить разумный лимит, например 30000 (30 секунд):

navigationOptions: {
  timeout: 30000,
}

Почему проблема проявляется только в Google?

Googlebot использует более старую версию Chromium для рендеринга, которая может хуже справляться с асинхронной загрузкой переводов. Яндекс и DuckDuckGo (через Bing) могут применять иные механизмы индексации, которые дожидаются полной отрисовки страницы. Это объясняет, почему в других поисковиках заголовки корректны.

Дополнительные рекомендации

• Логирование пререндера: включите подробные логи Puppeteer, чтобы увидеть, на каком этапе происходит сбой.
• Тестирование отдельных страниц: проверьте, все ли страницы имеют проблему. Часто ошибка возникает только на тех, где переводы загружаются динамически (например, через API).
• Альтернативные решения: рассмотрите переход на @nuxtjs/i18n (если используете Nuxt) или серверный рендеринг (SSR) вместо пререндера.

Заключение

Ключи i18n в заголовках Google - частая ошибка при пререндеринге Vue-приложений. Решение заключается в синхронизации времени генерации статического HTML с моментом полной загрузки переводов. Настройте событие renderAfterDocumentEvent или добавьте задержку renderAfterTime. После внесения изменений повторно отправьте страницы в Google Search Console для переиндексации.