Our Blog

Facebook Open Graph Objects

By Heshy Friedman

facebook-open-graphDo you ever share a link on Facebook and are surprised at the picture selection or description of the page? While Facebook often tries to pick a top level picture on the page and find a description, it often does this randomly. The good news is that this can be controlled.

There are several tags called open graph objects that can be added to the HTML code of a web page, and these tags will define the Facebook properties. The specific tags include the following:

  • og:url
  • og:type
  • og:image
  • og:description

These can be defined in the code by adding them to a meta tag property. Below is the following syntax to define a specific picture to load when the link is shared with Facebook:

<meta property="og:image" content="http://www.yoursite.com/defaultimage.jpg" />

When you share the link on a web page that has this snippet of code, it will force Facebook to load the image you defined. In my opinion, this is the most important open graph code. The other open graph objects are less important, since these are generally picked up automatically by Facebook. og:url is picked up from the default URL of the page, and is only useful if you want to change it to shorthand URL for whatever reason. og:type is website by default, and og:description is usually picked up from the meta tag description if you have one (and you should.) Facebook suggests on their developer page to always include all og tags on your pages, and while that is definitely good practice, its necessity is primarily for the og:image tag.

Facebook provides a suite of developer’s tools, including a debugging tool which provides insight into Facebook’s choice of pictures and website description. This is a great tool and shows you what needs to be corrected and if Facebook is indeed picking up the og code defined in the HTML. To view the Open Graph Object Debugger, visit this page:

https://developers.facebook.com/tools/debug

Type in the website page URL, and Facebook will provide all the details on what the page will load when shared as a Facebook link, and if the defined og code is set correctly and is active.

 

Copyright © 2022 Azurite Marketing Group, all rights reserved.