ترجمة البيانات الوصفية للصفحة

المشكلة

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

الحل

استخدم وظيفة generateMetadata من Next.js داخل صفحاتك وتخطيطاتك. يمكن لهذه الوظيفة التي تعمل على جانب الخادم تحميل الترجمات الصحيحة استنادًا إلى معلمة lang (باستخدام نفس منطق تحميل القاموس كمكوناتك) وإرجاع كائن metadata ديناميكي مع العنوان والوصف المترجمين.

الخطوات

1. إنشاء وظيفة لتحميل القواميس

تحتاج إلى طريقة لتحميل ملفات الترجمة المسطحة على الخادم. قم بإنشاء وظيفة مساعدة لهذا الغرض.

// app/get-dictionary.ts
import 'server-only';

type Messages = Record<string, string>;

const dictionaries: { [key: string]: () => Promise<Messages> } = {
  en: () => import('@/dictionaries/en.json').then((module) => module.default),
  es: () => import('@/dictionaries/es.json').then((module) => module.default),
};

export const getDictionary = async (lang: string) => {
  const load = dictionaries[lang];
  if (load) {
    return load();
  }
  return dictionaries.en();
};

2. تحديد البيانات الوصفية على صفحة

في ملف الصفحة الخاص بك (مثل app/[lang]/about/page.tsx)، قم بتصدير وظيفة async تسمى generateMetadata. سيقوم Next.js تلقائيًا باستدعاء هذه الوظيفة عند عرض الصفحة.

// app/[lang]/about/page.tsx
import { getDictionary } from '@/app/get-dictionary';
import type { Metadata } from 'next';

type Props = {
  params: { lang: string };
};

// هذه الوظيفة تولد البيانات الوصفية
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // تحميل القاموس لهذه الصفحة
  const dict = await getDictionary(params.lang);

  return {
    title: dict['about.title'], // مثلاً، "About Us" أو "Sobre Nosotros"
    description: dict['about.description'],
  };
}

// باقي مكون الصفحة
export default function AboutPage() {
  return (
    <div>
      {/* محتوى الصفحة */}
      <h1>...</h1>
    </div>
  );
}

3. قم بتعيين قالب عنوان في التخطيط الرئيسي

لتجنب تكرار اسم موقعك في كل عنوان، يمكنك تعيين قالب في التخطيط الرئيسي الخاص بك.

// app/[lang]/layout.tsx
import { getDictionary } from '@/app/get-dictionary';
import type { Metadata } from 'next';

type Props = {
  params: { lang: string };
  children: React.ReactNode;
};

// يمكنك أيضًا إنشاء بيانات وصفية في التخطيطات
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const dict = await getDictionary(params.lang);

  return {
    // هذا يوفر عنوانًا أساسيًا وقالبًا
    title: {
      default: dict['site.name'], // مثال: "موقعي الرائع"
      template: `%s | ${dict['site.name']}`, // مثال: "من نحن | موقعي الرائع"
    },
    description: dict['site.description'],
  };
}

export default async function RootLayout({ children, params }: Props) {
  // ... باقي التخطيط الخاص بك (تحميل الموفرين، إلخ)
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}