What are Open Graph tags?

The open graph protocol allows developers to leverage Facebook in new and exciting ways. One of the easiest ways to venture into the world of Open Graph is to add the open graph meta tags to your site.

Open graph meta tags allow you to control what content shows up when a page is shared on Facebook. We’ve all seen posts like these on Facebook. Ever wonder how you can control the content that displays. Well the answer is Open Graph.

There are many Open Graph meta tags that provide different information to Facebook. These tags can be added to your pages manually, either directly to the code on the page or through a CMS if fields are available or also programatically. Below are the most common Open Graph tags you will encounter with a brief description of each.

og:title – The title of your page, content, object etc. as you would like for it to appear when displayed on Facebook.

og:site_name – the name of your site.

og:description – Perhaps the most important tag. This is the 1-2 sentence snippet that shows up in the post. Write this carefully as this can be the difference between getting clicks or not.

og:type – The type of content. Think of these as categories, hotel, blog, article etc. Click here for a full list of Open Graph types.

og:image – The URL for an image you want to represent the your content. Images must be either PNG, JPEG and GIF formats and at least 50px by 50px.

og:url – This will be the URL that will be associated with your content ie the link.

Make sure you complete the project when you ask for a like or share button to be added to your site and implement Open Graph tags on your site as well.