كيفية ترجمة البيانات الوصفية للصفحة في React Router v7

المشكلة

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

الحل

ترجم البيانات الوصفية للصفحة لتتطابق مع اللغة الحالية عن طريق تصدير دالة meta من وحدة المسار الخاصة بك. استخدم واجهة برمجة التطبيقات formatMessage من react-intl مع Message Descriptors لترجمة سلاسل العنوان والوصف، مما يضمن استخدام البيانات الوصفية لنفس موارد الترجمة الخاصة بمحتوى الصفحة. هذا يحافظ على اتساق كل شيء بين ما يظهر في علامات تبويب المتصفح ونتائج البحث والصفحة نفسها.

الخطوات

1. إنشاء مساعد للوصول إلى intl خارج المكونات

يوفر كائن intl الدالة formatMessage ويمكن الوصول إليه عبر خطاف useIntl في المكونات أو إنشاؤه مباشرة باستخدام createIntl في بيئات غير React. نظراً لأن دالة meta تعمل خارج شجرة مكونات React، قم بإنشاء مساعد يبني نسخة intl من رسائلك.

import { createIntl, createIntlCache } from "react-intl";

const cache = createIntlCache();

export function createIntlForLocale(
  locale: string,
  messages: Record<string, string>,
) {
  return createIntl(
    {
      locale,
      messages,
    },
    cache,
  );
}

ينشئ هذا المساعد نسخة intl يمكنها تنسيق الرسائل في أي دالة، وليس فقط مكونات React.

2. تحميل الرسائل في محمل مسار أصلي

تُرجع محملات المسار بيانات يصل إليها المكونات عبر خصائص loaderData. قم بتحميل رسائل الترجمة الخاصة بك في مسار أصلي بحيث تكون متاحة للمسارات الفرعية.

import type { Route } from "./+types/root";

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const locale = url.pathname.split("/")[1] || "en";

  const messages = await import(`../translations/${locale}.json`);

  return {
    locale,
    messages: messages.default,
  };
}

تتلقى دالة meta معاملاً يُسمى matches يحتوي على بيانات المُحمِّل من جميع المسارات المطابقة، مما يجعل بيانات المُحمِّل الأصلية متاحة لدوال meta الخاصة بالمسارات الفرعية.

3. تصدير دالة meta لترجمة البيانات الوصفية

قم بتصدير دالة meta من وحدة المسار الخاصة بك والتي تُرجع مصفوفة من كائنات واصف البيانات الوصفية. قم بالوصول إلى بيانات المُحمِّل الأصلية من matches واستخدم مساعد intl الخاص بك لترجمة النصوص.

import type { Route } from "./+types/product";
import { createIntlForLocale } from "~/utils/intl";

export function meta({ matches }: Route.MetaArgs) {
  const rootMatch = matches.find((match) => match.id === "root");
  const { locale, messages } = rootMatch?.data || {
    locale: "en",
    messages: {},
  };

  const intl = createIntlForLocale(locale, messages);

  return [
    {
      title: intl.formatMessage({
        id: "product.meta.title",
        defaultMessage: "Product Details",
      }),
    },
    {
      name: "description",
      content: intl.formatMessage({
        id: "product.meta.description",
        defaultMessage: "View detailed information about this product",
      }),
    },
  ];
}

تقبل دالة formatMessage واصف رسالة يحتوي على id وdefaultMessage، وتُرجع النص المترجم للغة المحلية الحالية.

4. إضافة نصوص البيانات الوصفية المترجمة إلى ملفات الرسائل

أضف مفاتيح ترجمة البيانات الوصفية إلى ملف الرسائل الخاص بكل لغة محلية حتى تتمكن formatMessage من العثور عليها.

{
  "product.meta.title": "Détails du produit",
  "product.meta.description": "Voir les informations détaillées sur ce produit"
}

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