Improve social media preview for individual observation photos

[benarmstrong]

It sometimes happens that the iNaturalist photo you want to share to a social media platform isn’t the cover photo of the observation. In that case, if iNaturalist were to set the Open Graph meta tags og:title, og:description, og:image, and og:url for individual image pages, then the social media platform would automatically preview the image when the URL for the image page is shared instead of falling back to og:site_name and og:image for the site. Would you please make that happen?

This is related to my earlier request about Open Graph for searches, and which was implemented. Thanks very much for that! https://forum.inaturalist.org/t/improve-social-media-share-preview-title-description-image/13450

Here is a humorous interaction with an observation that previews badly on Discord because these tags are missing:

Here are my initial thoughts about the content of the tags:

• The og:url tag should contain the page url: https://www.inaturalist.org/photos/39689854
• The og:image tag should contain the image url: https://static.inaturalist.org/photos/39689854/medium.jpg?1558614386 (or whatever size is appropriate - cf. the observation page tags which set it to large.jpg, so maybe that should be used here for consistency)
• The og:title field should summarize what the photo is: Megaptera novaeangliae (Humpback Whale), © Oscar Johnson, some rights reserved (CC BY-NC-ND)
• The og:description should contain the observer’s description.

Interestingly, an Inspect of the page shows the observation description supplied by the observer is embedded in the page, but it is not used in the visible content of the page.

Just to remind you: Dronefly bot is not involved at all in this! The Discord platform itself reads the URL, extracts any meta tags it can find, and generates the preview from those. That’s similar to what happens for shares of non-cover-images to other social platforms like Facebook and Twitter.

For comparison, sharing an observation works fine because appropriate og:* tags are already filled in. The observation for the photo above, however, sets og:image to the not particularly funny cover image that best represents the observation for ID purposes, as it ought to: https://www.inaturalist.org/observations/25611506

Inspecting the page shows these og:* tags are set on the observation:

<meta content="Megaptera novaeangliae (Humpback Whale)" property="og:title">
<meta content="https://static.inaturalist.org/photos/39689848/large.jpg?1558614378" property="og:image">
<meta content="https://www.inaturalist.org/observations/25611506" property="og:url">
<meta content="Megaptera novaeangliae (Humpback Whale) from Monterey Bay, Monterey County, CA, USA on October 13, 2006 at 12:53 PM by Oscar Johnson.  One of the coolest experiences I've had with a Humpback. This individual approached our boat, whi..." property="og:description">

Sadly, the preview would miss the funny story about people getting sprayed by whale snot, and following the link would only take you to the photo page. The user would have to click one more time to get to the user’s description, but that’s a whole different issue.

[benarmstrong]

I played with various places to put all the information (taxon name, place, observer, description, attribution) and there really isn’t that much space on each of the platforms: Discord has the most space, Twitter less than that, and Facebook the least of all. Therefore, I gave up trying to find a place to fit the attribution.

I found if I change the twitter.card content from image to summary_large_image, it includes a description in the preview both on the Twitter & Discord platforms (though twitter wants this to be in twitter:description, whereas Discord takes it from og:description).

Here’s my mockup: https://syn.theti.ca/inat/test.html

It looks like this on Discord:

It looks like this with the Twitter card validator:

And it looks like this with the Facebook preview validator: