1. Home
  2. Articles
  3. Web Design
  4. Social Media
  5. Facebook
  6. Open Graph Meta Image Tags
Read about og:image tags

Open Graph Meta Image Tags

Published:

Share

Description

Testing in the Facebook open graph share validator, an error came up for an image that was missing on the website. The error message stated that the image dimensions were missing for that image. There was also mention of improved performance by providing the og:image:width and og:image:height tags.

Article

After doing some testing with the Facebook Developer Sharing Debugger (Facebook Open Graph Validator) and checking the specification on the Open Graph website, I settled on the following as my standard open graph meta tags.

// 1x1 Ratio
<meta property="og:image" content="image-1x1.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">

// 4x3 Ratio
<meta property="og:image" content="image-4x3.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="900">

// 1.91 x 1 Ratio
<meta property="og:image" content="image-191x1.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

// 16 x 9 Ratio
<meta property="og:image" content="image-16x9.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">

This should cover all current image formats used by social media sites and search engines with only one minor exception. LinkedIn uses a 1.91x1 image with 1200px by 627px dimensions.

Reference Links:

Author

Profile Picture of Bryan Myers - The Web Guy

Bryan Myers - "The Web Guy"

Advanced Digital Channel Engineer

Tags

  1. Articles discussing web related topics and technologies.Articles
  2. Articles about Web Design.Web Design
  3. Articles covering integration with social media websites.Social Media
  4. Articles about integrating Facebook website features.Facebook

Related Articles

Go Back