Зауважимо: коли клієнт вирішив вийти на міжнародний ринок, його 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.example.com, en.example.com |
Різні сервери або CDN на регіон, висока ізоляція |
| Шлях | example.com/ru/, example.com/en/ |
Один сервер, більшість випадків, простота |
| Окремий домен | example.ru, example.com |
Різні юридичні особи або бренди, але дорожче в підтримці |
Шлях (/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();
});
За рахунок кешування вдалося знизити TTFB на 300 мс і більше, а навантаження на сервер — на 40%.
Як уникнути типових помилок?
Неправильне налаштування hreflang (x-default, мови не збігаються з реальними) веде до штрафів від пошуковиків. Відсутність кешування перекладів — кожен запит читає JSON, що збільшує TTFB на 300 мс і більше. Ігнорування плюралізації та відмінків критичне для слов'янських мов. Змішування контенту та інтерфейсу в одному файлі ускладнює підтримку. Ми проектуємо файли перекладів з розподілом на namespace, що скорочує час пошуку рядка на 30%. 95% усіх помилок SEO-дублів усуваються на етапі проектування.
Процес впровадження
Робота над багатомовністю проходить поетапно:
- Аналітика — визначаємо список мов, регіони, вимоги до SEO.
- Проектування — проектуємо таблиці БД, middleware, маршрути, структуру файлів перекладів.
- Реалізація — налаштовуємо бекенд (Laravel Translatable), фронтенд (i18next), інтеграцію з API перекладу.
- Тестування — перевіряємо перемикання мов, плюралізацію, SEO-теги, відсутність битих посилань.
- Деплой — розгортаємо з кешуванням перекладів (Redis) та налаштованою sitemap.
Отримайте консультацію щодо вашого проекту — уточнимо етапи та терміни.
Що входить в роботу
- Архітектурна документація.
- Доступи до системи керування перекладами.
- Навчання команди роботі з i18n.
- Підтримка протягом місяця після запуску.
Терміни орієнтовно
| Етап | Терміни |
|---|---|
| Базова інфраструктура (маршрути, middleware, Translatable, i18next) | 3–4 дні |
| Переклад інтерфейсу на 4–5 мов + вичитування | 3–5 днів |
| Повний запуск з SEO та sitemap | 1–1.5 тижня |
Вартість розраховується індивідуально після оцінки обсягу робіт. Замовте консультацію інженера щодо вашого проекту — обговоримо деталі та оцінимо обсяг.