I'm looking for a guide on how to specify images in HTML pages so that Mastodon and Bluesky posts linking to those pages have nicely formatted images in them

[j12t@j12t.social]

I'm looking for a guide on how to specify images in HTML pages so that Mastodon and Bluesky posts linking to those pages have nicely formatted images in them.

Twitter has <meta name="twitter:image" etc ... what's the equivalent for Mastodon and Bluesky? And Threads? And what are the best image sizes?

[jon@henshaw.social]

@j12t

Open Graph is all you need.

https://coywolf.com/guides/open-graph-twitter-card-image-optimization/

[j12t@j12t.social]

@jon I'm using that, and Bluesky pulls out an image, but the aspect ratio of that image appears to be all wrong, so Bsky crops it in weird ways. What I'm looking for is 1) a bluesky-specific OpenGraph tag -- like there is one for Twitter and 2) just what the heck is the aspect ratio supposed to be on Bsky?

[meduz@m.nintendojo.fr]

@j12t The most adopted standard for this is Open Graph (created by Facebook): https://ogp.me ; Mastodon and many others follow it, but I don’t know for Bluesky.

For image sizes, there is no standards, thou you can try or pick a lot of websites as example by checking their `og` HTML meta. If the pic size is too small, Mastodon might take the favicon instead and slightly change the presentation.

[j12t@j12t.social]

@meduz I know, I’m looking for somebody who says “I have done all those experiments and this is the best setup”