כיצד להוסיף מטא תגיות ב-Nuxt.js

Nuxt.js היא מסגרת רבת עוצמה לבניית יישומי Vue.js המעובדים בצד השרת. בנוסף לספק בסיס איתן לבניית יישומים מורכבים, Nuxt.js גם מקל על הוספת מטא תגיות לדפים שלך.

גלה כיצד לכלול מטא תגיות באפליקציית Nuxt שלך כדי לשפר את ה-SEO והנראות של האתר שלך במדיה החברתית.

מטא תגים הם קטעי קוד המספקים מידע על דף אינטרנט. תגים אלה קיימים במקור ה-HTML, בדיוק כמו התוכן של הדף שלך, אך הם אינם גלויים בדף עצמו.

מטא תגים יכולים לספק מידע כגון כותרת העמוד, תיאור ומילות מפתח. הם משמשים גם כדי לספק מידע לשיתוף מדיה חברתית ואופטימיזציה למנועי חיפוש.

לפני שצולל להוספת מטא תגיות, צור אפליקציית Nuxt.js חדשה. בשביל זה, ודא שיש לך Node.js מותקן במכשיר שלך. לאחר מכן, פתח את הטרמינל שלך והפעל את הפקודה הבאה:

npx create-nuxt-app my-app

פעולה זו תיצור אפליקציית Nuxt.js חדשה בספרייה בשם האפליקציה שלי. עקוב אחר ההנחיות כדי להגדיר את האפליקציה שלך לפי הצורך.

אחת הדרכים להוסיף מטא תגיות לאפליקציית Nuxt.js שלך היא להוסיף אותם באופן גלובלי. לשם כך, הוסף תגית כותרת ושתי מטא תגיות: אחת עבור ערכת התווים ואחת עבור התצוגה. פתח את שלך

nuxt.config.js קובץ והוסף מאפיין head ל- module.exports לְהִתְנַגֵד:

מודול‎.exports = {
 ראש: {
 כותרת: 'האפליקציה שלי',
 מטא: [
 { ערכת תווים: 'utf-8' },
 { שֵׁם: 'נקודת מבט', תוֹכֶן: 'width=device-width, initial-scale=1' }
 ]
 }
}

הוספת מטא תגיות בדפים בודדים

לפעמים ייתכן שתרצה להוסיף מטא תגיות רק לדפים ספציפיים באפליקציה שלך. לשם כך, ניתן להוסיף מאפיין head להגדרת הרכיב עבור הדף: