June 2, 2014
A ‘how to’ guide into the world of Open Graph
The fundamental reason behind Open Graph is to utilize structured markup and allow any page on the internet to become social media friendly. It also does not require any changes to formatting, layout or colours to be made.
Infact, it allows the audience of your website to share your content on social media platforms such as Facebook and Google Plus in a way that it mirrors what the page is about. These platforms will then display a little snippet in an appealing manner.
By default the snippet usually includes a title, description, an image and the URL of your website. Of course, this can be highly modified and tailored to suit the content of the page. Open Graph is really flexible and provides us with a suite of metadata properties to help us achieve this. In order to display the snippet correctly, modifications need to be made to the source code of the website and the rest of this article will cover exactly how to do this.
Setting the stage
In order for Open Graph to understand your metadata properties that we’ll be adding soon, Open Graph requires a line of code to be installed at the very top of your web page. We do this by adding the parameter xmlns:og=”http://ogp.me/ns#” within your <html> tag. I have highlighted this in red below:
This new parameter defines all of the properties that can be used with the type you choose for your web page. More on this later, but Open Graph types are media items such as music, video, an article, a book, a profile or a website itself.
Choosing your type
The type you choose for your website is a very important part of Open Graph and affects not only how your snippet will display, but also what other metadata properties you can use. When choosing a type, think of it as what sort of content your web page currently has on it. As an important note, you aren’t stuck with one type for your entire website and feel free to mix them around as your content allows for all the pages on your site. The IMDB website is a good example because it is based on the movie industry. It includes an abundance of movie trailers, previews and actors/actresses demo reels on it. Therefore the Open Graph type they have allocated is ‘video’ for the majority of the sites’ pages.
Understanding the properties
The properties for Open Graph are all listed on the official ‘Open Graph Protocol’ website. No matter what type you go with, the required metadata properties are og:title, og:type, og:image and og:url in order for a rich snippet to appear on a social media platform. The 4 metadata properties are self-explanatory as to what they do however there is a suite of optional properties that allow us to display a much more complete snippet. An important one to mention is the og:description property allowing us to place no more than 2 sentences about this particular page. For images and video Open Graph has a og:image tag which includes 5 other properties that we can use to allow us to include the width, height, type and path of the image. It’s important to also note that in order for images to appear within your rich snippet that they are more than 200 pixels in width and height. These same 5 properties that are used for images also extend to the video property – og:video.
Writing the code
We have now chosen the type for our Open Graph enabled web page as well as gained an exposure to the properties to use. How do we use them you ask? This section will cover exactly how to do that.
Let’s start it off with an example that I will work through. An important note for this is to install the Open Graph tags within the <head> tags of your web page. The SEO Antarctica website was an April fool’s joke we launched and this meant that social media was a very important part of our strategy.
The structure of an Open Graph script is achieved by using the HTML <meta> tag which incorporates the ‘property’ and ‘content’ parameters. We place one Open Graph property per line. A full example of this is as follows:
As illustrated above, the required properties are within the script but we’ve also used the og:description and a few og:video properties. As an important note, normally YouTube embed links are in the format of youtube.com/embed/video_id, however this only links to the YouTube page and we want to link to the video itself. This requires us to change the word ‘embed’ to ‘v’. Our rich snippet will now appear as follows in the social media platforms.
When you click on the image in Facebook, because we have used the og:video property as part of our script it will play a particular video that we’ve linked to from YouTube. This video is also embedded within the web page for users who visit the website.
Test and test again
Once you have compiled your code and placed it into the <head> section of your web page we need to test the script before we can start sharing our page. Thankfully on our side are two great tools by Google and Facebook. These are the Google Structured Data Testing Tool and the Facebook Object Debugger.
Earlier I stated that images need to be more than 200 pixels in both width and height and the Facebook Object Debugger notified us of this immediately.
The two tools are very straight forward to use and give you immediate feedback as to what is wrong and what exactly would stop your rich snippet from showing up in the social media platform. Below is how the Facebook Object Debugger will read our snippet:
and the Google Structured Data Testing Tool:
Open Graph can be overwhelming and tricky at first but once you grasp an understanding of the properties and how to use them it’s pretty straight forward. It allows for a killer rich snippet that will be sure to go viral! Like always, please leave any comments or suggestions in the section below.