How do I configure dynamic og tags in nuxt.js (vue.js)?

Question

I started the nuxt app with vue init nuxt / express myprojectstart.

Here is my directory.

page
|- _project.vue
|- project
  | - index.vue

The configuration of _project.vue

export default {
  head () {
    return {
      title: this.project.title,
      meta: [
        {property: 'fb:app_id', content: '12873892173892'},
        {property: 'og:title', content: this.project.title},
        {property: 'og:image', content: this.project.image},
      ],
    }
  }
},
async asyncData ({app, params, error}) {
  const project = await app. $ axios. $ get (`/ project`)
    return {
      project: project.project,
    }
  }
}

However, if you press the Facebook Share button, the desired title and image will not appear.

I think this is a server side rendering issue. But I could not solve this problem.

I would appreciate your help.

Answer 1

For this to work with Nuxt.js instead of using the 'property' you need to use 'name' meta prop. Additionally, you can add a 'hid' prop to set a unique identifier for your tag, in case you have child components that use the very same tag.

So, for your case:

  meta: [
    { hid: 'fb:app_id', name: 'fb:app_id', content: '12873892173892' },
    { hid: 'og:title', name: 'og:title', content: this.project.title },
    { hid: 'og:image', name: 'og:image', content: this.project.image },
  ],