كيفية ترجمة بيانات صفحة الميتاداتا في Next.js (Pages Router) الإصدار 16

ترجمة البيانات الوصفية للبحث ووسائل التواصل الاجتماعي

المشكلة

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

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

الحل

ترجمة البيانات الوصفية للصفحة باستخدام نفس موارد الترجمة المستخدمة لمحتوى الصفحة. استخدم خطاف useIntl من react-intl للوصول إلى السلاسل النصية المترجمة ووضعها في مكون <Head> الخاص بالصفحة. يضمن هذا تطابق العناوين والأوصاف مع اللغة الحالية في علامات تبويب المتصفح ونتائج البحث ومعاينات وسائل التواصل الاجتماعي.

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

الخطوات

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

حدد واصفات الرسائل لعناوين الصفحات والأوصاف في كتالوجات الترجمة الخاصة بك، باستخدام نفس البنية المستخدمة للمحتوى المترجم الآخر.

{
"home.title": "Welcome to Our Store",
"home.description": "Discover amazing products at great prices",
"products.title": "Our Products",
"products.description": "Browse our full catalog of items"
}

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

2. إنشاء مكون بيانات وصفية مترجم

استخدم خطاف useIntl للوصول إلى دالة formatMessage، ثم اعرض السلاسل النصية المترجمة داخل مكون Head.

import Head from "next/head";
import { useIntl } from "react-intl";

export default function HomePage() {
  const intl = useIntl();

  return (
    <>
      <Head>
        <title>{intl.formatMessage({ id: "home.title" })}</title>
        <meta
          name="description"
          content={intl.formatMessage({ id: "home.description" })}
        />
      </Head>
      <main>
        <h1>{intl.formatMessage({ id: "home.title" })}</h1>
      </main>
    </>
  );
}

مكون Head هو مكون React مدمج في Next.js يتيح لك تعديل <head> الخاص بالصفحة. تُرجع دالة formatMessage السلسلة النصية المترجمة للغة المحلية الحالية.

3. إضافة بيانات Open Graph الوصفية وبيانات وسائل التواصل الاجتماعي

قم بتوسيع النمط ليشمل بيانات Open Graph الوصفية وبيانات Twitter Card الوصفية لمعاينات وسائل التواصل الاجتماعي.

import Head from "next/head";
import { useIntl } from "react-intl";

export default function ProductsPage() {
  const intl = useIntl();
  const title = intl.formatMessage({ id: "products.title" });
  const description = intl.formatMessage({ id: "products.description" });

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={description} />
      </Head>
      <main>
        <h1>{title}</h1>
      </main>
    </>
  );
}

يؤدي تخزين الرسائل المنسقة في متغيرات إلى تجنب استدعاء formatMessage عدة مرات لنفس الترجمة ويحافظ على نظافة JSX.

4. معالجة البيانات الوصفية الديناميكية للصفحات ذات المعاملات

بالنسبة للصفحات ذات المسارات الديناميكية، ادمج معاملات المسار مع السلاسل النصية المترجمة لإنشاء بيانات وصفية سياقية.

import Head from "next/head";
import { useIntl } from "react-intl";
import { useRouter } from "next/router";

export default function ProductDetailPage() {
  const intl = useIntl();
  const router = useRouter();
  const { id } = router.query;

  const title = intl.formatMessage(
    { id: "product.detail.title" },
    { productId: id },
  );

  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <main>
        <h1>{title}</h1>
      </main>
    </>
  );
}

تدعم واصفات الرسائل استيفاء المتغيرات، مما يتيح لك إدراج قيم ديناميكية مثل معرفات المنتجات أو الأسماء في سلاسل البيانات الوصفية المترجمة. قد تكون الرسالة المقابلة "Product {productId} - Our Store".