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

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

المشكلة

يحتوي الموقع على عدد كبير من الصفحات عبر العديد من اللغات. ملف 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';

// This tells Next.js which sitemaps to build at build time
export async function generateStaticParams() {
  return locales.map((lang) => ({
    lang,
  }));
}

// A helper function to get all pages for a language
// In a real app, this would fetch from a CMS or database
async function getPagesForLanguage(lang: string): Promise<string[]> {
  // These are relative paths, *without* the lang prefix
  // e.g., '/', '/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)، والتي يتم إنشاؤها بواسطة هذا المسار الديناميكي.