Kako dodati meta oznake u Nuxt.js

Nuxt.js moćan je okvir za izgradnju Vue.js aplikacija koje se prikazuju na strani poslužitelja. Osim što pruža čvrst temelj za izgradnju složenih aplikacija, Nuxt.js također olakšava dodavanje meta oznaka na vaše stranice.

Saznajte kako uključiti meta oznake u svoju aplikaciju Nuxt kako biste poboljšali SEO i vidljivost svoje web stranice na društvenim medijima.

Meta oznake su isječci koda koji pružaju informacije o web stranici. Te su oznake prisutne u HTML izvoru, baš kao i sadržaj vaše stranice, ali nisu vidljive na samoj stranici.

Meta oznake mogu pružiti informacije kao što su naslov stranice, opis i ključne riječi. Također se koriste za pružanje informacija za dijeljenje na društvenim mrežama i optimizaciju tražilica.

Prije nego što se upustite u dodavanje meta oznaka, izradite novu Nuxt.js aplikaciju. Za to provjerite imate li Node.js instaliran na vašem uređaju. Zatim otvorite terminal i pokrenite sljedeću naredbu:

npx create-nuxt-app moja-aplikacija

Ovo će stvoriti novu Nuxt.js aplikaciju u direktoriju pod nazivom moja-aplikacija. Slijedite upute za konfiguraciju aplikacije prema potrebi.

Jedan od načina dodavanja meta oznaka u vašu aplikaciju Nuxt.js jest da ih dodate globalno. Da biste to učinili, dodajte oznaku naslova i dvije meta oznake: jednu za skup znakova i jednu za okvir za prikaz. Otvorite svoje nuxt.config.js datoteku i dodajte svojstvo glave u modul.izvozi objekt:

modul.izvoz = {
 glava: {
 titula: 'Moja aplikacija',
 meta: [
 { skup znakova: 'utf-8' },
 { Ime: 'viewport', sadržaj: 'width=device-width, initial-scale=1' }
 ]
 }
}

Dodavanje meta oznaka na pojedinačne stranice

Ponekad ćete možda htjeti dodati meta oznake samo određenim stranicama u svojoj aplikaciji. Da biste to učinili, možete dodati svojstvo glave u definiciju komponente za stranicu: