The Open Graph protocol

Further information >

The Open Graph protocol

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

The Open Graph protocol was introduced by Facebook in 2010 with the purpose of adding structured data to web pages to give greater control over how contents appear when they are shared.

When you share a post on Facebook, you can manually change the picture, title and description. This customization, however, only works for the single share because the link is not changed. Thus, if other users share the same post in their turn (copying and pasting the URL or using the like/share buttons), the title, description and preview pictures that are loaded automatically by Facebook will continue to be displayed. The Open Graph protocol makes it possible to customize a URL so that you can control how it will be presented when it is shared.

Any web page can, therefore, be part of the Social Graph with the Open Graph protocol or, in other words, become an object that can interact with the social networks.

The Open Graph protocol is recognized by other social platforms, such as Twitter, Google+ and LinkedIn.

For more information on the Open Graph protocol, go to the official ogp.me/ website.

Click to expand/collapseImplementing Open Graph

Open Graph is based on a series of tags that can be customized to define which and how parts of a web page will be displayed when it is shared on Facebook. This information is added to the page's <head> tags and so the user can't see it until he decides to share that page.

The basic Open Graph tags are:

og:title – the title you want to give to the contents.
og:description – the description of the contents.
og:type – the content type, for example an article or a video.
og:image – the URL of the picture to be used for sharing.
og:url – the canonical URL (that is, the absolute URL, without parameters, variables or counters) to be used as the ID associated with the web page that all your shares will go to.

There are also a number of optional tags that you can use to define content properties, for example:

og:audio – the URL of an audio file associated with the object (page).
og:locale – the language of the content, for example it_IT.
og:site_name – the name of the website, without www or TLD (top level domain).
og:video – the URL of a video file associated with the page.

There are many other tags you can use, depending on the type of content you want to share.

You can use the Facebook Debugger to check the correct implementation of the Open Graph tags.

You can also use this tool to refresh information in the tags that have been changed.

Click to expand/collapseIn WebSite X5

WebSite X5 uses the Open Graph protocol to create the web page code. Please note that:

The value given to the og:image tag is the URL of the website picture, specified in the WebSite Image option in Website Settings | General.
The picture specified in the WebSite Image option is used for sharing all the website pages, with the exception of the blog pages if posts are shared that include a slideshow: in these case, the website picture is substituted by the first picture in the slideshow.
The values of the other tags are entered automatically by the program.