useSeoMeta Issue: ogImage Not Working in Facebook Messenger and WhatsApp #16

Sovai · 2024-07-31T07:31:47Z

Sovai
Jul 31, 2024

Hi everyone,
I've asked this question in Nuxt repo and think here should be more fit for the useSeoMeta question.

I'm currently working on a Nuxt 3 project using server-side rendering (SSR) and useSeoMeta for setting meta tags on dynamic pages. Here’s how I’m setting up the meta tags for pages/posts/[id].vue:

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(),
});

Issue

When sharing my posts on Facebook Messenger and WhatsApp, the title and description are displayed correctly, but the image is not shown. The same meta tags work perfectly (show image) on Telegram, LinkedIn, X (Twitter), LINE, and the Facebook feed.

Steps I've Taken

Cleared Facebook Cache: Used the Facebook debugger tool to clear cache.
Tested with facebook debugger and no issue found
Tried to add Meta Tags with <Head> <Meta> Component: Tried setting fixed values directly in the component.
Included og:image Dimensions: Added width, height, and type for og:image.
Add og:image:secure_url
Created Facebook App: Added fb:app_id to the meta tags.

Despite these efforts, the issue persists. I Noticed that useSeoMeta tags are added at the end of the so I suspect it might be due to the reactive nature of post.value causing the meta tags to be added later in the , which might be causing them to be ignored if there is a size limit.

Question

Are there any specific configurations or steps I should follow to ensure the image meta tag works correctly on Facebook Messenger and WhatsApp? Any insights or suggestions would be greatly appreciated as I've been stuck on this for several days.

Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useSeoMeta Issue: ogImage Not Working in Facebook Messenger and WhatsApp #16

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

useSeoMeta Issue: ogImage Not Working in Facebook Messenger and WhatsApp #16

Sovai Jul 31, 2024

Issue

Steps I've Taken

Question

Replies: 0 comments

Sovai
Jul 31, 2024