Improve social media share preview: title, description & image

Feature Requests
1

I am generally happy with the appearance of shares from iNaturalist to Discord and other social media platforms (e.g. Facebook) for a wide variety of URLs. I understand this is principally achieved through the use of Open Graph meta tags. Sharing a taxon page or an observation page, for example, works well, with meaningful titles & descriptions relating to the content, as well as an appropriate image.

However, I am somewhat frustrated by having to always manually delete previews from my shares whenever these tags only contain the barest minimum of information (just the site name & logo). So, for example, while the social media platform’s link preview for a search of your own observations is decent, the preview for a search of all observations is … underwhelming. Let me give you two example URLs.

For this use case, I am a “power user” who would like to see the mayflies found in April and discuss this with my friends on social media, and I know how to format a reasonably compact URL to do this, which is nice for bookmarking & sharing on social media. Entering this URL for my own observations produces a useful preview describing the content, giving it a title, and selecting a preview image (thumbnail of the 1st observation - normally the most recent, so not a bad choice):

https://www.inaturalist.org/observations/benarmstrong?taxon_name=Ephemeroptera&taxon_id=48011&month=4

image

However, I more often than not am sharing links that aren’t specifically from my own observations, as I can gain broader insight into the iNaturalist data by looking at all the observations in the geographic region, or across a project, etc. Therefore, if I change the above link to a search of all observations, not just my own (I am switching it to user_id=benarmstrong here simply to show a search with exactly the same results) I get a default title & default image for the preview that pretty much tell me nothing more than just reading the URL would tell me, i.e. “this is a link to some page on inaturalist.org”. Therefore, I need to make an extra effort to delete these whenever I share such a link, as it just adds “noise” to my post, and my link lacks the pizzazz and ease of use that comes from having a useful preview:

https://www.inaturalist.org/observations?user_id=benarmstrong&taxon_name=Ephemeroptera&taxon_id=48011&month=4

image

The culprit here is these two Open Graph tags, unsupported by any additional og: tags that would be preferred by social media sites, as they provide useful preview content (as in the previous example):

    <meta property="og:site_name" content="iNaturalist"/>
      <meta property="og:image" content="https://static.inaturalist.org/sites/1-shareable_image.png?1573071871"/>

By contrast, the good preview first example has these:

      <meta property="og:site_name" content="iNaturalist"/>
  <meta property="og:title" content="Observations by benarmstrong">
  <meta property="og:url" content="https://www.inaturalist.org/observations/benarmstrong?taxon_name=Ephemeroptera&amp;taxon_id=48011&amp;month=4"/>
  <meta property="og:description" content="benarmstrong&#39;s latest observations on iNaturalist">
      <meta property="og:image" content="https://static.inaturalist.org/photos/69127078/medium.jpeg?1587892661"/>

So if the same useful og:* tags could be provided here, that would be great! Or if not, then remove the not very useful existing tags (though that feels like a step backwards).

I’m sure there are other cases I’ve seen before that could use similar treatment, but even handling this one case would measurably improve the user experience sharing iNaturalist pages to social media platforms.

2

The reason there aren’t good Open Graph tags here is because there’s no reasonable and translatable way to summarize all the many things that could make an obs search URL unique, unless you think something like this is reasonable:

Observations between 2020-02-05 and 2020-06-01 of nudibranchs but not the genus Cuthona in California but not Los Angeles identified by Ken-ichi and observed by Tony where the rank is between subfamily and tribe ordered by date observed descending that have not been reviewed by me that have CC0-licensed photos in My Special Project"…

etc., i.e. something practically unreadable in English and almost impossible to translate properly into other languages (complexity of translation seems to be something like [number of language] * [number of variables]). I can set og:title to “Observations” and maybe set a reasonable description for some of the more common search cases, but there will still be a lot of cases where a really good description isn’t possible.

3

i don’t think it’s necessary to handle every variant of what could be queried, but it might be nice for that page to be able to handle at least certain parameters like user, taxon, and place: [user’s] observations [of taxon] [in place].

3 Likes
4

Well, obs search now has og:title, og:type, and og:description, but for reasons I’ve yet to determine neither the Facebook Sharing Debugger or the Twitter card validator are picking up the description.

2 Likes
5

That’s a bit of an improvement:

image

The og:description isn’t shown on Discord either, though.

I notice in my “good” example it’s a twitter gallery card, but the observation search is a twitter summary card. Maybe for the gallery card, they accept og:description but the summary card needs a twitter:description instead?

I still feel showing the first image is more interesting/informative than just the iNat logo, as well as consistent with how the user’s observation page is previewed.

6

Do you have any idea why? I’m not sure what’s up with that. I don’t think it can be related to the Twitter tags since, theoretically, both your Discord parser and Facebook’s should just ignore those.

I agree the image would be nice, but we’re trying to avoid actually performing a query there, since the page already runs the same query in Javascript when a client running Javascript loads that page. Some scrapers who look at those og tags run JS, so it’s hard to target the ones that don’t, but I’m open to suggestions. There’s also the issue of dynamic content, which seems like more of an issue on obs search than on obs detail.

2 Likes
7

I’ll mess with it using a mock-up and get back to you.

8

With this minimal mockup carrying just the bare bones of the page and the meta tags, it works!

https://syn.theti.ca/inat/Observations-iNaturalist.html

On Discord, this yields the desired result:

image

I’m stumped.

9

I don’t use Twitter, but FB makes links clunky to share. It seems to have its own in between layer, where FB decides, what and how to show.
For example if I share a link to a blog post, using the URL, FB decides which photo to show. I have to share the chosen photo first, then add the URL.

10

@benarmstrong, aren’t you the one writing that Discord scraper? If so, can you determine why your scraper isn’t picking up the og:description? I understand how to write the headers so Facebook will get them. What I don’t understand is why Facebook isn’t getting the og:description at https://www.inaturalist.org/observations, because I don’t have insight into how Facebook is reading the tags, but you have insight into how your own scraper is reading the tags, correct?

@dianastuder, Facebook definitely picks and chooses what to show depending on layout constraints and other mysterious internal priorities, but web page developers can at least express preferences for what image to show, what title to show, etc., which is what we do on the observation detail pages and what we’re trying to do on observations search.

1 Like
11

if, instead of viewing the source code meta tags through my browser’s developer tools, i use curl to get the html code, this is what i see in the relevant tags:

<meta property="og:site_name" content="iNaturalist"/>
<meta property="og:type" content="website"/>
<meta content="Observations" property="og:title" />
<meta property="og:description" />
<meta content="https://www.inaturalist.org/observations?user_id=kueda" property="og:url" />
<meta property="og:image" content="https://static.inaturalist.org/sites/1-shareable_image.png?1573071871"/>
<meta content="summary" name="twitter:card" />

note that the og:description tag is missing contents. i suppose the contents must be getting populated later, but then maybe that’s too late for the social media scrapers.

2 Likes
12

Theeeeere we go. I was generating the description when Accept: text/html but not when Accept: */*. Thanks!

3 Likes
13

No, Discord produces the preview entirely on its own. I wish I could have the bot selectively preview only iNat links but that’s not how it works … it’s an all or nothing affair, which means if I turned off previews and let the bot handle them, we’d lose automatic previews of everything else: YouTube, Wikipedia, etc. Therefore, we just let Discord do it’s thing with iNat links, and if the bot also produces output, it is in a separate message with other info gained through the API.

1 Like
14

Ok, I deployed the update and I’m now seeing the og:description in the Facebook URL preview tool.

6 Likes
15

That works on Discord, too. Thanks!

Screenshot_20200718-141612~2
Screenshot_20200718-141612~21078Ă—492 70.8 KB

2 Likes
16

Checking in on some feature requests that were marked solved but are still open. Is this one good to be closed?

2 Likes
17

Yep. Close it.

1 Like