Nuxt.js Update Meta Description, Facebook OpenGraph and Twitter Card

Mar 5, 2020

Edit pages components in pages directory.

I use this.$store.state.site to store 2 information: domain and twitter, as vuex allow server storage/assignment of value to propagate to client.

Alternatively, you could use Nuxt Global Variables.

<script>export default {  head() {    return {      title: this.item.title,      meta: [        { hid: 'description', name: 'description', content: this.item.description },        { hid: 'og:title', name: 'og:title', content: this.item.title },        { hid: 'og:description', name: 'og:description', content: this.item.description },        { hid: 'og:url', name: 'og:url', content: this.pageUrl },        { hid: 'og:image', name: 'og:image', content: this.item.coverImage },        { hid: 'og:type', name: 'og:type', content: 'article' },        { hide: 'twitter:card', name: 'twitter:card', content: this.item.coverImage ? 'summary_large_image' : 'summary' },        { hide: 'twitter:site', name: 'twitter:site', content: this.$store.state.site.twitter }      ].filter(x => x.content)    }  },  data() {    return {      item: {        title: 'This is a title',        descrition: 'This is a description',        coverImage: 'https://code.luasoftware.com/img/logo-badge.png'      }    }  },  computed: {    pageUrl() {      const domain = this.$store.state.site.domain      return `https://${domain}/${this.$route.path}`    }  }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.