إنشاء فهرس خريطة موقع للغات المتعددة

إدارة المواقع الكبيرة متعددة اللغات لتحسين محركات البحث

المشكلة

يحتوي الموقع على عدد كبير من الصفحات بلغات متعددة. إن استخدام ملف sitemap.xml واحد ضخم يسرد جميع عناوين URL لكل لغة يعتبر غير فعال وصعب الإدارة وقد يتجاوز حدود حجم الملف. هذا يجعل من الصعب تحديث عناوين URL للغة واحدة أو اكتشاف محركات البحث لجميع المحتوى بكفاءة.

الحل

إنشاء ملف sitemap.xml يعمل كـ "فهرس خريطة الموقع"، يشير إلى خرائط مواقع أخرى خاصة باللغة (مثل sitemap-en.xml، sitemap-es.xml). هذا النهج ينظم المحتوى، ويسهل إدارته، ويتوسع بكفاءة مع إضافة لغات أو صفحات جديدة.

الخطوات

1. إنشاء مسار فهرس خريطة الموقع

بدلاً من ملف sitemap.ts، يجب عليك إنشاء معالج مسار قياسي. هذا يمنحك تحكمًا كاملًا لإنشاء فهرس خريطة الموقع.

قم بإنشاء app/sitemap.xml/route.ts.

// app/sitemap.xml/route.ts
import { locales, siteBaseUrl } from '@/i18n-config';

export async function GET() {
  const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="[http://www.sitemaps.org/schemas/sitemap/0.9](http://www.sitemaps.org/schemas/sitemap/0.9)">
  ${locales
    .map((locale) => {
      return `
    <sitemap>
      <loc>${siteBaseUrl}/sitemap-${locale}.xml</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
    </sitemap>`;
    })
    .join('')}
</sitemapindex>
`;

  return new Response(sitemapIndex, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

يخبر هذا الملف محركات البحث أن خريطة موقعك هي فهرس يشير إلى ملفات أخرى، مثل sitemap-en.xml، sitemap-es.xml، إلخ.

2. إنشاء المسار الديناميكي لخرائط مواقع اللغات

بعد ذلك، قم بإنشاء المسار الديناميكي الذي سينشئ خريطة موقع خاصة بكل لغة.

قم بإنشاء app/sitemap-[lang].xml/route.ts.

// app/sitemap-[lang].xml/route.ts
import { locales, siteBaseUrl } from '@/i18n-config';

// هذا يخبر Next.js بخرائط المواقع التي يجب بناؤها في وقت البناء
export async function generateStaticParams() {
  return locales.map((lang) => ({
    lang,
  }));
}

// دالة مساعدة للحصول على جميع الصفحات للغة
// في تطبيق حقيقي، سيتم الجلب من نظام إدارة المحتوى أو قاعدة بيانات
async function getPagesForLanguage(lang: string): Promise<string[]> {
  // هذه مسارات نسبية، *بدون* بادئة اللغة
  // مثل '/'، '/about'، '/blog/my-post'
  return ['/', '/about', '/contact'];
}

export async function GET(
  request: Request,
  { params }: { params: { lang: string } }
) {
  const { lang } = params;

  if (!locales.includes(lang)) {
    return new Response('Not Found', { status: 404 });
  }

  const pages = await getPagesForLanguage(lang);

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="[http://www.sitemaps.org/schemas/sitemap/0.9](http://www.sitemaps.org/schemas/sitemap/0.9)">
  ${pages
    .map((page) => {
      const path = page === '/' ? '' : page;
      return `
    <url>
      <loc>${siteBaseUrl}/${lang}${path}</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
    </url>`;
    })
    .join('')}
</urlset>
`;

  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

الآن، أصبح ملف sitemap.xml الخاص بك فهرسًا نظيفًا، وتم تنظيم عناوين URL لكل لغة بشكل أنيق في ملفاتها الخاصة (مثل /sitemap-en.xml)، والتي يتم إنشاؤها بواسطة هذا المسار الديناميكي.