Metatags bieden nuttige aanvullende gegevens over uw webpagina's. Zorg ervoor dat u weet hoe u ze moet opnemen wanneer u Nuxt gebruikt.

Nuxt.js is een krachtig raamwerk voor het bouwen van server-side-gerenderde Vue.js-applicaties. Naast het bieden van een solide basis voor het bouwen van complexe applicaties, maakt Nuxt.js het ook gemakkelijk om metatags aan uw pagina's toe te voegen.

Ontdek hoe u metatags in uw Nuxt-app kunt opnemen om de SEO van uw site en de zichtbaarheid op sociale media te verbeteren.

Metatags zijn stukjes code die informatie geven over een webpagina. Deze tags zijn aanwezig in de HTML-bron, net als de inhoud van uw pagina, maar ze zijn niet zichtbaar op de pagina zelf.

Metatags kunnen informatie geven zoals de paginatitel, beschrijving en trefwoorden. Ze worden ook gebruikt om informatie te verstrekken voor het delen van sociale media en zoekmachineoptimalisatie.

Maak een nieuwe Nuxt.js-app voordat u begint met het toevoegen van metatags. Zorg ervoor dat je dat hebt Node.js geïnstalleerd op uw apparaat. Open vervolgens uw terminal en voer de volgende opdracht uit:

instagram viewer 
npx maak-nuxt-app mijn-app

Hiermee wordt een nieuwe Nuxt.js-app gemaakt in een map met de naam mijn-app. Volg de aanwijzingen om uw app naar behoefte te configureren.

Een manier om metatags aan uw Nuxt.js-app toe te voegen, is door ze wereldwijd toe te voegen. Voeg hiervoor een titeltag en twee metatags toe: één voor de tekenset en één voor de viewport. Open uw nuxt.config.js bestand en voeg een eigenschap head toe aan het module.exports voorwerp:

moduul.export = {
 hoofd: {
 titel: 'Mijn app',
 meta: [
 { tekenset: 'utf-8' },
 { naam: 'uitkijk postje', inhoud: 'breedte=apparaatbreedte, beginschaal=1' }
 ]
 }
}

Metatags toevoegen aan enkele pagina's

Soms wilt u metatags alleen toevoegen aan specifieke pagina's in uw app. Om dit te doen, kunt u een eigenschap head toevoegen aan de componentdefinitie voor de pagina: