Nuxt2 social cards not displaying

Question

I'm trying to set the metadata to see the social card in my nuxt2 aplication when i share the link of a post in facebook.

In my nuxt.config.js i have set this:

head: {
titleTemplate: '%s - Estudios Claw',
title: 'Estudios Claw',
htmlAttrs: {
  lang: 'es'
},
meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: '' },
  { name: 'format-detection', content: 'telephone=no' }
],
link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
},

and in my _slug.vue (my post component )

head() {
return {
  title: `${this.title}`,
  meta: [
    {
      hid: "description",
      name: "description",
      content: `${this.description}`,
    },
    {
      hid: 'og:title',
      name: 'og:title',
      content: `${this.post.data.attributes.title}`,
    },
    {
      hid: 'og:description',
      name: 'og:description',
      content: `${this.post.data.attributes.description}`,
    },
    { hid: 'og:image', property: 'og:image', content: `${this.post.data.attributes.banner.data.attributes.url}` },
    {
      hid: 'og:url',
      name: 'og:url',
      content: `https://www.estudiosclaw.com/gallery/${this.post.data.attributes.slug}`,
    },
    // {
    //   hid: 'twitter:card',
    //   name: 'twitter:card',
    //   content: `${this.description}` || 'summary_large_image',
    // },
  ],
};
},
components: { Gallery, Medialink }
};

In production when i check the html everything seems to work, the data is loaded http://localhost:3000/gallery/sylvia-yssei-tribalfusion-musara but when i share the link doesn't works.

I checked https://developers.facebook.com/tools/debug and gives and the output is like only sees from the nuxtconfig.js file.

I saw a posible solution here NuxtJs dynamic open graph tags are not working but i rather prefer something more clean.

thanks

pd i already try to change name by property setting the meta