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.
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}"/>
Images
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.
Title
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.
site_name
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.
Description
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.
Publisher
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" />
Author
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" />
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.
