Hvordan legge til metakoder i Nuxt.js

Nuxt.js er et kraftig rammeverk for å bygge Vue.js-applikasjoner som er gjengitt på serversiden. I tillegg til å gi et solid grunnlag for å bygge komplekse applikasjoner, gjør Nuxt.js det også enkelt å legge til metakoder på sidene dine.

Finn ut hvordan du inkluderer metakoder i Nuxt-appen din for å forbedre nettstedets SEO og synlighet på sosiale medier.

Metakoder er kodebiter som gir informasjon om en nettside. Disse kodene finnes i HTML-kilden, akkurat som innholdet på siden din, men de er ikke synlige på selve siden.

Metakoder kan gi informasjon som sidetittel, beskrivelse og nøkkelord. De brukes også til å gi informasjon for deling av sosiale medier og søkemotoroptimalisering.

Før du dykker inn i å legge til metakoder, lag en ny Nuxt.js-app. For det, sørg for at du har Node.js installert på enheten din. Åpne deretter terminalen din og kjør følgende kommando:

npx create-nuxt-app min-app

Dette vil opprette en ny Nuxt.js-app i en katalog som heter min-appen. Følg instruksjonene for å konfigurere appen din etter behov.

En måte å legge til metakoder i Nuxt.js-appen din er å legge dem til globalt. For å gjøre dette, legg til en tittelkode og to metakoder: en for tegnsettet og en for visningsporten. Åpne opp din nuxt.config.js fil og legg til en head-egenskap til modul.eksporter gjenstand:

modul.exports = {
 hode: {
 tittel: 'Min app',
 meta: [
 { tegnsett: "utf-8" },
 { Navn: 'viewport', innhold: 'width=device-width, initial-scale=1' }
 ]
 }
}

Legge til metakoder på enkeltsider

Noen ganger vil du kanskje bare legge til metatagger på bestemte sider i appen din. For å gjøre dette kan du legge til en head-egenskap i komponentdefinisjonen for siden: