Πώς να προσθέσετε μετα-ετικέτες στο 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 αρχείο και προσθέστε μια ιδιότητα κεφαλής στο module.εξαγωγές αντικείμενο:

μονάδα μέτρησης.εξαγωγές = {
 κεφάλι: {
 τίτλος: "Η εφαρμογή μου",
 μετα: [
 { σύνολο χαρακτήρων: 'utf-8' },
 { όνομα: "Θύρα προβολής", περιεχόμενο: 'width=device-width, αρχική κλίμακα=1' }
 ]
 }
}

Προσθήκη Meta Tags σε μεμονωμένες σελίδες

Μερικές φορές μπορεί να θέλετε να προσθέσετε μετα-ετικέτες μόνο σε συγκεκριμένες σελίδες στην εφαρμογή σας. Για να το κάνετε αυτό, μπορείτε να προσθέσετε μια ιδιότητα head στον ορισμό του στοιχείου για τη σελίδα: