הטמעת אתר רב-לשוני i18n עם Laravel ו-React/Vue

הערה: כאשר לקוח החליט להיכנס לשוק הבינלאומי, חנות ה-Laravel הרוסית שלו החלה לאבד מיקומים: Google הציג דפים ברוסית למשתמשים דוברי אנגלית, וכפילויות תוכן הובילו לירידה של 40% בתנועה תוך חודש. היה צורך לשכתב את הארכיטקטורה מאפס — טעות אופיינית כשמתחילים ללא i18n. ניתן להימנע מעלויות כאלה על ידי שילוב בינלאומיות כבר ב-commit הראשון. הניסיון שלנו מראה: הארכיטקטורה הנכונה משתלמת בתוך שלושת החודשים הראשונים. לדוגמה, פרויקט מסחר אלקטרוני למוצרי חשמל ביתיים, לאחר יישום תמיכה רב-לשונית ב-4 שפות, הגדיל את התנועה הבינלאומית ב-70% ושיעור ההמרה הממוצע גדל ב-15% הודות לתיאורי מוצרים מותאמים, והניב הכנסה נוספת של 50,000 דולר לרבעון. לקוח אחר חסך 2,000 דולר על תיקון כפילויות לאחר הגדרת hreflang נכונה.

i18n אינו רק תרגום ממשק. זה ארכיטקטורת URL, אחסון תוכן, סימון SEO, מטמון, פריסה. שגיאה בהתחלה עולה פי 3–5 יותר מאשר יישום נכון מיד. מהנדסים עם ניסיון בתחום פתרו משימות דומות עבור יותר מ-20 פרויקטים של מסחר אלקטרוני ו-SaaS. אנו מבטיחים עבודה נכונה בכל השלבים: מבחירת אסטרטגיית URL ועד פריסה סופית עם מטמון תרגום ב-Redis. לפי התיעוד הרשמי של Laravel, החבילה Astrotomic Translatable מפשטת מאוד מודלים רב-לשוניים.

בחירת אסטרטגיית URL לאתרים רב-לשוניים

קיימות שלוש גישות עיקריות לארגון URLs לאתרים רב-לשוניים:

נתיב (/ru/, /en/) הוא הנפוץ ביותר והפשוט ביותר ליישום. תת-דומיין עדיף לקהלים מופרדים גיאוגרפית. הבחירה תלויה בדרישות הפרויקט, אך נתיב הוא התחלה אופטימלית.

למה hreflang חשוב ל-SEO?

ללא hreflang, מנועי חיפוש עשויים להציג למשתמשים את גרסת השפה הלא נכונה או להתייחס לדפים כאל כפילויות. סימון נכון הוא דרישת חובה ל-SEO רב-לשוני. אנו מייצרים אוטומטית hreflang לכל הדפים בהתבסס על routes ו-locales, כולל x-default. חיסכון בתיקון כפילויות: עד 50%. שימוש לא נכון ב-hreflang עלול להוביל לעונשים ואובדן תקציב של עד 500 דולר לחודש על פרסומות.

ארכיטקטורת Backend

בצד השרת, אנו משתמשים בחבילת 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'];
}

ניתוב עם קידומת locale ו-middleware להגדרת ה-locale:

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 מגדיר את ה-locale מהנתיב, מה-session או מהדפדפן.

Frontend עם 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
    },
  });

קבצי התרגום מאוחסנים ב-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']; } .

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 של שעה כדי להימנע מקריאת JSON בכל בקשה. לתרגום המוני של מוצרים, אנו משתמשים ב-queue של Laravel: שלח עבודת 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'); }); לכל מודל לאחר שמירה. זה מונע חסימת בקשות ומרחיב תרגום למאות אלפי רשומות.

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