كيفية ربط إصدارات اللغات البديلة في Next.js (موجه الصفحات) الإصدار 16

المشكلة

عندما يقدم موقع إلكتروني نفس المحتوى بلغات متعددة، تواجه محركات البحث عناوين URL منفصلة لكل نسخة دون فهم العلاقة بينها. قد يرى المستخدم الفرنسي نتائج البحث التي تُظهر النسخة الإنجليزية بترتيب أعلى من النسخة الفرنسية، على الرغم من وجود كليهما. وبالمثل، قد يتم التعامل مع الصفحة الإنجليزية وترجمتها الفرنسية كنسخ متكررة متنافسة بدلاً من بدائل منسقة. بدون إشارات صريحة تربط بين إصدارات اللغات هذه، لا يمكن لمحركات البحث تقديم النسخة الأكثر ملاءمة للمستخدمين بناءً على تفضيلات لغتهم بثقة، مما يؤدي إلى تجزئة سلطة الترتيب وتجربة مستخدم سيئة.

الحل

أضف عناصر الرابط مع سمات hreflang إلى قسم الرأس في كل صفحة، مع سرد جميع إصدارات اللغة بما في ذلك الصفحة نفسها. يجب أن تتضمن كل نسخة من الصفحة مجموعة متطابقة من الروابط التي تشير إلى كل إصدار لغة متاح. يضمن هذا الربط ثنائي الاتجاه أن تتعرف محركات البحث على الصفحات كترجمات وليس كنسخ مكررة، مما يتيح لها تقديم إصدار اللغة الصحيح للمستخدمين بناءً على تفضيلات المتصفح وسياق البحث.

الخطوات

1. إنشاء مكون لتوليد روابط اللغات البديلة

استورد مكون Head من next/head لتعديل البيانات الوصفية للصفحة. قم بالوصول إلى معلومات اللغة عبر خطاف useRouter لبناء روابط لجميع إصدارات اللغة المتاحة.

import Head from "next/head";
import { useRouter } from "next/router";

interface AlternateLinksProps {
  path?: string;
}

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, locale: currentLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

يقوم المكون بتخطيط اللغات المتاحة من الموجه وينشئ عناصر الرابط ديناميكيًا لجميع الصفحات.

2. إضافة المكون إلى الصفحات التي تحتوي على ترجمات

قم بتضمين مكون AlternateLinks في كل مكون صفحة موجود بلغات متعددة.

import AlternateLinks from "@/components/AlternateLinks";

export default function AboutPage() {
  return (
    <>
      <AlternateLinks />
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

يضمن المكون أن كل صفحة تتضمن المجموعة الكاملة من الروابط البديلة، مما يلبي متطلب أن تشير جميع الإصدارات إلى بعضها البعض.

3. تضمين رابط ذاتي المرجعية للغة الحالية

يجب أن تتضمن كل صفحة علامة hreflang ذاتية المرجعية تشير إلى لغتها الخاصة. يتعامل المكون بالفعل مع هذا من خلال التكرار عبر جميع اللغات بما في ذلك اللغة الحالية.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

تتضمن كل صفحة الآن علامات hreflang تشير إلى نفسها إلى جانب علامات للإصدارات الأخرى.

4. إضافة رابط احتياطي x-default

أضف رابط x-default لتحديد الإصدار الذي يجب أن يراه المستخدمون عندما تكون لغتهم غير متوفرة.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, defaultLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales || !defaultLocale) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/${defaultLocale}${canonicalPath}`}
      />
    </Head>
  );
}

يوجه رابط x-default المستخدمين الذين لا تتطابق تفضيلات لغتهم إلى اللغة الافتراضية.