أفضل الممارسات لكبار المسئولين الاقتصاديين Nuxt.js

واحدة من أكبر نقاط البيع في Nuxt.js هي أنه يمكن أن يساعد التطبيق الخاص بك مع محرك البحث الأمثل (SEO) وترتيب أفضل على Google. في هذه المقالة ، سنتعرف على أفضل الممارسات للتأكد من إعداد تطبيق Nuxt بشكل صحيح للترتيب في محركات البحث.

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

كيف Nuxt.js يساعدك مع كبار المسئولين الاقتصاديين

قبل الغوص ، دعنا نتعرف بسرعة على Nuxt وكيف يمكن أن يساعدك في تجميع طلبك لأغراض تحسين محركات البحث (SEO).

لم يتم إعداد تطبيقات صفحة واحدة لـ SEO

عادةً باستخدام Vue.js ، أنت بصدد إنشاء تطبيق صفحة واحدة. هذا تطبيق تم إنشاؤه بواسطة JavaScript تمامًا حيث يوجد ملف واحد فقط ، وهو index.html فارغ. يتم تعبئة المحتوى في index.html بعد تحميل JavaScript في البداية ، كما يتولى JavaScript أيضًا تبديل الطرق.

تعد SPAs رائعة لإنشاء واجهة مستخدم snappy ، ولكن عندما يتعلق الأمر بـ SEO ، فإن تطبيقات الصفحة الواحدة ليست مثالية لأنها لا تحتوي على محتوى أولي. هذا يجعل من الصعب على Google وغيرها من برامج الزحف (بما في ذلك برامج زحف الوسائط الاجتماعية مثل Facebook) الزحف إلى موقع الويب الخاص بك وعرضه بشكل صحيح في نتائج البحث.

يجعل Nuxt.js من السهل إنشاء تطبيق عالمي

يدور التطبيق العالمي حول تحميل التطبيق مسبقًا على خادم ويب وإرسال HTML المقدم كرد على المتصفح لكل مسار في تطبيقك لتحسين عملية تحسين محركات البحث (SEO) ، وجعل عملية التحميل تتم بشكل أسرع ، إلى جانب العديد من المزايا الأخرى.

باستخدام تطبيق عالمي ، سيكون هناك محتوى على الصفحة مثل العلامات و <meta> العلامات في <head> و <h1> العلامات في <body> قبل أن يتم تحميل أي JavaScript. تساعد هذه العلامات برامج الزحف في تحديد ما هو موجود في الصفحة.</p><h3>كيف تتعامل Nuxt.js مع الرأس لجميع صفحاتك</h3><p>يستخدم Nuxt مكتبة تسمى vue-meta للتعامل مع عنصر <head> في كل صفحة من صفحاتك. تعتبر الصفحة مجرد مصطلح Nuxt لطريق ، ويعيش كل واحد داخل مجلد الصفحات.</p><p>يمنحك Nuxt ثلاث طرق لإعداد عنصر <head> داخل صفحات التطبيق الخاص بك. دعنا نراجعهم الآن.</p><h3>1) إعداد العلامات الوصفية الافتراضية لجميع الصفحات</h3><p>ليس من غير المألوف أن تقوم الصفحات المختلفة في جميع أنحاء التطبيق بمشاركة بعض علامات التعريف نفسها. يتيح لك Nuxt إعداد الإعدادات الافتراضية لكل صفحة من صفحاتك عن طريق إعداد خاصية الرأس في nuxt.config.jsfile.</p><pre>module.exports = {   رئيس: {     titleTemplate: '٪ s - Nuxt.js' ،     التعريف: [// كل كائن في هذه الصفيف هو علامة التعريف الخاصة به       {charset: 'utf-8'}،       {name: 'viewport' ، المحتوى: 'width = عرض الجهاز ، المقياس الأولي = 1'} ،       {hid: 'description' ، الاسم: 'description' ، المحتوى: 'الوصف Meta'}     ]   } }؛</pre><p>انقر هنا لرؤية كل الخصائص التي يمكنك تعريفها داخل خاصية head.</p><p>ملاحظة: يستخدم Nuxt.js الرأس لاسم الخاصية. يستخدم vue-meta metaInfo. إنها نفس الملكية.</p><h3>2) إعداد العلامات الوصفية لصفحاتك بشكل فردي</h3><p>داخل كل صفحة من صفحات Nuxt الخاصة بك ، يمكنك تحديد طريقة الرأس. يمكنك تخصيص علامات الرأس يدويًا لصفحة فردية وستقوم Nuxt بالكتابة فوق كل ما قمت بتعيينه كإعداد افتراضي في nuxt.config.jsfile.</p><p>فيما يلي مثال لملف About.vue مع علامات التعريف الخاصة به في طريقة الرأس:</p><pre><القالب>   <h1> حول الصفحة </ h1> </ قالب></pre><pre></body></html>