Впровадження багатомовності (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(); });