إذا كنت تقوم بإنشاء موقع ويب باستخدام Next.js، فمن المحتمل أنك تريد أن تقوم محركات البحث باكتشاف صفحاتك وفهرستها بكفاءة. إحدى الطرق لتحسين هذه العملية هي إنشاء خريطة موقع. خريطة الموقع هي ملف يسرد جميع عناوين URL الموجودة على موقع الويب الخاص بك، مما يساعد محركات البحث مثل Google في الزحف إلى موقعك وفهرسته بشكل أسرع.

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

فوائد استخدام خريطة الموقع التالي

قبل أن نتعمق في عملية التثبيت، دعونا نناقش بإيجاز الفوائد الرئيسية لاستخدام خريطة الموقع التالية:

1. تحسين محركات البحث : تساعد خريطة الموقع جيدة التنظيم محركات البحث مثل Google على اكتشاف صفحاتك بشكل أكثر كفاءة، مما يؤدي إلى فهرسة أفضل وتصنيفات بحث أعلى.

2. زحف أسرع: من خلال تزويد محركات البحث بخريطة طريق لموقع الويب الخاص بك، فإنك تسمح لهم بالزحف إلى صفحاتك وفهرستها بشكل أسرع.

3. التعامل مع المسارات الديناميكية: بالنسبة لمواقع الويب ذات المسارات الديناميكية، فإن خريطة الموقع التالية تجعل من السهل إنشاء عناوين URL للمحتوى الديناميكي، مما يضمن إمكانية اكتشاف جميع صفحاتك.

4. خرائط الموقع المخصصة: تتيح لك خريطة الموقع التالية تخصيص خرائط الموقع الخاصة بك بخيارات مثل تحديد الأولوية وتغيير التكرار وحتى استبعاد صفحات معينة.

الخطوة 1: تثبيت خريطة الموقع التالية

للبدء، ستحتاج إلى تثبيت حزمة خريطة الموقع التالية في مشروع Next.js الخاص بك. قم بتشغيل الأمر التالي في جهازك الطرفي:

npm install next-sitemap

أو، إذا كنت تستخدم الغزل:

yarn add next-sitemap

الخطوة 2: إنشاء ملف التكوين next-sitemap.js

بعد تثبيت الحزمة، الخطوة التالية هي إنشاء ملف تكوين باسم next-sitemap.config.js في جذر مشروعك. سيحتوي هذا الملف على إعدادات إنشاء خريطة الموقع الخاصة بك.

إليك التكوين الأساسي:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

في الكود أعلاه، نحدد عنوان URL الأساسي لموقعك باستخدام siteUrl. يقوم خيار generatorRobotsTxt بإنشاء ملف robots.txt إلى جانب خريطة الموقع، ويحدد sitemapSize عدد عناوين URL المطلوب تضمينها في كل ملف خريطة موقع.

الخطوة 3: قم بتحديث package.json باستخدام البرنامج النصي لخريطة الموقع

الآن، ستحتاج إلى إضافة برنامج نصي إلى ملف package.json الخاص بك لإنشاء خريطة الموقع عند إنشاء مشروعك.

إليك كيفية القيام بذلك:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

سيضمن هذا أنه بعد كل إنشاء، يتم إنشاء خريطة الموقع تلقائيًا بناءً على التكوين الخاص بك.

الخطوة 4: إنشاء وإنشاء خريطة الموقع

الآن بعد أن تم إعداد كل شيء، قم بتشغيل الأمر التالي لإنشاء مشروعك وإنشاء خريطة الموقع:

npm run build

أو مع الغزل:

yarn build

بعد اكتمال الإنشاء، سيتم إنشاء ملف sitemap.xml (وملف robots.txt بشكل اختياري) في المجلد العام/ الخاص بمشروعك. ستحتوي هذه الملفات على جميع عناوين URL لتطبيق Next.js، وتكون جاهزة للزحف إليها بواسطة محركات البحث.

مثال: تطبيق Next.js "Hello World" مع خريطة الموقع التالية

لتوضيح كيفية عمل خريطة الموقع التالية، فلنقم بإنشاء تطبيق Next.js بسيط "Hello World". إليك صفحة Next.js الأساسية:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

الآن، قم بتكوين ملف sitemap.config.js التالي الخاص بك مثل هذا:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

بعد ذلك، أضف ما يلي إلى ملف package.json الخاص بك:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

بعد تشغيل npm run build، ستجد خريطة الموقع الخاصة بك في الدليل public/، الذي يحتوي على عنوان URL لصفحتك الرئيسية "Hello World".

العرض المباشر

يستخدم موقع الويب الخاص بي https://rajeshkumaryadav.com هذه الحزمة لإنشاء خريطة الموقع تلقائيًا عند عملية الإنشاء. يوجد أدناه ملف robot.txt الذي يحتوي على sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

خاتمة

باتباع الخطوات الموضحة في هذا الدليل، لقد قمت الآن بدمج خريطة الموقع التالية في مشروع Next.js الخاص بك. توفر هذه الأداة طريقة سهلة لإنشاء ملف sitemap وملف robots.txt، مما يمكنه تحسين تحسين محركات البحث لموقعك على الويب بشكل كبير والتأكد من قدرة محركات البحث على اكتشاف كل المحتوى الخاص بك بكفاءة.

بفضل هذا الإعداد، أنت في طريقك إلى جعل تطبيق Next.js أكثر توافقًا مع محركات البحث وأفضل فهرسة!