Remove logo from Open Graph previews

[1ec5]

Every page has an Open Graph preview that includes the OpenStreetMap logo as the og:image. Most sites set this meta tag to an image that represents the specific object, not the site as a whole. When a page-specific image is unavailable, they just omit the meta tag. OSM should also omit the og:image tag until we’re able to fill it in with something more meaningful for #2965.

I like the OSM logo. However, using it as the object’s image causes some Open Graph clients to display the OSM page less than ideally. Discourse and Slack already include the favicon automatically, making the image redundant. Slack displays the image at full size, dominating the preview as if it’s the most important element. (OSMUS Slack specifically disabled previews for anything on openstreetmap.org in 2016 because it got so obnoxious.)

It’s not at all uncommon for sites to omit og:image – the OSM Wiki omits it, for example. If we do need to keep the logo for branding reasons, can we at least shrink it to match a more typical size in link previews?

Screenshots

Open Graph Preview has mockups of more websites.

Discord

Discourse

Facebook

In some contexts, Facebook shows a variation of the preview that stretches the image to be as wide as the preview, which causes the logo to look quite blurry.

Mastodon

Slack

Telegram

Twitter

Implementation notes

This would be just a matter of removing these lines:

https://github.com/openstreetmap/openstreetmap-website/blob/466de96a91ece362400ec7ffe73ed243f9ce3067/app/helpers/open_graph_helper.rb#L7-L8

/ref #2007

[tomhughes]

This is basically a duplicate of #2007, #2965 and probably others.

The current tags were added because people asked for them and I'm reluctant to remove them entirely.

Obviously if we could provide a better image in some cases that would be great but it's hard to achieve.

[tomhughes]

Specifically https://github.com/openstreetmap/iD/issues/1644 was the trigger for the image.

[1ec5]

Specifically openstreetmap/iD#1644 was the trigger for the image.

Thank you for the context. 👍 It looks like the image in https://github.com/openstreetmap/iD/issues/1644#issue-17074036 broke at some point, but based on the description in #446, the issue seems to have been specific to Facebook’s default presentation. In the absence of an og:image, Facebook apparently searched the page for another largeish image and found the ad for State of the Map Birmingham that was added in #268. The ad was removed in #476, but I think the current banner mechanism would still be affected, since it’s static content.

Stack Overflow is awash in questions about how to hide specific images from Facebook’s link sharing function, but at a glance, all the answers sound like tagging for the renderer.

[1ec5]

The ad was removed in #476, but I think the current banner mechanism would still be affected, since it’s static content.

Does the welcome/event banner need to be static HTML? The only benefits I can see are that it also appears to users with JavaScript disabled (who get an inoperable slippy map anyways) and potentially helps a little with SEO, maybe. But if we convert it to a little bit of JavaScript that inserts it into the DOM, then any image in an event banner will be invisible to Open Graph clients, which only look at static HTML.