I have a Django application hosted on Heroku, which provides event details pages. Each of these pages has Open Graph meta tags set up to enable rich previews when the URLs are shared on platforms like Facebook and iMessage.
However, while Facebook is able to recognize and display all the information correctly (title, description, and image), iMessage is showing only the title. Interestingly, the description and the image are completely ignored by iMessage.
Here's the template with the relevant Open Graph meta tags:
<head>
<meta property="og:title" content="{{ name }}">
<meta property="og:description" content="{{ date }}">
<meta property="og:image" content="{{ posterURL }}">
<meta property="og:url" content="{{ request.build_absolute_uri }}">
<meta property="og:type" content="website">
Additional details:
The URL for the image is from Firebase Storage, and is URL-encoded. However, it works fine on Facebook and directly in browsers. When testing the link on Chrome, the debugger shows the og:description correctly, but iMessage ignores it. The URL was provided in the format: https://firebasestorage.googleapis.com:443/v0/b/moonlight-f2113.appspot.com/o/... and works when opened directly. I've tried decoding the URL using JS unquote but it results in a non-working link. Any ideas on why iMessage would ignore both the og:description and og:image while Facebook doesn't, and potential fixes?
Also note, I also tried doing "og:image:secure_url" and that did not work either.