كيفية إضافة العلامات الوصفية في Nuxt.js

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

تعرف على كيفية تضمين العلامات الوصفية في تطبيق Nuxt لتحسين مُحسّنات محرّكات البحث لموقعك وظهوره على وسائل التواصل الاجتماعي.

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

يمكن أن توفر العلامات الوصفية معلومات مثل عنوان الصفحة والوصف والكلمات الرئيسية. يتم استخدامها أيضًا لتوفير معلومات لمشاركة الوسائط الاجتماعية وتحسين محرك البحث.

قبل الغوص في إضافة العلامات الوصفية ، قم بإنشاء تطبيق Nuxt.js جديد. لذلك ، تأكد من أن لديك Node.js مثبت على جهازك. بعد ذلك ، افتح الجهاز الطرفي وقم بتشغيل الأمر التالي:

npx create-nuxt-app my-app

سيؤدي هذا إلى إنشاء تطبيق Nuxt.js جديد في دليل يسمى تطبيقي. اتبع التعليمات لتهيئة تطبيقك حسب الحاجة.

تتمثل إحدى طرق إضافة العلامات الوصفية إلى تطبيق Nuxt.js في إضافتها عالميًا. للقيام بذلك ، أضف علامة عنوان وعلامتين وصفيتين: واحدة لمجموعة الأحرف والأخرى لإطار العرض. افتح ملف nuxt.config.js file وإضافة خاصية رأس إلى ملف وحدة الصادرات هدف:

وحدة.exports = {
 رأس: {
 عنوان: 'تطبيقي',
 ميتا: [
 { محارف: "utf-8" },
 { اسم: "منفذ العرض", محتوى: "العرض = عرض الجهاز ، المقياس الأولي = 1" }
 ]
 }
}

إضافة العلامات الوصفية على الصفحات الفردية

قد ترغب أحيانًا في إضافة العلامات الوصفية فقط إلى صفحات معينة في تطبيقك. للقيام بذلك ، يمكنك إضافة خاصية head إلى تعريف المكون للصفحة: