You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using vite-ssg and @vueuse/head to include OpenGraph config so that sharing our website's blog posts can show a different image, which is needs to be fully resolved at build time.
The basic problem is that Vite resolves dynamic images at runtime via Javascript as documented here, but crawlers don't have Javascript enabled when parsing your webpage, so the resulting image url is unresolved:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi, 👋
I'm using
vite-ssgand@vueuse/headto include OpenGraph config so that sharing our website's blog posts can show a different image, which is needs to be fully resolved at build time.The basic problem is that Vite resolves dynamic images at runtime via Javascript as documented here, but crawlers don't have Javascript enabled when parsing your webpage, so the resulting image url is unresolved:
Expected html
Resulting html with Javascript disabled
Question
I'm 100% sure this is a common problem other devs run into since it's a very basic need for anyone sharing links.
Can someone point me in the right direction on how to solve this problem? Any help is appreciated!
Beta Was this translation helpful? Give feedback.
All reactions