What are OG Open Graph Tags for Facebook?



ID #1107
Last update: 2020-06-30 10:26


To make sure, your blog posts are displayed correctly on Facebook, setting the right open graph tags (OG) in your blog posts meta data is essential! But what are open graph tags for Facebook and why are they important?

Facebook introduced open graph meta tags in 2010, to make it easier to post website links and share them with your friends and followers on Facebook. Open Graph tags are parameters in your website’s HTML which tell Facebook which image, title, or description to display in an automatic link preview. This makes it possible for you to simply copy-paste a link in your status update and have it displayed neatly in the common format.

Why do I need Open Graph Tags for Facebook?

Facebook has changed its policy for posting link posts via plugins or web applications. Facebook no longer displays the featured or selected image for your blog post by default, but only images defined in the Open Graph (OG) Meta Tags of your blog post. If you have not defined any OG Meta Tags in the <header> element of your blog post’s code, Facebook displays a random image from your blog post or blog site. Furthermore, if you have defined an image in your blog post OG Meta Tags that do not meet the image size requirements, Facebook also does not display your selected image, but a random image.
Both will result in a link preview displaying the header image of a website, the logo of a brand, or no image at all. Therefore, you should always make sure that your image meets the image size requirements for Facebook.

What are the important Open Graph (OG) Tags for Facebook?

To provide all necessary information to turn your website link in a link preview with the correct image, title, and description, you should provide the most basic and most important open graph tags.

  • og:image
  • og:image:width
  • og:image:height
  • og:image:alt
  • og:image:type
  • og:title
  • og:description
  • og:locale

Some Open Graph tags are post specific and are set automatically with enabled settings in Blog2Social and require no configuration:

  • og:type
  • og:article:published_time
  • og:article:modified_time
  • og:article:tag

The open graph tag: og:image

The og:image tag is the most important open graph tags or at least the most obvious if not set correctly. As explained above this og tag is responsible for the correct image information. Additionally, information about width and height of the image are provided with the tags og:image:width and og:image:height. The Open Graph tag og:image:alt specifies the alt description of the featured image used. The alt tag or alternate tag is used by screen readers, social media networks and search engines in case featured images cannot be displayed. The Open Graph tag og:image:alt contains the alternate text short description of the image, which can be defined in the WordPress media gallery. If Facebook cannot find this parameter when it crawls your website’s code, you might end up with a random image displayed in your preview.

Example:
<meta property="og:image" content="https://www.blog2social.com/de/blog/wp-content/uploads/2018/03/blog2social-webapp-beitragsbild.png" />
<meta property="og:image:width" content="1000"/>
<meta property="og:image:height" content="1000"/>
<meta property="og:image:type" content="image/jpeg"/>
<meta property="og:image:alt" content="Blog2Social"/>

The open graph tag: og:title

Every good Facebook post needs a great title, which followers want to click. This is exactly what the og:title tag is for. It is providing all necessary information for Facebook  to display your blog posts headline in bold letters within your automatic link preview.

Example:
<meta property=”og:title” content=”A Complete Guide To Social Media Sharing” />

The open graph tag: og:description

Apart from the title of your post, a short and interesting description of what your blog post is all about is important to trigger engagement. The og:description tag defines what your followers will see below your blog posts title in the Facebook link preview.

Tip: Keep it under 200 characters but make it sound interesting to catch your reader’s attention.

Example:
<meta property=”og:description” content=”Social media automation tools can boost your efficiency.” />

How do I implement Open Graph Tags for Facebook?

There are different ways and tools to implement open graph tags in the meta data of your website. The easiest and most efficient way to do so when sharing your blog posts to Facebook is to use the social media automation plugin Blog2Social.

With Blog2Social you can share, schedule and auto post your blog post to social media and select a featured image or any image of your blog post or media library to be displayed with your link post. Blog2Social will automatically write the required parameter in the OG Meta Tags of your blog post so that your selected image will be displayed in your Facebook link post.

To do so click on the image displayed in your Blog2Social editor and select your desired image.

The same applies for defining the og:title and og: description tag for your blog posts. Simply click into the respective fields in your Blog2Social post preview and type in your intriguing title and description to be displayed on your Facebook profile, page, or group feed.

If you have defined your own OG meta tags, you can easily deactivate this Blog2Social feature. To do so, go to your Blog2Social settings - select the tab “Social Meta Data” and untick the box “ Add Open Graph meta data to your site's section, Facebook and other social networks use this data when your pages are shared.”

Patch: Your WordPress installation -> Blog2Social -> Settings -> Social Meta Data

Please note that you cannot select a specific image for your link post without OG meta tags.

Tags: Facebook, OG, Open Graph Tags