The Open Graph protocol was originally introduced by Facebook in 2010 as a set of rules to enable your web content to become the rich object in social sharing. Today, it is also recognized by all major social platforms, including Linkedin, Google+ and Twitter.
With Open Graph meta tags integrated into your page content, Facebook will be able to identify what elements of your page you want to show when someone shares your page.
Open Graph Protocol Example
Open Graph meta tags must be placed in the HEAD of your HTML page. Below is a listing of Open Graph meta tags and how they display in your HTML page in order to provide you with a better understanding of how they could be used.
Open Graph Protocol Example.
The Basic Open Graph Protocol Tags
Although Open Graph protocol covers a wide range of tags, starting from titles and ending with video and music sharing options, in this article will discuss the basic tags: title, description, URL, site_name and image.
og:title – The title of your object as it should appear within the graph and it has a similar purpose as the traditional meta title tag.
Note: og: title will not be found. Ensure your content is marked up with extremely compelling og:title as it will be shown on the Facebook feed in bold as the post title.
og:description – The brief and optimized description of the content for social sharing. The description will be displayed below the title. Optimally, the description should be no more than 150 characters long, and between 2 and 4 sentences.
og:url – The canonical URL of your object that will be used in sharing as its permanent ID in the graph. The canonical URL of your page is a URL without session variables, query strings, counters or parameters. If you happen to have more than one URL for the same content, you should define one URL, because you would like to aggregate Likes across different versions of the page.
og:image – An image URL which will represent your object within the graph. For many marketers, this is the most interesting Open Graph tag because a picture always helps content stand out. Make sure you set up the image of your choice, otherwise the Facebook Crawler will use an internal heuristic to make the best guess about the image for your content.
og:site_name – The name you would like your website to be recognized by. If your object is part of a larger web site, the name which should be displayed for the overall site.
Open Graph Protocol Optimization
Facebook has become a major traffic driver for all types of websites, from start-ups to large corporations. Today, large corporations attract more consumers through their Facebook pages rather than their corporate websites. With this in mind, you might want to optimize your social sharing.
og:title – The title of your object does not have a limit on the number of characters, but if your title is longer than 90 characters, Facebook will truncate it. Keeping your title simple and concise between 60 and 90 characters will give the entire title better appearance on both desktop and mobile devices.
og:description – Same as for og:title, you are not limited to a character count and in some cases Facebook can display up to 300 characters. However, if your description is longer than 250 characters, Facebook will most probably start to truncate your description.
More importantly, your description might not even show on mobile devices. Your goal should be to make your description compelling and around 150 characters.
og:image – The recommended resolution for og:image is 1200x630px and not exceed 8MB in weight. At this size, your thumbnail will be visible and stand out from the crowd.
At the minimum you should use 600x315px images, to display posts with large images. If you use images smaller than 600x315px, the size of the thumbnail will be smaller. The minimum image size is 200x200px, and if you try to use images smaller than that you will see an error in the Open Graph debugger.
Ensure your aspect ratio for images is close to 1.91:1 as you would like to display the full image without any cropping.
Testing Open Graph Integration
Facebook has created an Open Graph Object Debugger that allows anyone to test their page and determine how it will appear when shared on Facebook. Using this tool can help verify your Open Graph is properly detected and that there are no other errors you may not be aware of on the page. When you type in the link you want to check, it returns any errors and suggestion for og tags, you will be able to check the appearance of your og image, description, title etc.
The second important functionality of an Open Graph Object Debugger is Facebook cache cleaning. If you would like to change the posted link to Facebook, remember to use Debugger each time to refresh the cache of your links after any adjustments.
Related Topics
Top