<p></p>
<p dir="auto">Every page has an <a href="https://ogp.me/#metadata" rel="nofollow">Open Graph preview</a> that includes the OpenStreetMap logo as the <code class="notranslate">og:image</code>. 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 <code class="notranslate">og:image</code> tag until we’re able to fill it in with something more meaningful for <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="743409093" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2965" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2965/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2965">#2965</a>.</p>
<p dir="auto">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.)</p>
<p dir="auto">It’s not at all uncommon for sites to omit <code class="notranslate">og:image</code> – 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?</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a href="https://www.opengraphpreview.xyz/open-graph/https%3A%2F%2Fwww.openstreetmap.org%2Fnode%2F3815077900" rel="nofollow">Open Graph Preview</a> has mockups of more websites.</p>
<h3 dir="auto">Discord</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249313208-a8664d9c-4f23-4a11-a8a8-778fe6903513.png"><img src="https://user-images.githubusercontent.com/1231218/249313208-a8664d9c-4f23-4a11-a8a8-778fe6903513.png" width="520" alt="Discord" style="max-width: 100%;"></a>
<h3 dir="auto">Discourse</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249311967-0d51b936-c3b8-4573-ab4d-89f072ed0e89.png"><img src="https://user-images.githubusercontent.com/1231218/249311967-0d51b936-c3b8-4573-ab4d-89f072ed0e89.png" width="704" alt="Discourse" style="max-width: 100%;"></a>
<h3 dir="auto">Facebook</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249314449-b2874127-8006-4036-99a7-84b8ec72050d.png"><img src="https://user-images.githubusercontent.com/1231218/249314449-b2874127-8006-4036-99a7-84b8ec72050d.png" width="500" alt="Facebook" style="max-width: 100%;"></a>
<p dir="auto">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.</p>
<h3 dir="auto">Mastodon</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249313682-fcd1eb2a-9db7-4dfa-94df-310390386e32.png"><img src="https://user-images.githubusercontent.com/1231218/249313682-fcd1eb2a-9db7-4dfa-94df-310390386e32.png" width="548" alt="Mastodon" style="max-width: 100%;"></a>
<h3 dir="auto">Slack</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249311571-6ceebc92-c36b-4123-8884-df018c1848b2.png"><img src="https://user-images.githubusercontent.com/1231218/249311571-6ceebc92-c36b-4123-8884-df018c1848b2.png" width="596" alt="Slack" style="max-width: 100%;"></a>
<h3 dir="auto">Telegram</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249316890-fbf52b05-9ea3-4843-b554-b16b792bd83a.png"><img width="334" alt="Telegram" src="https://user-images.githubusercontent.com/1231218/249316890-fbf52b05-9ea3-4843-b554-b16b792bd83a.png" style="max-width: 100%;"></a>
<h3 dir="auto">Twitter</h3>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/1231218/249314114-7f705460-4598-41fa-8933-abd34365580f.png"><img src="https://user-images.githubusercontent.com/1231218/249314114-7f705460-4598-41fa-8933-abd34365580f.png" width="514" alt="Twitter" style="max-width: 100%;"></a>
<h2 dir="auto">Implementation notes</h2>
<p dir="auto">This would be just a matter of removing these lines:</p>
<p dir="auto"><a href="https://github.com/openstreetmap/openstreetmap-website/blob/466de96a91ece362400ec7ffe73ed243f9ce3067/app/helpers/open_graph_helper.rb#L7-L8">https://github.com/openstreetmap/openstreetmap-website/blob/466de96a91ece362400ec7ffe73ed243f9ce3067/app/helpers/open_graph_helper.rb#L7-L8</a></p>
<p dir="auto">/ref <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="365161693" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2007" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2007/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2007">#2007</a></p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/4073">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLMNUOXGGWJ2GOLMMQLXNN7U5ANCNFSM6AAAAAAZWKQYNI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLKSQT4WBZW3BKYDC3XNN7U5A5CNFSM6AAAAAAZWKQYNKWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHGT6OQN4.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/4073</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/4073",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/4073",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>