What does it do?
Checks how the website will appear when shared, based on the use of Open Graph tags.
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:
||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.|
||Meta-tag description||A short plain text description of the content being shared.|
||The URL of the page||The canonical URL of the page. You may wish for this to be different from the page URL.|
||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.|
||None||The type of content, e.g. a video, music, book etc. There are agreed standards for many media types.|
||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" />
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
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.