إضافة البيانات الوصفية
البيانات الوصفية ضرورية لتحسين محركات البحث (SEO) وإمكانية المشاركة. في هذا الفصل، سنناقش كيفية إضافة البيانات الوصفية إلى تطبيق Next.js الخاص بك.
ما هي البيانات الوصفية؟
في تطوير الويب، توفر البيانات الوصفية تفاصيل إضافية حول صفحة الويب. لا تكون البيانات الوصفية مرئية للمستخدمين الذين يزورون الصفحة. بدلاً من ذلك، تعمل خلف الكواليس، مضمنة داخل HTML للصفحة، عادةً داخل عنصر <head>. هذه المعلومات المخفية ضرورية لمحركات البحث والأنظمة الأخرى التي تحتاج إلى فهم محتوى صفحة الويب بشكل أفضل.
لماذا تعتبر البيانات الوصفية مهمة؟
تلعب البيانات الوصفية دورًا مهمًا في تعزيز تحسين محركات البحث (SEO) لصفحة الويب، مما يجعلها أكثر سهولة في الفهم لمحركات البحث ومنصات التواصل الاجتماعي. تساعد البيانات الوصفية المناسبة محركات البحث في فهرسة صفحات الويب بشكل فعال، مما يحسن ترتيبها في نتائج البحث. بالإضافة إلى ذلك، تحسن البيانات الوصفية مثل Open Graph مظهر الروابط المشتركة على وسائل التواصل الاجتماعي، مما يجعل المحتوى أكثر جاذبية وإفادة للمستخدمين.
أنواع البيانات الوصفية
هناك أنواع مختلفة من البيانات الوصفية، كل منها يخدم غرضًا فريدًا. تشمل بعض الأنواع الشائعة:
بيانات عنوان الصفحة: مسؤولة عن عنوان صفحة الويب المعروض في علامة تبويب المتصفح. إنها ضرورية لتحسين محركات البحث لأنها تساعد محركات البحث في فهم محتوى الصفحة.
<title>عنوان الصفحة</title>بيانات وصف الصفحة: توفر هذه البيانات الوصفية نظرة عامة موجزة عن محتوى صفحة الويب وغالبًا ما تظهر في نتائج محرك البحث.
<meta name="description" content="وصف موجز لمحتوى الصفحة." />بيانات الكلمات المفتاحية: تتضمن هذه البيانات الوصفية الكلمات المفتاحية المتعلقة بمحتوى صفحة الويب، مما يساعد محركات البحث في فهرسة الصفحة.
<meta name="keywords" content="كلمة1, كلمة2, كلمة3" />بيانات Open Graph: تعزز هذه البيانات الوصفية طريقة تمثيل صفحة الويب عند مشاركتها على منصات التواصل الاجتماعي، حيث توفر معلومات مثل العنوان والوصف وصورة المعاينة.
<meta property="og:title" content="العنوان هنا" />
<meta property="og:description" content="الوصف هنا" />
<meta property="og:image" content="رابط_الصورة_هنا" />بيانات Favicon: تربط هذه البيانات الوصفية أيقونة favicon (أيقونة صغيرة) بصفحة الويب، وتظهر في شريط عنوان المتصفح أو علامة التبويب.
<link rel="icon" href="مسار/إلى/favicon.ico" />إضافة البيانات الوصفية
يحتوي Next.js على واجهة برمجة تطبيقات (API) للبيانات الوصفية يمكن استخدامها لتحديد بياناتك الوصفية للتطبيق. هناك طريقتان يمكنك من خلالهما إضافة البيانات الوصفية إلى تطبيقك:
-
بناءً على التكوين: قم بتصدير كائن
metadataثابت أو دالةgenerateMetadataديناميكية في ملفlayout.jsأوpage.js. -
بناءً على الملفات: يحتوي Next.js على مجموعة من الملفات الخاصة التي تُستخدم خصيصًا لأغراض البيانات الوصفية:
favicon.ico،apple-icon.jpg، وicon.jpg: تُستخدم لأيقونات favicon والأيقوناتopengraph-image.jpgوtwitter-image.jpg: تُستخدم لصور وسائل التواصل الاجتماعيrobots.txt: توفر تعليمات للزحف لمحركات البحثsitemap.xml: تقدم معلومات حول هيكل الموقع
لديك المرونة لاستخدام هذه الملفات للبيانات الوصفية الثابتة، أو يمكنك إنشاؤها برمجيًا داخل مشروعك.
مع هذين الخيارين، سيقوم Next.js تلقائيًا بإنشاء عناصر <head> ذات الصلة لصفحاتك.
أيقونة Favicon وصورة Open Graph
في مجلد /public الخاص بك، ستلاحظ وجود صورتين: favicon.ico و opengraph-image.jpg.
انقل هاتين الصورتين إلى جذر مجلد /app الخاص بك.
بعد القيام بذلك، سيتعرف Next.js تلقائيًا على هذه الملفات ويستخدمها كأيقونة favicon وصورة OG. يمكنك التحقق من ذلك عن طريق فحص عنصر <head> لتطبيقك في أدوات المطور.
معلومة مفيدة: يمكنك أيضًا إنشاء صور OG ديناميكية باستخدام منشئ
ImageResponse.
عنوان الصفحة والأوصاف
يمكنك أيضًا تضمين كائن metadata من أي ملف layout.js أو page.js لإضافة معلومات إضافية للصفحة مثل العنوان والوصف. أي بيانات وصفية في layout.js سيتم توريثها من قبل جميع الصفحات التي تستخدمه.
في التخطيط الجذر الخاص بك، قم بإنشاء كائن metadata جديد بالحقول التالية:
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'لوحة تحكم Acme',
description: 'لوحة تحكم دورة Next.js الرسمية، مبنية باستخدام موجه التطبيق.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
export default function RootLayout() {
// ...
}سيقوم Next.js تلقائيًا بإضافة العنوان والبيانات الوصفية إلى تطبيقك.
ولكن ماذا لو كنت تريد إضافة عنوان مخصص لصفحة معينة؟ يمكنك القيام بذلك عن طريق إضافة كائن metadata إلى الصفحة نفسها. البيانات الوصفية في الصفحات المتداخلة ستتجاوز البيانات الوصفية في الصفحة الأصل.
على سبيل المثال، في صفحة /dashboard/invoices، يمكنك تحديث عنوان الصفحة:
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'الفواتير | لوحة تحكم Acme',
};هذا يعمل، لكننا نكرر عنوان التطبيق في كل صفحة. إذا تغير شيء ما، مثل اسم الشركة، سيتعين عليك تحديثه في كل صفحة.
بدلاً من ذلك، يمكنك استخدام حقل title.template في كائن metadata لتحديد قالب لعناوين صفحاتك. يمكن أن يتضمن هذا القالب عنوان الصفحة، وأي معلومات أخرى تريد تضمينها.
في التخطيط الجذر الخاص بك، قم بتحديث كائن metadata لتضمين قالب:
import { Metadata } from 'next';
export const metadata: Metadata = {
title: {
template: '%s | لوحة تحكم Acme',
default: 'لوحة تحكم Acme',
},
description: 'لوحة تحكم تعلم Next.js الرسمية المبنية باستخدام موجه التطبيق.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};سيتم استبدال %s في القالب بعنوان الصفحة المحدد.
الآن، في صفحة /dashboard/invoices الخاصة بك، يمكنك إضافة عنوان الصفحة:
export const metadata: Metadata = {
title: 'الفواتير',
};انتقل إلى صفحة /dashboard/invoices وتحقق من عنصر <head>. يجب أن ترى أن عنوان الصفحة أصبح الآن الفواتير | لوحة تحكم Acme.
تمرين: إضافة البيانات الوصفية
الآن بعد أن تعلمت عن البيانات الوصفية، تدرب على إضافة العناوين إلى صفحاتك الأخرى:
- صفحة
/login. - صفحة
/dashboard/. - صفحة
/dashboard/customers. - صفحة
/dashboard/invoices/create. - صفحة
/dashboard/invoices/[id]/edit.
واجهة برمجة تطبيقات (API) البيانات الوصفية في Next.js قوية ومرنة، مما يمنحك تحكمًا كاملاً في البيانات الوصفية لتطبيقك. هنا، أوضحنا لك كيفية إضافة بعض البيانات الوصفية الأساسية، ولكن يمكنك إضافة حقول متعددة، بما في ذلك keywords، robots، canonical، والمزيد. لا تتردد في استكشاف التوثيق، وإضافة أي بيانات وصفية إضافية تريدها إلى تطبيقك.