When I share a hyperlink to my webpage, I want to show an image stored in Contentful.
My application (Angular) add a <meta property="og:image">
tag, and adds the url to the API. This works.
However, sharing a hyperlink through certain Social Media sets a limit on the size of the image. (often the image has to be smaller than 4MB) So I wanted to add query parameters to shrink the image, like this:
https://images.ctfassets.net/496uch1l97fc/1akWnopnAtXpX2OhOpHML8/1662f1aebf4a7dabeb5a151188498c26/Studeren__fotocredit__Keira_Burton_.jpg?fm=webp&w=1200&h=630
However, HTML automatically encodes it like this <meta property="og:image" content="https://images.ctfassets.net/496uch1l97fc/1akWnopnAtXpX2OhOpHML8/1662f1aebf4a7dabeb5a151188498c26/Studeren__fotocredit__Keira_Burton_.jpg?fm=webp&w=1200&h=630">
Every &
is converted to &
and the link doesn’t work anymore.
Has anyone every had this problem? Is there a way to retrieve smaller images from the API without adding ampersands?