🐛 The bug

Description & root cause

(? related to encodeURIComponent() or similar ?)

The properties' values passed to defineOgImage are encoded in the image URL as long as not exceeding 200 chars.
Some characters are breaking image generation:

• # throwing
• \ using another template i.e. og-image component (the "BlogPost" template I had already ejected in my case ⇒ reproducible in DevTools) or maybe throwing otherwise?
• ? throwing (?) at least showing a No OG Image Defined in DevTools
• eventually some more chars (not tested):
  • maybe special chars with byte value < 32 when provided by a buffer/byte-stream
  • and potentially other Unicode "formatting/combining" codepoints...

Reproduction

in the DevTools panel

1. open the "OgImage" view
2. open the "Debug" panel
3. select the "OgImageProps" tab
4. edit the (JSON) props directly there and press enter

in the Nuxt App code

Call the defineOgImage(...) using invalid chars like so:

const [ogImagePath] = defineOgImage("MyOgImageTemplate", { title: "Some illegal chars here # ? \" });

Environment

• Nuxt v4
• Nuxt-Content v3.12.0
• Nuxt-SEO v4.0.2 %rarr; Nuxt-Og-Image v6.0.0
• PNPM: 10.32.0 (latest)
• Node: 24.14.0

🛠️ To reproduce

see above

🌈 Expected behavior

• Sanitize the props values used to generate the og-image url
  and/or
• Switch to the short hash-based URL format whenever required/possible (e.g. throwing url)

Notes:

• in particular when using nuxt generate to publish a static Nuxt web page, it would be nice to have an option allowing the short hash based format by default (using import.meta.prerender test ?)

• The modification of a prop value is changing the encoded url (as per documentation about the cache), which may not be suitable in some case: for example when fixing/linting prop values (remove 2 spaces in a row, capitalize etc.) without modifying the "real content", in particular when the og-image has already been published.

• Also: the "encoding" may generate a string which is longer than the input value, thus making the testing of generated URL potentially harder: some og-image-url will be shortened sooner, other later...

ℹ️ Additional context

see Documentation e.g. Performance → Reduce URL Size

Interestingly, a (e.g. "title") prop value like "--€œ™%08%0A--" generates almost the same URL as a prop value of "~LS3igqzFk-KEoiUwOCUwQS0t":

• "--€œ™%08%0A--"  ⇒  ~LS3igqzFk-KEoiUwOCUwQS0t
• "~LS3igqzFk-KEoiUwOCUwQS0t"  ⇒  ~~LS3igqzFk-KEoiUwOCUwQS0t

BTW
@harlan-zw : I really appreciate your module and the new DevTools panels! Great job! And many thanks for your efforts!