Using meta tags in nuxt 3 for social share

Question

This is my facebook share button component. The meta tags and script are visible in the html but for fb share the title, description, image still not appearing. I read it might be a problem that they need to be after opening head tag, how would you be able o achieve that? Or there is an other problem?

<template>
  <div id="1">
    <div id="fb-root"></div>
    <div
      class="fb-share-button"
      :data-href="currentURLWithBase"
      data-layout="button"
      data-size="small"
    ></div>
  </div>
</template>

<script setup>

const props = defineProps({
  product: Object,
  currentURLWithBase: String
})

let fbImage = computed(() => { return props.product.basic_media_list ? props.product.basic_media_list : getImageUrl('/placeholder/placeholder1.png') })

useHead({
  meta: [
    { property:"og:url", content: () => props.currentURLWithBase },
    { property:"og:type", content: "website" },
    { property:"og:title", content: () => props.product.title },
    { property:"og:description", content: () => props.product.description },
    { property:"og:image:secure", content: () => fbImage.value},
    { property:"fb:app_id", content:"MY_APP_ID" }
  ],
  script: [
    {
      hid: "fb",
      src: "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0",
      defer: true,
      onload: () => {
        FB.XFBML.parse();
      },
    },
  ]
})

</script>