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

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

المشكلة

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

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

الحل

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

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

الخطوات

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

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

{
"home.title": "مرحبًا بكم في متجرنا",
"home.description": "اكتشف منتجات مذهلة بأسعار رائعة",
"products.title": "منتجاتنا",
"products.description": "تصفح الكتالوج الكامل لعناصرنا"
}

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

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>
    </>
  );
}

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