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

March 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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.