سئوی چندزبانه در Next.js؛ آنچه next-intl حل می‌کند و آنچه باید خودت بسازی

سایت این پروژه سه زبان دارد: فارسی، انگلیسی و آلمانی. راه‌اندازی خودِ ترجمه یک بعدازظهر طول کشید. رساندن گوگل به این درک که این سه، نسخه‌های یک صفحه‌اند و نه سه صفحه‌ی تکراری، چند هفته طول کشید. این نوشته درباره‌ی بخش دوم است.

سه گزینه داری: دامنه‌ی جداگانه برای هر زبان، ساب‌دامین، یا پیشوند مسیر مثل ‎/fa و ‎/en. برای یک محصول یا نمونه‌کار، پیشوند مسیر تقریباً همیشه انتخاب درست است: اعتبار دامنه بین زبان‌ها تقسیم نمی‌شود و هزینه‌ی نگهداری‌اش صفر است. مهم‌تر از انتخاب، تغییر ندادن آن است؛ عوض کردن ساختار بعد از ایندکس شدن یعنی ماه‌ها ریدایرکت و نوسان رتبه.

hreflang به گوگل می‌گوید این صفحات ترجمه‌ی یکدیگرند. سه قانونش را باید همزمان رعایت کرد: هر صفحه باید به همه‌ی نسخه‌ها از جمله خودش اشاره کند، ارجاع‌ها باید دوطرفه باشند، و یک x-default هم لازم است تا مشخص شود کاربری با زبان نامشخص کجا برود. در App Router همه‌ی این‌ها از generateMetadata می‌آید.

export async function generateMetadata({ params }) {
  const { locale } = await params;
  return {
    alternates: {
      canonical: `https://example.com/${locale}`,
      languages: {
        fa: "https://example.com/fa",
        en: "https://example.com/en",
        de: "https://example.com/de",
        "x-default": "https://example.com/en",
      },
    },
  };
}

این رایج‌ترین خطایی است که دیده‌ام: همه‌ی نسخه‌ها canonical را روی نسخه‌ی انگلیسی می‌گذارند. نتیجه‌اش این است که گوگل نسخه‌ی فارسی را از ایندکس حذف می‌کند، چون خودِ سایت اعلام کرده نسخه‌ی اصلی جای دیگری است. canonical هر صفحه باید همان صفحه باشد؛ رابطه‌ی بین زبان‌ها فقط با hreflang بیان می‌شود.

دومین خطای رایج، نسخه‌ی www و بدون www است. اگر هر دو پاسخ بدهند، هر صفحه دو آدرس دارد و سرچ کنسول این را به‌عنوان «صفحه‌ی تکراری با canonical متفاوت» گزارش می‌کند. یک ریدایرکت ۳۰۱ در میان‌افزار، ماجرا را تمام می‌کند.

نقشه‌ی سایت باید هر سه نسخه را جداگانه فهرست کند و برای هر ورودی، ارجاع‌های زبانی را هم داشته باشد. در Next.js تابع sitemap با فیلد alternates دقیقاً همین را تولید می‌کند و نیازی به تولید دستی XML نیست.

export default function sitemap() {
  const locales = ["fa", "en", "de"];
  return locales.map((locale) => ({
    url: `https://example.com/${locale}`,
    alternates: {
      languages: Object.fromEntries(
        locales.map((l) => [l, `https://example.com/${l}`])
      ),
    },
  }));
}

ترجمه‌ی ماشینی صفحه‌ها را چندزبانه نمی‌کند. کسی که فارسی جست‌وجو می‌کند، عبارت دیگری تایپ می‌کند تا کسی که انگلیسی جست‌وجو می‌کند — حتی وقتی دنبال یک چیزند. عنوان و توضیحات هر زبان را باید بر اساس کلمات همان بازار نوشت، نه ترجمه‌ی کلمه‌به‌کلمه‌ی نسخه‌ی اصلی. hreflang درست به گوگل می‌گوید این صفحه برای چه زبانی است؛ محتوای درست است که تعیین می‌کند اصلاً پیدا شود یا نه.