Twitter card images crop to square

Using a link to an asset in the open graph image field works great - for Facebook. But when I test my page in the Twitter card validator, or upload a link to Twitter, it crops the wide image to a square.

I think that’s because Webflow is using code for Twitter’s default square format rather than the large Twitter card code?

Either way, can this be fixed? Since we can only upload one open graph image (and Facebook’s recommended size is 1200 x 630 (widescreen), can the large Twitted card code be used?

Example: On my own site with the large Twitter card code, I get this (what I want) …

But in Webflow, this image gets cropped to a square (this makes me sad) …

Any luck with it as yet? I was looking for a solution but got nothing.

Yes! For collections you can insert your own Twitter code and have the CMS dynamically populate it with an image from one of your fields. Just go to you collections page settings. This is what I put in the custom code area and it works great. You can then test it with the Twitter validator after publishing your post. I found that a 2:1 ratio image works pretty well for both Twitter and Facebook.

I haven’t tried it for regular pages though - Since they don’t use dynamic data, you can’t populate them with a field from a collection so you might have to add custom code with an image permalink for each page. :frowning:

2 Likes