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.

Intervocalic

Probably this helps: github.com/jvandemo/angular-update-meta/issues/13 or this: #17128480 , Not nuxtjs specific but similar problem. – Lennon

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 },
  ],

Goliard

You have unclosed comments in your answer – Parterre

Most websites won't pick the data if it's under the attribute name="". According to the opengraph documentation, you have to use the property="" attribute. What you suggested in your answer is unfortunately invalid. To fix this he only needed to add the hid attribute. – Kink

Doesn't work in 2022 – Felker

Answer 2

This code overwrites the main meta tags in head. So if you need to share a single article or single page and need to overwrite the og tags this is how it should work.

 meta: [
      {
        'property':  'og:title',
        'content':  `${this.news.title}`,
      },
      {
        'property':  'og:description',
        'content': `${this.project.content}`.replace(/<\/?[^>]+(>|$)/g, ""),
      },
      {
        'property':  'og:image',
        'content': `${this.project.image[0]}`
      }
    ],

Moluccas

This answer can be improved by explaining what it does and how it solves the issue. – Italia

@CtrlS This code overwrites the main meta tags in head.So if need to share a single article or single page and need to overwrite the og tags this is how it should work. – Moluccas

That should be included in your answer! :) – Italia

this doesn't work, none of the tags work on facebook debugger tool – Clipfed

Answer 3

We can achieve it as follows in the vue file

head() {
//console.log(this.article.title);
return {
  title: this.article.title,
  meta: [
    {
      hid: "description",
      name: "description",
      content: this.article.description,
    },
  ],
};

},

Tetraspore