Cum să adăugați meta-etichete în Nuxt.js

Nuxt.js este un cadru puternic pentru construirea de aplicații Vue.js redate pe server. Pe lângă faptul că oferă o bază solidă pentru construirea de aplicații complexe, Nuxt.js facilitează și adăugarea de metaetichete în paginile dvs.

Aflați cum să includeți metaetichete în aplicația dvs. Nuxt pentru a îmbunătăți SEO și vizibilitatea site-ului dvs. pe rețelele sociale.

Metaetichetele sunt fragmente de cod care oferă informații despre o pagină web. Aceste etichete sunt prezente în sursa HTML, la fel ca și conținutul paginii dvs., dar nu sunt vizibile pe pagina în sine.

Metaetichetele pot oferi informații precum titlul paginii, descrierea și cuvintele cheie. Ele sunt, de asemenea, folosite pentru a oferi informații pentru distribuirea în rețelele sociale și optimizarea motoarelor de căutare.

Înainte de a adăuga metaetichete, creați o nouă aplicație Nuxt.js. Pentru asta, asigurați-vă că aveți

Node.js instalat pe dispozitivul dvs. Apoi, deschideți terminalul și rulați următoarea comandă:

npx create-nuxt-app aplicația-mea

Aceasta va crea o nouă aplicație Nuxt.js într-un director numit aplicația mea. Urmați instrucțiunile pentru a vă configura aplicația după cum este necesar.

O modalitate de a adăuga metaetichete în aplicația dvs. Nuxt.js este să le adăugați la nivel global. Pentru a face acest lucru, adăugați o etichetă de titlu și două metaetichete: una pentru setul de caractere și una pentru fereastra de vizualizare. Deschide-ți nuxt.config.js fișier și adăugați o proprietate head la modul.exporturi obiect:

modul.exports = {
 cap: {
 titlu: „Aplicația mea”,
 meta: [
 { set de caractere: „utf-8” },
 { Nume: „vizor”, conţinut: „width=device-width, initial-scale=1” }
 ]
 }
}

Adăugarea de meta-etichete pe pagini individuale

Uneori este posibil să doriți să adăugați metaetichete numai la anumite pagini din aplicația dvs. Pentru a face acest lucru, puteți adăuga o proprietate head la definiția componentei pentru pagină: