Hey guys, not sure if I'm posting this in the right place or not but I'll put it out there and if it's not quite right, please let me know.
I am trying to be able to send SMS messages with links that contain OpenGraph preview images which will load in the iOS "Messages" application and will display the thumbnail without the user having to press [Tap To Load Preview] first... How can this be achieved?
For this, I am sending a text SMS message to an iPhone X which is running iOS 10 and opened with the Messages app.
The text message body contains a URL that points to a resource (a HTML web page) whose body contains OpenGraph metadata with an og:image tag. Eg:
<meta property="og:image" content="https://www.apple.com/v/iphone/home/t/images/home/og.png?201610171354" />For presentation purposes, we are trying to make it so that the image will load first and immediately, without the user having to tap the button in order to to see it...
Expected Behavior:
https://i.stack.imgur.com/XRdAx.png
Actual Behavior:
https://i.stack.imgur.com/OxLYW.png
As a side note, on the Android clients we have tested, where OpenGraph is supported the image will display instantly without the user being prompted to do anything. The same is true for any other OpenGraph supported application tested, including Facebook.
For reference, here are some of the methods I've tested to try to get this working for us (as well as combinations therein):
- Tried serving the image directly with no intermediate redirects, also tried with redirects.
- Tried serving PNG and JPG images.
- Tried serving the images from URL's containing no more than 20 characters where the URL has the ".jpg" and ".png" parameters and no additional GET parameters. Also tried when the extensions aren't part of the link.
- Tried serving the image from the server by referencing its IP directly instead of using a public domain name.
- Tried with GET parameters as well, with random numbers to clarify a totally unique URL each time.
- Tried serving the image from HTTPS and HTTP links.
- Tried serving with dynamically generated images, which should entail a brief delay of some milliseconds while the image is rendered and served.
- Tried an enforced sleep in the script that responds to the URL page as well as for the image request to induce an intentional delay of some milliseconds and experimented with various settings for that.
- Tried serving the image with a variety of different dimensions, portrait and landscape as well as extremely large and extremely small and other variants between (`50x50, 60x50`, etc and up).
- Always ensured that the image is <1 MB in size, but also tested larger images anyway to see if they would work.
- Tried serving images from the same canonical source that the phone or Message service might already 'recognise' as 'trusted' as we have already loaded the preview from those those in the past (testing if such a feature exists, which it probably doesn't).
- Tried specifically, all suggestions as noted Apple Technical Note "Best Practices for Link Previews in Messages" see https://developer.apple.com/library/content/technotes/tn2444/_index.html
- Tried moving the OG tags outside of the <head> of the page.
- Tried stripping of the page of all tags except for pertinent og:image tags.
- Tried removing HTTP headers for the response to the GET to the image resource so that just the image itself is returned. Tried then adding back the `Content-Type` header alone.
- Tried priming the request to the image to respond with various HTTP specification cache-invalidating related headers..
- Tried sending from various phone numbers US and Australian, also tried changing the "From" field for the SMS message itself to strings like "VERIZON", "Verizon", "Telstra", "APPLE", "Apple", "Facebook", "Uber", "China".
- Tried sending the messages from handheld phone as well as from the Twilio Messaging API service.
None of the above work for an iPhone X.
Any advice?
