search

itchio / itch.io

:bug: Public itch.io issues tracker and documentation - use support instead for private information!
https://itch.io/support
240 stars 25 forks source link

Preview image of sharing a devlog post on Discord is always the header #1002

Open bjorn opened 5 years ago

bjorn commented 5 years ago

I usually attach a screenshot to my devlogs whenever I can, because it makes the preview when sharing them on Twitter or Telegram more interesting. However, for some reason Discord is unable to pick the right image, and the header image always shows up:

Screenshot from 2019-06-20 21-46-30

Since Discord is usually able to show the right image, I wonder if this is something that could be fixed on the itch.io side.

leafo commented 5 years ago

I think Discord is defaulting to the largest image on the page since we don't specify one to use. Just verifying, you would prefer a screenshot from the post instead of the cover image of the project?

bjorn commented 5 years ago

Just verifying, you would prefer a screenshot from the post instead of the cover image of the project?

That would definitely make my "Announcements" channel more interesting to look at. :-)

Just compare how the link preview looks on Twitter or Telegram:

https://twitter.com/JoaoBapt/status/1141791562730528770

Screenshot from 2019-06-20 22-24-56

They seem to be able to pick the right cover image just fine. I see you have the following in your HTML:

<meta content="https://img.itch.zone/aW1nLzIyMTQxNTQucG5n/original/7usjzm.png" name="twitter:image">

Maybe there is a less Twitter-specific approach to this?

leafo commented 5 years ago

I took a closer look and it's apparently using the cover image for your project, which you happened to upload that really wide banner for. Not sure if that's intentional on your end.

bjorn commented 5 years ago

I took a closer look and it's apparently using the cover image for your project, which you happened to upload that really wide banner for. Not sure if that's intentional on your end.

I had the banner image lying around and it works fine as a cover image on itch.io, right? But regardless of what I have uploaded as cover image, I do not expect it to get used in the preview for a devlog post if I have added a more contextual image to the devlog post.

Twitter knows what's the right contextual image to show because you provided it with a twitter:image meta-tag, which links to the image I've added to the devlog. Evidently, Discord does not look for this meta-information, so I wondered if there may be a less proprietary alternative.

After some Googling I found this page, which explains that Twitter will also accept og:image (and og:description), which is likely more widely supported.

bjorn commented 5 years ago

@leafo Sorry to bother you, but what is holding this up?

bjorn commented 3 years ago

One year later and whenever I share a link to an update on Discord it's still unable to tell what is the right image. Switching from Twitter-specific metadata to Open Graph should be almost trivial. Can we please get this fixed?

According to Twitters documentation:

When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.

So the meta-tags can probably just be renamed.