Basic Support for OpenGraph

The Open Graph Protocol is a set of metadata declarations that enable your web pages to be better interpreted by Facebook and other social platforms. The full implementation can get quite indepth, depending on your content, and how you want it to be used. However, for basic support you need only four entries.

The properties are created in metadata tags, in a key/value structure:
<meta property=”" content=”" />

The four properties allow you to specify a title, a ‘type’, a url, and an image.

Title
The title is set with the property ‘og:title’. This is the title that Facebook will use when referencing this webpage as an object. It can generally be set to the title of the webpage:
<meta property=”og:title” content=”My Web Page” />

Type
The type property allows you to define the kind of data that is being referenced. Options include ‘video.director’, or ‘book.author’, or ‘music.song’. A good default option for webpages would be the ‘website’ type:
<meta property=”og:type” content=”website” />

URL
This is simply the correct url with which the object should be referenced. In the instance of a web page, it should simply be the correct url of the web page:
<meta property=”og:image” content=”https://forlinux.co.uk/expertise/blog/” />

Image
The image property allows you to specify an image that is used to represent your resource, usually in the form of a thumbnail. One thing to bear in mind with this entry is that it must point to an image which is at least 200 x 200 pixels. Anything smaller and Facebook may choose to select another image.
<meta property=”og:image” content=”https://forlinux.co.uk/images/banner-managedhosting.jpg” />

With these four items declared correctly, you will then control how Facebook and other social platforms treat your webpages. Facebook provide a tool to help in the debugging of Open Graph date:

More information can be found at http://ogp.me/.

This entry was posted in Managed Hosting. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>