Coma Free logo Design |

Design an Amazing Default Website Image For Facebook

Updated: Jul 31, 2018

Last week's article I provided you with an awesome formula for creating rich media to optimize your website content with Twitter Cards, now we tackle Facebook.

Ever share your website on Facebook only to have their crawler scrape random photos that you don't want to use as your contents preview, or even worse the image(s) that are generated aren't visually optimized?

Don't fret, there are a few things that you can do to create a default image that best represents your website and provides an engaging Facebook experience. 

To keep this post short and sweet I am going to focus on what worked for me to produce a clear crisp default image.

With regard to the code variables, I will point you to the open graph markup documentation so you can format your content with the proper tags for the URL you want to share.

After some research and experimentation with various images sizes, I came to the conclusion that the optimal dimensions of 1200x628 or 630 pixels are the way to go for high-resolution devices with the aspect ratio for images being the same across desktop and mobile News Feed.

Here are the steps I took to create an optimized default website preview image for Facebook. (Steps 1 & 5 for me).

1. Utilize your favorite design software, i.e. Adobe Photoshop, Illustrator, Elements, Coral Pro etc. If you do not have access to professional software you can find something online like and use custom dimensions to create your image.

2. Create your default image using Facebook's recommended image size: 1,200 x 628 pixels for clicks to website with an Image ratio: 1.9:1 located in the Ads guide.

3. Head on over to Facebook for developers open graph markup documentation page:  and do a little research to get it just right.

4. Put appropriate open graph into your HTML declaration and then test your URL with the sharing debugger / Object debugger.

5. For Wix users, it is a matter of simply crafting an image with the proper dimensions, accessing your editor's site managers social section and uploading your Facebook share image. Be creative and remember, you can rotate these images to keep things dynamic.

Below is a default image example I created for my website.

Like on Facebook.

See #design #seo related posts.