Впровадження багатомовності (i18n) сайту під ключ

Зауважимо: коли клієнт вирішив вийти на міжнародний ринок, його Laravel-магазин російською почав втрачати позиції: Google показував англійським користувачам російські сторінки, а дублі контенту призвели до падіння трафіку на 40% за місяць. Переписувати архітектуру довелося з нуля — типова помилка при старті без i18n. Таких витрат можна уникнути, якщо закласти інтернаціоналізацію з першого коміту. Наш досвід показує: правильна архітектура окупається в перші три місяці. Наприклад, один із проектів інтернет-магазину побутової техніки після впровадження багатомовності на 4 мови збільшив міжнародний трафік на 70%, а середня конверсія зросла на 15% за рахунок адаптованих описів товарів, що принесло додатковий виторг у $50,000 за квартал. Ще один клієнт заощадив $2,000 на виправленні дублів після правильного налаштування hreflang.

i18n — це не просто переклад інтерфейсу. Це архітектура URL, зберігання контенту, SEO-розмітка, кешування, деплой. Помилка на старті обходиться в 3–5 разів дорожче, ніж правильна реалізація одразу. Інженери з профільним досвідом вирішували подібні задачі для 20+ проектів e-commerce та SaaS. Гарантуємо коректну роботу на всіх етапах: від вибору стратегії URL до фінального деплою з кешуванням перекладів у Redis.

Вибір стратегії URL для багатомовності

Існує три основні підходи до організації URL багатомовного сайту:

Шлях (/ru/, /en/) — найпоширеніший і простий у реалізації. Піддомен кращий для географічно розділених аудиторій. Вибір залежить від вимог проекту, але шлях — оптимальний старт.

Чому hreflang важливий для SEO?

Без hreflang пошуковики можуть показати користувачеві неправильну мовну версію або вважати сторінки дублікатами. Правильна розмітка — обов'язкова вимога для багатомовного SEO. Ми автоматично генеруємо hreflang для всіх сторінок на основі маршрутів та локалей, включаючи x-default. Економія бюджету на виправлення дублів — до 50%. Неправильне використання hreflang може призвести до штрафів та втрати бюджету до $500 на місяць на рекламі.

Архітектура бекенду

На бекенді використовуємо пакет Astrotomic Translatable для Eloquent. Приклад моделі:

use Astrotomic\Translatable\Contracts\Translatable as TranslatableContract;
use Astrotomic\Translatable\Translatable;

class Product extends Model implements TranslatableContract
{
    use Translatable;

    public array $translatedAttributes = ['title', 'description', 'slug'];

    protected $fillable = ['price', 'sku', 'is_active'];
}

Маршрутизація з префіксом локалі та middleware для встановлення локалі:

Route::prefix('{locale}')
    ->where(['locale' => 'ru|en|de|fr|uk'])
    ->middleware('setLocale')
    ->group(function () {
        Route::get('/', [HomeController::class, 'index'])->name('home');
        Route::get('/catalog', [CatalogController::class, 'index'])->name('catalog');
        Route::get('/catalog/{slug}', [ProductController::class, 'show'])->name('product');
    });

Middleware SetLocale встановлює локаль з маршруту, сесії або браузера.

Фронтенд з i18next

На фронтенді використовуємо i18next з react-i18next. Для Vue-додатків використовується vue-i18n з аналогічною архітектурою. Конфігурація:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'ru',
    supportedLngs: ['ru', 'en', 'de', 'fr', 'uk'],
    ns: ['common', 'catalog', 'checkout'],
    defaultNS: 'common',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    detection: {
      order: ['path', 'cookie', 'localStorage', 'navigator'],
      lookupFromPathIndex: 0
    },
    interpolation: {
      escapeValue: false
    },
  });

Файли перекладів лежать у public/locales/{lng}/{ns}.json.

SEO для багатомовних сайтів

Генеруємо hreflang теги для кожної сторінки:

function hreflangTags(string $routeName, array $params = []): string {
    $locales = ['ru', 'en', 'de', 'fr', 'uk'];
    $tags = '';
    foreach ($locales as $locale) {
        $url = route($routeName, array_merge($params, ['locale' => $locale]));
        $tags .= "<link rel=\"alternate\" hreflang=\"{$locale}\" href=\"{$url}\" />\n";
    }
    $defaultUrl = route($routeName, array_merge($params, ['locale' => 'ru']));
    $tags .= "<link rel=\"alternate\" hreflang=\"x-default\" href=\"{$defaultUrl}\" />\n";
    return $tags;
}

Включаємо альтернативи в sitemap.xml.

Як автоматизувати переклад контенту?

Первинний переклад через Google Translate API:

$results = (new TranslateClient(['key' => $key]))->translateBatch($texts, [
    'source' => 'ru',
    'target' => $targetLang,
    'format' => 'html',
]);

Потім ручне вичитування. Файли перекладів кешуємо в Redis з TTL 1 година, щоб не читати JSON при кожному запиті. Для масового перекладу товарів використовуємо чергу в Laravel: диспатчимо завдання ProcessTranslation для кожної моделі після збереження. Це дозволяє не блокувати запити та масштабувати переклад на сотні тисяч записів.

// Cache translations for 1 hour
Cache::remember('translations.' . $locale, 3600, function () use ($locale) {
    return Translation::where('locale', $locale)->get();
});