Here's today's entry from the Season project diary.
I spent approximately 5 hours figuring out how to get iOS Messages to use a different
og:image than Facebook. I maintain a static site at https://share.seasonpods.com where each podcast season has an entry that will look like this: https://share.seasonpods.com/38.
These URLs are used when a user shares a season from inside the app. They use the OpenGraph meta tags to convey all sorts of information, primarily which image to display. Unfortunately, different services prefer different image formats. When sharing on Facebook a landscape image will look better and when sharing in an iOS Messages a square image is best, but these two services both pick read the
og:image meta tag. There's no
og:image:facebook tag separate from an
og:image:apple tag. So we have to use a trick.
The first part of the trick is to put two og:images in the html.
<meta property="og:image" content="https://season-artwork.s3.eu-west-2.amazonaws.com/a7/m9/i8/x4/landscape.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image" content="https://season-artwork.s3.eu-west-2.amazonaws.com/a7/m9/i8/x4/450_85.jpg" /> <meta property="og:image:width" content="450" /> <meta property="og:image:height" content="450" />
Facebook will now display the correct image (the landscape one).
Unfortunately, Messages will display both images side by side.
It burns the eyes!
So the next part of the trick is to get our server to deny Messages the first image. Doing this with nginx or Apache is probably pretty straightforward, but I'm serving images and all other static data with AWS S3 and nothing is ever straightforward with AWS.
Using Facebook's sharing debugger I figured out that Facebook's UserAgent string is
So I set up a rule in AWS S3 to only allow requests for the first image when
facebookexternalhit. This seemed to work. Requests from my
browser were denied and requests from Facebook worked as intended. But when I
shared a season via Messages I still got the two side by side images. What
gives? I suspected that maybe Messages was up to some monkey business so I set
up an endpoint that would just dump out the UserAgent for any incoming request,
pointed the og:image to that endpoint and shared another season via Messages. Lo
and behold. Here's the UserAgent string that came in.
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4 facebookexternalhit/1.1 Facebot Twitterbot/1.0
What's that towards the end if not
facebookexternalhit! I'm surprised that
GoogleBot isn't in there too. I ended up with a permissions policy that
- allows access for everyone
- denies access for any client with a UserAgent string that includes the substring "AppleWebKit".
And it that worked!
Half of the time waste today was around getting AWS to do what I wanted. After a while I learned that the best way to create AWS permissions policies is to the "AWS Policy generator". Once I started using that instead of hand editing the json it went pretty quickly.
So now my shares in messages looks like this:
And the same season share on Facebook look like this:
And on Twitter it looks ok too.