0

I have an image stored in Firebase Storage. I used the link for my website's meta og:image tag, but it doesn't appear on the preview for WhatsApp or Facebook.

It seems like the %2F characters are being replaced with %252F.

How can I get around this issue without changing the name of the image?

This image works (doesn't have %2F).

This image doesn't work (has %2F).

Edward Cahyadi
  • 450
  • 5
  • 9

2 Answers2

0

The %2F character sequence is the URL encoding of a / (slack) character. It is used in URLs where having a literal / is not allowed, or where it cause problems/misinterpretation of the value.

Whenever a URL encoding (or any other encoding) is applies, the result should be decoded before interpreting it as an original value. That steps seems to be be missing here, so I suggest decoding the encoded URL in the place where you can't access it.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Since the encoding and decoding process happens on WhatsApp / Facebook, I cannot affect this. So I guess the only solution is to save the image in the root folder of the Firebase Storage so that the `%2F` character doesn't appear in the name of the file. – Edward Cahyadi Jun 07 '23 at 02:02
0

After some investigation, it turns out that the problem was that the image size was too big (~500kb). Once I got it down to ~150kb, the image preview worked.

I also used opengraph.xyz to check the image URL generated. Yesterday I saw %2F characters being replaced with %252F. But today they weren't. I'm not sure what happened. I did use Facebook's debugger tool to scrape the site manually. Perhaps that helped.

Edward Cahyadi
  • 450
  • 5
  • 9