I am using nuxt 3 SSR with useSeoMeta for pages/posts/[id].vue like this

  useSeoMeta({
    title: () => post.value?.title,
    description: () => post.value?.subtitle,
    keywords: () => post.value?.categoryName,
    author: () => post.value?.authorBy,
    ogTitle: () => post.value?.title,
    ogDescription: () => post.value?.subtitle,
    ogImage: () => post.value?.thumbnail,
    ogImageSecureUrl: () => post.value?.thumbnail,
    ogImage_alt: () => post.value?.title,
    ogType: () => "article",
    ogUrl: () => `https://mywebsiteurl.com/posts/${post.value?.slug}`,
    twitterCard: () => "summary_large_image",
    twitterTitle: () => post.value?.title,
    twitterDescription: () => post.value?.subtitle,
    twitterImage: () => post.value?.thumbnail,
    ogUpdated_time: () => +new Date(),
  });

inspect the element I see all the property has valid value and I can share in telegram, x, LINE or Facebook feed, .. works correctly but on Facebook Messenger and WhatsApp it only show title and description but not show the image.

I’ve tried adding og image width, height, type still not work.
I’ve cleared facebook cache in Facebook debugger tool still not work.
I’ve try to set fixed value using component … still not work.

Are there any configurations specific for facebook messenger and whatsapp that I am not aware of? I also create a facebook app and put fb:app_id still not work.

Any suggestions are much appreciated as I’ve been stuck at this for many days now.

I saw this question exactly the same with my issue but no answer yet