help: Deployment issue with defineOgImageScreenshot()

[mrwaks]

📚 What are you trying to do?

Dear community members, First of all, I would like to thank you for the quality of your module.

Current situation

I am currently experiencing a technical difficulty with the defineOgImageScreenshot() composable that requires your expertise.

Detailed description

Observed behavior:

• ✅ Perfect operation in development environment
• ❌ Malfunction in production

Identified cause:

According to your documentation (reference: https://arc.net/l/quote/vdfsvhel), a Chromium binary is required for operation in production. Despite installing this prerequisite, the problem persists. Request for assistance

Could you share:

• Examples of successful implementation in production
• Similar feedback
• Best deployment practices

I remain at your disposal to provide any additional information needed.

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[harlan-zw]

Hi, https://github.com/harlan-zw/unlighthouse/tree/main/docs uses the screenshot feature.

Can you confirm you're using the latest version of the module, you seem to be linking old documentation.

Also can you provide some more details, what do you mean by malfunction.

[mrwaks]

Thank you for your quick response!

Until now, I was using the nuxt-og-image package by following its documentation, without realizing that it was outdated.

After checking out your unlighthouse repo (which I’m adopting by the way, haha), I followed the recommendations there, particularly switching to the @nuxtjs/seo module instead of nuxt-og-image, and installing Playwright to allow Chromium to be launched.

Result => It still doesn’t work.

To explain the issue in more detail, the Open Graph image simply doesn’t load at all in production (it only works in development).

When I run an Open Graph inspection on my Vercel deployment, no image is loaded for my [...slug].vue page.

I read in the @nuxtjs/seo documentation under the OG image section that it’s recommended to prerender images to ensure they work properly.

In my case, however, the images are not prerendered but dynamically generated (I retrieve a user configuration from the database before displaying the image in the hero section).

Do you think adding the delay option would help? Or does the Playwright screenshot trigger only after the page has fully loaded, making the delay option unnecessary?

[harlan-zw]

Are you able to share an example URL? You can message me via Discord as well if you prefer to keep it private.