By Published on

Open Graph Image Size

Open Graph Image Size Example
Open Graph Image Size Example

The open graph image size will determine how your web page image displays when shared on social media.

I have found that 1200px x 630px seems to work best in most cases. This size displays well for social shares on..

  • LinkedIn
  • Facebook
  • X (Previously Twitter)
  • Slack
  • Threads

Explore

How to make OG Image correct size

I mainly use two methods to create the correct sized Open Graph images.

  • Crop to size.
  • Compose an image.

Crop to Size

Use a graphic design or photo editing software to crop the image to the correct size.

Compose an Image

Use a graphic design or photo editing software to create a canvas the correct size. Then, place your photos and other elements onto the canvas to compose your Open Graph image.

When finished creating the composition, export the image as either a .jpg, or .png file.

Testing

Use the Facebook Debug tool to test your image.

Open Graph Meta Tags

If your page is not displaying how you would like, check the following Meta Tags are present in the head section of your HTML. 

<meta property="og:title" content=" Put the Page Title here." />
<meta property="og:image" content="example.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Put Site Name here." />
<meta property="og:description" content="Put Page Description here." />
<meta property="og:url" content="Pur page URL here." />
<meta property="og:type" content="Put content type here. Example: Article" />

Template Driven Websites

Template driven page generators such as Publii already have the Open Graph Meta Tags programmed into their templates. If your template doesn't have these tags in the HTML, you can put them in using a code editor.