إضافة خريطة الموقع sitemap إلى مشروع nextjs
في هذه التدوينة سنأخذ نبذة عن فائدة ملف sitemap.xml و بماذا يفيدنا به مع المحركات البحث و في مقدمتهم Google، و كذلك كيفية إنشاء الملف و إضافته إلى مشروع Nextjs و ضبطه.
ما هو ملف sitemap.xml ؟
هو الملف الذي سيحمل خريطة موقعنا، روابط الصفحات الموجودة بموقعنا على سبيل المثال صفحة الرئيسية و صفحات الأقسام و غيرها من الصفحات التي نرغب بظهورها في محركات البحث و في مثالنا الذي سنطبق عليه روابط التدوينات، و السؤال التالي ما فائدته؟
فائدة sitemap
يساعد sitemap في فهرسة موقعنا لدى محركات البحث، بمعنى يسهّل على المحركات البحث إيجادنا بطريقة أسهل و فهرسة روابط موقعنا، مما يُمكّننا على الإنتشار أكثر و ظهور موقعنا في محركات البحث بطريقة أفضل، لذلك من المهم إضافته للمواقع التي نُنشئها، و الخطوة التالية هي إضافته لمشروع Nextjs.
تنويه :
سنطبّق على هيكلة المجلدات و الملفات App router الجديدة التي أتت مع الإصدار Nextjs 13 و أعلى، حيث يُنصح بإستخدامها من قبل فريق Next.
الطريقة الأولى : خريطة ثابتة Static sitemap
تستخدم هذه الطريقة في حالة كانت لدينا روابط معدودة و محددة و هي ثابتة، و من أجل ذلك ننشئ ملف sitemap.xml في المسار التالي :
app/sitemap.xml
ثم نضيف الروابط فيه، مثال على ملف خريطة ثابت :
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://ciphers.dev</loc>
<lastmod>2023-11-18T20:11:38.961Z</lastmod>
</url>
<!-- Another urls -->
</urlset>
طبعًا مع إستبدال رابط الموجود في المثال السابق برابط موقعك و كذلك تحديث تاريخ الرابط، و من أجل الوصول إليه من خلال المتصفح يمكن كتابة رابط موقعك ثم sitemap.xml، مثال لشكل الرابط :
www.domainname.com/sitemap.xml
الطريقة الثانية : إنشاء ملف sitemap.xml برمجيًا
تستخدم هذه الطريقة في حالة كانت الروابط كثيرة، مثل المدونات و الأخبار و المواقع المليئة بالروابط.
في البداية سننشئ ملف sitemap.ts في المسار التالي :
app/sitemap.ts
ثم نُضيف الكود التالي ( شرح الكود موجود بالأسفل ):
import { getAllPosts } from "@/libs/posts";
export default async function sitemap() {
const posts = await getAllPosts([
'date',
'slug',
'draft'
]);
const urls = posts.map((post) => ({
url : `${process.env.NEXT_PUBLIC_URL}/posts/${post.slug}`,
lastModified : post.date
}));
return [
{
url : process.env.NEXT_PUBLIC_URL,
lastModified : new Date()
},
... urls
]
}
تنويه
في الكود السابق سنجد
process.env.NEXT_PUBLIC_URLو هو مجرد مفتاح يحمل قيمة رابط الموقعhttps://ciphers.devفي ملف.env.development، يمكن إستغناء عنه و استخدام رابط الموقع مُباشرة، أو العمل بنفس الطريقة.
في البداية تم إستيراد دالة ( Function ) تجلب التدوينات، ثم أنشئنا دالة تحمل اسم sitemap، و في داخل الدالة أستدعينا دالة getAllPosts و مررنا المفاتيح التي نحتاجها، ثم مررنا على كافة التدوينات من خلال map و أنشئنا مصفوفة تحتوي على كائنات ( objects ) و كل كائن منها يحمل قيمتين من كل تدوينة و هما :
{
url : 'url',
lastModified: 'date'
}
ثم أعدنا مصفوفة تحمل كائن لكل الروابط و من ضمنها رابط المدونة نفسها، و بذلك سينشئ ملف sitemap.xml تلقائيًا مع كل عملية بناء ( build ) للمشروع، و يمكن الوصول إليه من خلال كتابة رابط الموقع ثم كتابة sitemap.xml.
في الختام
في هذه التدوينة ركّزت على إضافة sitemap.xml بأبسط طريقة لمشروع nextjs مع تركيز على النقاط المهمة، و يمكنك معرفة أكثر من خلال قراءة المرجع الرسمي المرفق بالأسفل.