Loading Image

Almost there...

Loading Image


Facebook Open Graph Meta Tags

So how can you control the information that is shown on Facebook when you share a website? By making use of the Facebook Open Graph API and I will explain to you how to use it.
Michael Jacobsen
9 January 2017 - 10:00
Category: Social Media
Facebook Open Graph Meta Tags

Facebook has become the biggest traffic driver for all types of websites. May it be from a small business to a large corporation, everybody is on Facebook and it is the easiest way to share information and to keep followers up-to-date. However one problem is that it is difficult to know what image or description Facebook will use to display. This is where the Facebook Open Graph API is the solution.

The Facebook Open Graph allows web developers to customise certain information of their website that is carried over to Facebook when a webpage is shared. This is simply done by adding custom Meta Tags to the source code of the webpage.

Open Graph Meta Tag Example

These Meta Tags are all prefixed with og: and then you specify the property. The data that should be associated with the property goes within the content attribute.

<meta property="og:{tagName}" content="{tagValue}"/>

Some Key Facebook Open Graph Tags


The image Meta Tag tells Facebook which specific image should be shared.

<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Facebook_New_Logo_(2015).svg/1280px-Facebook_New_Logo_(2015).svg.png"/>

The best image size to use is 1200 x 630 pixels in order to get the best image on high resolution devices. Images can be up to 8MB in size. Here is a link to the best practices for images.


The title that should be used.

<meta property="og:title" content="Facebook Open Graph Meta Tags"/>

In most cases this should be the article or page title.


The site_name tag provides Facebook with the name that you like your website to be recognised by.

<meta property="og:site_name" content="Michael Jacobsen Blog"/>

It is useful as Facebook might not have a way of knowing outside of this Meta Tag.


The description tag should be between 2 and 4 sentences. This information will be placed below the title.

<meta property="og:description" content="This is an example description."/>

It is useful as Facebook might not have a way of knowing outside of this Meta Tag.


The publisher tag helps Facebook to identify to which Facebook account or page this webpage is linked to, usually if you work for a company you would use the Facebook account or page of that company here.

<meta property="article:publisher" content="https://www.facebook.com/mjacobsenninja" />


This does basically the same as the publisher tag but in this case you supply the Facebook account or page of the person who created the article or webpage.

<meta property="article:author" content="https://www.facebook.com/mjacobsenninja" />
More Facebook Open Graph Tags

The above shown are only a few example of Meta Tags that are available from Facebook. Here is a complete list of tags that one can use.

Should you run into any kind of problems with the Open Graph Tags, Facebook has created a very useful debugger to help validate what you are sending to Facebook.