Metataggar ger användbar ytterligare information om dina webbsidor. Se till att du vet hur du inkluderar dem när du använder Nuxt.

Nuxt.js är ett kraftfullt ramverk för att bygga server-side-renderade Vue.js-applikationer. Förutom att ge en solid grund för att bygga komplexa applikationer, gör Nuxt.js det också enkelt att lägga till metataggar på dina sidor.

Ta reda på hur du inkluderar metataggar i din Nuxt-app för att förbättra din webbplats SEO och synlighet på sociala medier.

Metataggar är kodavsnitt som ger information om en webbsida. Dessa taggar finns i HTML-källan, precis som innehållet på din sida, men de är inte synliga på själva sidan.

Metataggar kan ge information som sidans titel, beskrivning och nyckelord. De används också för att tillhandahålla information för delning av sociala medier och sökmotoroptimering.

Innan du lägger till metataggar, skapa en ny Nuxt.js-app. För det, se till att du har Node.js installerat på din enhet. Öppna sedan din terminal och kör följande kommando:

instagram viewer 
npx create-nuxt-app min-app

Detta kommer att skapa en ny Nuxt.js-app i en katalog som heter min-app. Följ anvisningarna för att konfigurera din app efter behov.

Ett sätt att lägga till metataggar i din Nuxt.js-app är att lägga till dem globalt. För att göra detta, lägg till en titeltagg och två metataggar: en för teckenuppsättningen och en för visningsporten. Öppna upp din nuxt.config.js fil och lägg till en head-egenskap till modul.export objekt:

modul.exports = {
 huvud: {
 titel: "Min app",
 meta: [
 { teckenuppsättning: 'utf-8' },
 { namn: 'viewport', innehåll: 'width=device-width, initial-scale=1' }
 ]
 }
}

Lägga till metataggar på enstaka sidor

Ibland kanske du vill lägga till metataggar bara på specifika sidor i din app. För att göra detta kan du lägga till en head-egenskap till komponentdefinitionen för sidan: