SEO v Nuxt.js s vlastností Head

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