Open Graph og:image uses relative URL instead of absolute, causing social preview issues

[enri90]

Hi, thanks for the great work on Vike!
I noticed an issue when generating Open Graph meta tags in a Vike project (React + Vite):

<meta property="og:image" content="/assets/static/preview.CvqgeWl5.jpeg" />

This results in warnings from social platforms like Facebook (e.g., “URL not valid”), since Open Graph requires absolute URLs (e.g., https://example.com/assets/...).

Expected behavior:
The og:image tag should use an absolute URL based on the site origin, for example:

<meta property="og:image" content="https://example.com/assets/static/preview.CvqgeWl5.jpeg" />

Steps to reproduce:
1. Set up a Vike project with a React page.
2. Add Open Graph meta tags in the page head, referencing an image in /assets/.
3. Build and deploy.
4. Run the URL through the Facebook Sharing Debugger → Warning appears:

URL not valid — relative path provided.

https://developers.facebook.com/tools/debug/

Thx!

[brillout]

It's Vite that returns relative URLs when importing static assets, which makes sense: Vite doesn't know your domain name (nor does Vike btw).

Open Graph requires absolute URLs

That seems like a silly requirement? Relative URLs are ubiquitous. So it seems to be more of a Facebook quirk?

Are you sure it doesn't actually work? It could just be a wrong warning.

Note that vite.dev (and probably a lot of other websites too) uses a relative URL for their preview image, so I presume relative URLs work just fine.

(You can also re-create full URLs manually yourself, although I would go down that path unless I'm 100% sure it's really required.)

[brillout]

Actually, I was wrong: vite.dev uses an absolute URL for their preview image.

I'm still surprised though. Are you sure URLs are required to be absolute?

[enri90]

Yes, it does seem like a strange requirement, but I assume Facebook (and similar platforms) prefer absolute URLs to avoid having to resolve the domain on their side every time. I also suspect that value is cached on their end, so having a fully qualified URL makes it easier for them to handle.

To resolve it, I passed the image as an absolute URL in +config, and that solved the issue.

[brillout]

To resolve it, I passed the image as an absolute URL in +config, and that solved the issue.

Labeling this as the answer.

Not sure how Vike could improve the DX here 🤔 I wonder whether other Vite-based frameworks have a better DX 👀