كيفية إنشاء خرائط مواقع متعددة اللغات في 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

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