Support further social card formats

[ben519]

Sharing my content on platforms like Reddit, Twitter, and LinkedIn is really important to my site's traffic. And one thing I've learned from YouTube is that you need to have an enticing thumbnail for people to actually click on your post. It's a big deal - not a small one.

That said, here's what my content looks like shared on various platforms.

In my opinion, it's a bit lackluster. How can I make these images better, so more people click? What are you all doing for this?

[squidfunk]

Thanks for sharing your experiences! As you have noticed, social cards are currently produced in a single format – I'd be curious to learn what other formats from your and other users perspectives would be good to support, as I'm planning to extend the social cards plugin to allow for completely flexible layouts. This would also allow for producing arbitrary formats.

[ben519]

The main thing I'd like to see improved is the preview layout on Reddit which gets cutoff (I get a lot of traffic from Reddit). Other than that, just the ability to customize my images (e.g. replacing the default image my own PNG file). To be honest, I'm no expert on this topic so I'm not sure what formats should be supported.

Appreciate your help and quick reply as always!

[squidfunk]

Got it. I currently can't put an estimate on it, but when I find some time, I'll research other formats and see how to improve rendering for them as part of an improved social cards plugin. Can't put an estimate on it right now, but should happen this year!

In the meantime, if somebody else wants to share some research or experiences, that'll be awesome!

[weyCC81]

LinkedIn
Example from mkdocs-material:

• Size: 109 x 73 more or less 109 x 82 (4:3 ratio)

Validator: https://www.linkedin.com/post-inspector/

• Publish date: No publication date found
• Warning: The description should be at least 100 characters long.

Size: minimum of 360 x 640 pixels and a maximum of 2430 x 4320 (maximum 4:5 ratio)
Source: https://www.linkedin.com/help/lms/answer/a1689427
Source: https://www.linkedin.com/help/linkedin/answer/a566445

Microsoft Teams
Example from mkdocs-material:

• Size: 120 x 96 (5:4 ratio) more or less 120 x 90 (4:3 ratio)

Size (wrong): 1280 x 720 or 1920 x 1080 in pixels (which are 16:9 aspect ratio)
Source: https://support.microsoft.com/en-au/office/image-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d

Reddit
Example from mkdocs-material: N/A

Size: 400 x 300 (4:3 ratio)
Source: https://www.reddit.com/r/RedditforBusiness/comments/8cw37f/question_about_thumbnail_image_size/
Site: 400px x 300px or aspect ratio of 4:3
Source: https://admiral.media/resources/reddit/

Twitter
Example from mkdocs-material: N/A

Size: Links with an image: 800 x 418 pixels (16:9 --> 400:209)
Source: https://x.com/buffer/status/1415393473096790019?lang=de
#::text=The%20thumbnail%20picture%20should%20be,size%20shouldn%27t%20exceed%201MB.
Size: Website card: 800 x 418 pixels
Source: https://skedsocial.com/blog/twitter-post-size-guide

Size: Images for summary cards should have an aspect ratio of 2:1, between 120 x 90 (4:3) and 120 x 120 pixels (1:1)
Source: https://influencermarketinghub.com/twitter-image-size/

Summary
In summary, I would say if we have a padding option inside "Basic social cards" this would already help.
If then later on "Custom cards" would support to optimize the image per platform, this would be perfect.

mkdocs-material
Size: 1200 x 630 more or less 1200 x 675 (~16:9 ratio)

[squidfunk]

1200 x 630 is a best practice format that works for a lot of platforms, but not for all of them, yes. We'll explore adding more templates with alternate formats in the future. You can already create your own with custom social cards ☺️

[SebStange]

While running into similar issues, it seems the general issue can be solved by generating and referencing an additional image with square dimensions. I found this useful writeup / test here:

https://doinwp.com/og-image-size-and-requirements/

After a brief look into the current implementation, I am not seeing an easy way for me to implement this though. So any help / directions would be appreciated.