كيفية إنشاء خرائط مواقع متعددة اللغات في React Router v7

المشكلة

تساعد خرائط المواقع محركات البحث في اكتشاف وزحف جميع صفحات الموقع. يمكن أن يؤدي الموقع متعدد اللغات الذي يحتوي على مئات أو آلاف الصفحات لكل لغة إلى إنشاء خرائط مواقع ضخمة بسرعة. يصبح ملف واحد يسرد كل عنوان URL لكل لغة غير عملي، وقد يتجاوز حدود 50,000 عنوان URL أو حجم 50 ميجابايت، ويجعل الصيانة صعبة. عندما تقوم بتحديث بنية لغة واحدة، يجب عليك إعادة إنشاء الملف بأكمله والتحقق من صحته. هذا النهج لا يتناسب مع نمو موقعك.

الحل

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

الخطوات

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

قم بإنشاء مسار مورد يعيد استجابة XML تسرد جميع خرائط المواقع الخاصة باللغة.

import type { Route } from "./+types/sitemap";

const LOCALES = ["en", "es", "fr", "de"];

export function loader({ request }: Route.LoaderArgs) {
const { origin } = new URL(request.url);

const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${LOCALES.map(locale => `  <sitemap>
  <loc>${origin}/sitemap-${locale}.xml</loc>
</sitemap>`).join("
")}
</sitemapindex>`;

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

يعمل هذا المسار كنقطة نهاية API من خلال إرجاع استجابة XML. يسرد الفهرس خريطة موقع واحدة لكل لغة، مما يسهل إضافة أو إزالة اللغات عن طريق تحديث مصفوفة LOCALES.

2. إنشاء مسارات خريطة الموقع الخاصة باللغات

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

import type { Route } from "./+types/sitemap.$locale";

export async function loader({ params }: Route.LoaderArgs) {
const locale = params.locale;
const urls = await getUrlsForLocale(locale);

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls.map(url => `  <url>
  <loc>${url}</loc>
</url>`).join("
")}
</urlset>`;

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

async function getUrlsForLocale(locale: string): Promise<string[]> {
return [];
}

يتم تحليل القطاع الديناميكي في مسار الطريق وتوفيره كـ params.locale. تحتوي كل خريطة موقع لغة على عناوين URL للغة المحددة فقط.

3. جلب الصفحات لكل لغة

قم بتنفيذ الدالة المساعدة لاسترجاع جميع الصفحات للغة معينة من مصدر البيانات الخاص بك.

async function getUrlsForLocale(locale: string): Promise<string[]> {
  const pages = await db.pages.findMany({
    where: { locale, published: true },
    select: { slug: true },
  });

  return pages.map((page) => `https://example.com/${locale}/${page.slug}`);
}

تقوم هذه الدالة بالاستعلام عن قاعدة البيانات أو مصدر المحتوى للصفحات المنشورة باللغة المطلوبة وتنشئ عناوين URL كاملة. قم بتعديل الاستعلام وهيكل URL ليتناسب مع تطبيقك.

4. تسجيل مسارات خريطة الموقع

أضف مسارات خريطة الموقع إلى ملف تكوين المسارات الخاص بك.

import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route("sitemap.xml", "./routes/sitemap.tsx"),
  route("sitemap-:locale.xml", "./routes/sitemap.$locale.tsx"),
] satisfies RouteConfig;

لكل مسار نمط URL للمطابقة ومسار ملف لوحدة المسار. يستجيب المسار الرئيسي عند /sitemap.xml وتستجيب مسارات اللغة عند /sitemap-en.xml و/sitemap-es.xml وهكذا.

5. أضف فهرس خريطة الموقع إلى ملف robots.txt

قم بتوجيه محركات البحث إلى فهرس خريطة الموقع الخاص بك في ملف robots.txt الموجود في جذر الدليل العام الخاص بك.

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

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