كيفية إضافة رؤوس ملائمة لتحسين محركات البحث إلى موقع ويب Next.js

تعتبر عناوين الصفحات والعلامات الوصفية والأوصاف التعريفية مهمة لتحسين محركات البحث. إنها أول الأشياء التي يراها المستخدم على SERPS ويحدد ما إذا كان ينقر على موقع الويب الخاص بك. لذلك من المهم تحسين عناوين موقع الويب والعلامات الوصفية والوصف.

في Next.js ، يمكنك إضافتها من خلال مكون الرأس المخصص. يمكنك إما إضافتها على جميع الصفحات في التطبيق أو تخصيصها لكل صفحة.

إضافة علامة رأس عالمية إلى جميع صفحات Next.js

يوفر Next.js _app.js لتهيئة الصفحات. يمكنك استخدامه لإنشاء العلامات الوصفية المشتركة عبر جميع الصفحات.

يستورد '../styles/globals.css'
يستورد رأس من "التالي / الرأس"
وظيفةتطبيقي({مكون ، pageProps}) {
 يعود <>
<رأس>
<اسم التعريف ="مؤلف" المحتوى ="فلان الفلاني"/>
</Head>
<المكون {... pageProps} />
</>
}
يصدّرتقصير تطبيقي

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

إضافة العلامات الوصفية والوصف إلى صفحة Next.js محددة

تعتبر العلامات الوصفية والأوصاف الثابتة مناسبة للصفحات التي يظل محتواها كما هو ، على سبيل المثال ، الصفحة الرئيسية.

افتح الملف /pages/index.js وقم بتعديل علامة الرأس بالعنوان والوصف المناسبين.

يستورد رأس من "التالي / الرأس" ؛
مقدار ثابت الصفحة الرئيسية = () => {
يعود (
<>
<رأس>
<عنوان>مدونة</title>
<اسم التعريف ="منفذ العرض" المحتوى ="المقياس الأولي = 1.0 ، العرض = عرض الجهاز" />
<اسم التعريف ='وصف' المحتوى ='مقالات البرمجة'/>
</Head>
<رئيسي>
<h1>اهلا بك في مدونتي!</h1>
</main>
</>
 );
};
يصدّرتقصير بيت؛

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

تضمن إضافة العنوان وعرض منفذ العرض والوصف في ملف _app.js أن جميع الصفحات لها نفس البيانات الوصفية.

تحتوي هذه الصفحة على محتوى ثابت ، ولكن في بعض الأحيان ، قد ترغب في إنشاء صفحات تستهلك محتوى ديناميكيًا.

إضافة عنوان Meta ديناميكي وأوصاف إلى صفحة Next.js

اعتمادًا على حالة الاستخدام ، يمكنك استخدام getStaticProps () أو getStaticPaths () أو getServerSideProps () لجلب البيانات في Next.js. تحدد هذه البيانات محتوى الصفحة. استخدمه لإنشاء البيانات الوصفية للصفحة.

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

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

يستورد {getAllPosts، getSinglePost} من "../../utils/mdx" ؛
يستورد رأس من "التالي / الرأس" ؛
مقدار ثابت النشر = ({العنوان ، الوصف ، المحتوى}) => {
يعود (
<>
<رأس>
<عنوان>{عنوان}</title>
<اسم التعريف ="وصف" المحتوى = {description} />
</Head>
<رئيسي>{/* محتوى الصفحة */}</main>
</>
 );
};
يصدّرمقدار ثابت getStaticProps = غير متزامن ({params}) => {
// احصل على منشور واحد
مقدار ثابت آخر = انتظر getSinglePost (params.id، "posts") ؛
يعود {
 الدعائم: {... post}،
 };
};
يصدّرمقدار ثابت getStaticPaths = غير متزامن () => {
// استرداد جميع المشاركات
 مسارات const = getAllPosts ("دعامات"). الخريطة (({id}) => ({params: {id}})) ؛
يعود {
 مسارات،
 تراجع: خطأ شنيع,
 };
};
يصدّرتقصير بريد؛

تمرر الدالة getStaticProps بيانات التدوين إلى مكون Post كعناصر. يتلف مكون Post العنوان والوصف والمحتوى من الدعائم. ثم يستخدم مكون الرأس العنوان والوصف في العلامات الوصفية.

Next.js هو إطار عمل محسن

لقد تعلمت للتو كيفية استخدام مكون الرأس لإضافة عناوين وصفية وأوصاف إلى مشروع Next.js. استخدم هذه المعرفة لإنشاء رؤوس صديقة لكبار المسئولين الاقتصاديين ، وتسلق SERPs وجذب المزيد من الزوار إلى موقعك.

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