Existují 3 způsoby, jak přidat název a meta popis do vaší aplikace Nuxt.js, což je extrémně užitečné pro optimalizaci pro vyhledávače.
1) Pomocí souboru nuxt.config.js přidejte globální názvy a metapopisy, aby byly dostupné na všech stránkách. To vám samozřejmě poskytne stejný název a popis na každé stránce, ale pokryje vás to, když zapomenete přidat meta na konkrétní stránku.
export default {
head: {
title: 'Seo in Nuxt.js',
meta: [
{
hid: 'description',
name: 'description',
content: 'SEO in Nuxt.js with the Head Property for amazing Search Engine Optimisation'
}
],
},
}
2) Přidejte metodu head jako objekt do značky skriptu na vaší stránce. Je to skvělý způsob, jak nastavit jedinečný název a popis pro každou stránku.
<script>
export default {
head: {
title: 'Home page',
meta: [
{ hid: 'description', name: 'description', content: 'Home page description' }
],
}
}
</script>
3) Přidejte metodu head jako funkci do značky skriptu na vaší stránce. Pomocí této možnosti můžete nejen přidat jedinečný název a popis pro svou stránku, ale máte také přístup ke svým datům a vypočítaným vlastnostem.
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data () {
return {
title: 'Amazing Seo with Nuxt.js',
description: 'Nuxt.js gives you the most amazing SEO by just adding a title and meta description to your page.'
}
},
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: this.description }
]
}
}
}
</script>
Normálně nastavím nuxt.config.js s globálním názvem a popisem a pak na svých stránkách používám hlavu jako funkci pro případ, že nakonec použiji data pro nadpis nebo meta popis. To je mimořádně užitečné, když pracujete s daty z rozhraní API nebo dynamických stránek, kde neznáte název a meta popis.
A stejně jako přidání názvu a popisu můžete také přidat odkazy na google fonty nebo externí skripty buď globálně v nuxt.config.js, nebo lokálně v komponentě stránky, chcete-li.
link: [
{
rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
],
script: [
{
src: 'https://identity.netlify.com/v1/netlify-identity-widget.js',
defer: true
}
]
Nuxt.js používá vue-meta, takže si v dokumentech vyhledejte všechny dostupné vlastnosti metaInfo