DEV Community

How can I fix the post's cover image on social media

I am designing my own post's cover images and adding them using the cover_image metadata attribute.

In the question mark help section, It says The best size is 1000 x 420. This works perfectly on dev.to but when you share the post on Facebook, Linkedin, or Twitter.

That 1000 x 420 cover image gets cropped around the edges. Is there a way to fix that?

Discussion (3)

Collapse
emma profile image
Emma Goto ๐Ÿ™

I think DEV would need to create a feature to allow users to specify a Twitter-specific cover image, and then have that used when a DEV post is linked on Twitter.

Alternatively, when you create your DEV cover image, make sure that there's enough empty space on the left/right sides so that even if it crops, it looks fine.

Collapse
bassemmohamed profile image
Bassem Ibrahim๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‡ช๐Ÿ‡ฌ Author

I did some googling, Found this: blog.hootsuite.com/social-media-im...

Facebook's recommended res is 1200 x 630
Dev.to's recommended res is 1000 x 420

I tried doing a cover image with FB's resolution with empty space around the borders. Adding the text only inside the Dev.to's res. It kinda works, But still doesn't really look good on dev. I think the best way like Emma Goto said, is to have different images for each platform.