Social media networks can be a major traffic driver to a website, so it is always in your best interest to optimise your presence on them by adding Open Graph tags to your pages.

So what is Open Graph?

"Open Graph enables any web page to become a rich object in a social graph." - This is how the OGP website explains it anyway! - Don't worry, we were confused too initially. In simple terms Open Graph is a way to define 'things' in a digital space. It allows you to tell social media networks like Facebook, Twitter, Pinterest, LinkedIn and Google+ what information to display whenever you or anyone else shares a link from your site.

The below example shows how a Facebook Share item looks on Facebook when shared... But the HTML on the page has these Meta properties which tell Facebook, YouTube etc which image to use for the main image, what the title should be and what the caption text should be...

What are the key Open Graph tags?

og:title - That is the title of your page for the Open Graph. There is no specific recommendations but you should respect the 65 characters if you do not want your title to be truncated. It actually works the same as the meta title tag and if Facebook does not find the og:title, it will just use your title tag. Remember that is must be appealing to optimise your click-through rate.

og:type - This tag specifies your page type (website, article, video, music..) and describes the main type of subject on your page. The list of possibilities is very long so you can check it out here.

og:image - This is your URL image that will be display in the Open Graph. It is very useful as you can choose which thumbnails will be displayed and avoid unrelated images. It moreover helps to increase your conversion rate. Indeed, picture marketing is really something you should take in account since a great picture worths 1,000 words.

og:url - That is the canonical URL of your page. Most of the time that is just the URL displayed on your page but it can be helpful if there is different dynamic URLs linked to the same page.

og:description - That is a snippet of your page that should contain between 150 and 200 characters (Facebook can display up to 300 characters) and that describe your page content. It works the same as the meta description tag but it will not affect your SEO so do not lost time to optimize your keywords but just try to write something compelling.

To learn more about how structured data and more complex OG parameters could help your website please read more on the official OG website.