كيفية ربط إصدارات اللغات البديلة في React Router v7

ربط بدائل اللغة لمحركات البحث

المشكلة

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

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

الحل

أضف علامات ارتباط hreflang إلى كل صفحة تسرد جميع النسخ اللغوية المتاحة لذلك المحتوى. تستخدم هذه العلامات السمة rel="alternate" للإشارة إلى أن الصفحات المرتبطة هي ترجمات وليست نسخاً مكررة. تحدد كل علامة رمز لغة وتشير إلى عنوان URL للنسخة اللغوية تلك.

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

الخطوات

1. إنشاء دالة مساعدة لبناء روابط hreflang

تستخدم سمة hreflang رموز لغة ISO 639-1 متبوعة اختيارياً برموز منطقة ISO 3166-1 Alpha 2. قم بإنشاء أداة مساعدة تولد واصفات الروابط لجميع النسخ اللغوية للصفحة.

type HreflangLink = {
  tagName: "link";
  rel: "alternate";
  hrefLang: string;
  href: string;
};

export function buildHreflangLinks(
  pathname: string,
  locales: string[],
  baseUrl: string,
): HreflangLink[] {
  return locales.map((locale) => ({
    tagName: "link",
    rel: "alternate",
    hrefLang: locale,
    href: `${baseUrl}/${locale}${pathname}`,
  }));
}

تأخذ هذه الدالة مسار الصفحة الحالي، وقائمة اللغات المدعومة، وعنوان URL الأساسي لموقعك، ثم تعيد مصفوفة من واصفات الروابط التي يمكن لدالة meta عرضها.

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

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

export function buildHreflangLinks(
  pathname: string,
  locales: string[],
  baseUrl: string,
  defaultLocale: string,
): HreflangLink[] {
  const links = locales.map((locale) => ({
    tagName: "link",
    rel: "alternate",
    hrefLang: locale,
    href: `${baseUrl}/${locale}${pathname}`,
  }));

  links.push({
    tagName: "link",
    rel: "alternate",
    hrefLang: "x-default",
    href: `${baseUrl}/${defaultLocale}${pathname}`,
  });

  return links;
}

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

3. تصدير روابط hreflang من دالة meta الخاصة بك

يمكن لدالة meta تعيين علامات الروابط بناءً على البيانات. استخدمها لإرجاع روابط hreflang لكل مسار.

import type { Route } from "./+types/about";
import { buildHreflangLinks } from "~/utils/hreflang";

const SUPPORTED_LOCALES = ["en", "fr", "de", "es"];
const BASE_URL = "https://example.com";
const DEFAULT_LOCALE = "en";

export function meta({ location }: Route.MetaArgs) {
  const hreflangLinks = buildHreflangLinks(
    location.pathname,
    SUPPORTED_LOCALES,
    BASE_URL,
    DEFAULT_LOCALE,
  );

  return [
    { title: "About Us" },
    { name: "description", content: "Learn about our company" },
    ...hreflangLinks,
  ];
}

تقوم دالة meta بإرجاع مصفوفة من الواصفات التي يمكن أن تتضمن كائنات مع تعيين tagName إلى "link". يقوم React Router بعرض هذه كعناصر روابط في رأس المستند.

4. التأكد من وجود مكون Meta في تخطيط الجذر الخاص بك

يقوم مكون Meta بعرض جميع علامات meta التي تم إنشاؤها بواسطة تصدير meta الخاص بوحدة المسار ويجب أن يكون داخل رأس المستند. تحقق من أن تخطيط الجذر الخاص بك يتضمنه.

import { Links, Meta, Outlet, Scripts } from "react-router";

export default function Root() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

يقوم مكون Meta بتجميع وعرض جميع واصفات meta من المسار المطابق، بما في ذلك علامات روابط hreflang التي حددتها في الخطوة 3.

5. تكييف اسم المسار للمسارات ذات بادئة اللغة

إذا كانت المسارات الخاصة بك تتضمن رمز اللغة في المسار (مثل /en/about)، قم بإزالته قبل بناء روابط hreflang حتى تشير جميع إصدارات اللغة إلى نفس الصفحة المنطقية.

export function meta({ location }: Route.MetaArgs) {
  const pathWithoutLocale = location.pathname.replace(/^\/[a-z]{2}(\/|$)/, "/");

  const hreflangLinks = buildHreflangLinks(
    pathWithoutLocale,
    SUPPORTED_LOCALES,
    BASE_URL,
    DEFAULT_LOCALE,
  );

  return [{ title: "About Us" }, ...hreflangLinks];
}

هذا يضمن أن المسارات /en/about و/fr/about و/de/about جميعها تقوم بإنشاء روابط hreflang تشير إلى عناوين URL الصحيحة الخاصة باللغة للمحتوى الأساسي نفسه.