Open Graph test

What does it do?

Checks how the website will appear when shared, based on the use of Open Graph tags.

Example results

Open Graph test sample results

Why is it important?

Websites are increasingly dependent upon social networks such as Facebook, Twitter and Google+ for traffic. The Open Graph standard defines how pages should appear when they are shared on these networks. Making optimal use of Open Graph means your pages are more likely to be shared socially.

How is it measured?

Sitebeam looks for Open Graph meta tags, like so:

<meta property="og:site_name" content="BBC News"/>

Note that many Open Graph tags have equivalent ‘fallbacks’. For example, if og:title is not specified, the <title> of the page will be used instead. These are the tags which are checked, and their respective fallbacks:

Tag Fallback Purpose
og:title <title>tag The title of the content being shared. You may wish for this to be different from the page title, as you’re optimizing for users sharing, whereas a page title is often (at least partly) optimized for search engines.
og:description Meta-tag description A short plain text description of the content being shared.
og:url The URL of the page The canonical URL of the page. You may wish for this to be different from the page URL.
og:image None An image representing the page. In Facebook, for example, this is shown as a thumbnail to the left of the shared link. Links are vastly more likely to be clicked upon where attractive and appropriate imagery is shown.
og:type None The type of content, e.g. a video, music, book etc. There are agreed standards for many media types.
og:site_name None The name of the website. This can be used by social networks to say a user is doing something with a specific site, e.g. “Bob liked XYZ on site_name”.

Each tag must be visible as uncommented HTML and conform to the Open Graph specification.  OG tags use the property attribute, not the name attribute, like this:

<meta property="og:image" content="http://silktide.com/themes/silktide2012/images/templatefiles/facebook-thumb.jpg" />

Potential problems

The use of Open Graph tags is not recognized by the W3C at this time. Therefore including these tags will cause a page to fail W3C compliance checks. There is currently no reliable workaround for this other than to disregard W3C compliance.

How to improve this score

Ensure all pages specify the minimal set of Open Graph tags where applicable. For some tags – like site_name – this simply requires a single line of code adding to all your templates.

Not all pages may appear to need Open Graph tags – for example, some pages simply don’t use an image. We nevertheless highly recommend that a website uses a fallback description and image for every page. For example, if a page does not have a particular image to feature, it will use a purposely designed generic image instead, such as the website’s logo.

Facebook has a debugger tool that allows you to input a URL to see what Facebook sees for Open Graph information.  Facebook may allow for the wrong syntax and give you a warning (likely because all the other meta tags use name instead of property) and Sitebeam will now allow for that exception.

Further Reading

Was this article helpful? Contact our support team if you have a question.