CODEWITHSUNDEEP
facebookvue.jsfacebook-opengraphserver-side-renderingnuxt.js
bamgae
bamgae

Reputation: 301

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

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.

Upvotes: 5

Views: 20154

Answers (3)

Ngen CMS
Ngen CMS

Reputation: 156

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

},

Upvotes: 0

user3543053
user3543053

Reputation: 114

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

Upvotes: 9

Meriton Reqica
Meriton Reqica

Reputation: 116

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

Upvotes: 3

Related Questions