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

March 5, 2020

vuejs
nuxtjs

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 to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

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

Tags: