Im working on a site that is made with Node, vue & Nuxt, this site deal with multiples and dinamic products, the products have a main card that is render on the fly and showed to customers, Im trying to set the Open Graph html header meta tags dynamically to share in Whatsapp, Linkedin, Facebook and show the preview when the link is shared, But I have no success.

I put the meta in "export default" vue component area like this:

 head () {
    const title = (MasterKeys.ENV !== 'production' ? '[' + MasterKeys.ENV.toUpperCase() + '] ' : '') + '%s - ' + (process.env.npm_package_name || '') + this.title
    return {
      titleTemplate: title,
      meta: [
        { hid: 'og:site-name', property: 'og:site_name', content: process.env.npm_package_name },
        { hid: 'og-url', property: 'og:url', content: document.location.href },
        { hid: 'og-type', property: 'og:type', content: 'website' },
        { hid: 'og-title', property: 'og:title', content: title },
        { hid: 'og-description', property: 'og:description', content: this.description },
        { hid: 'og-image', property: 'og:image', content: this.image },
        { hid: 'twitter-card', name: 'twitter:card', content: 'summary_large_image' }
      ]
    }
  },

The site is configured with ssr option off in nuxt.config.js:

export default {
  ssr: false,
.
.
.
.

I can summarize all that I investigated:

1. In a client request Vue send to client minimum HTML, and Javascript of execute the rest of logic.

2. The client (Twitter, Facebook, etc) Open-Graph renderer does not have a Javascript engine that proccess the logic sent by nuxt in Javascript form.

There is a form in Nuxt - Vue to achive That?