Utilising Open Graph tags to allow social networks to share content from your site.
Open Graph
Open Graph Tags allow content to be shared effectively to social networks, such a Facebook. Open Graph tags are implemented via Metatags and Schemas. Easysite supports Open Graph Tags from version 6.5.9 onward.
Note: the information provided on this page is generic. Individual social media applications will have specific best practice information available on their site. For example: Facebook sharing best practice.
Creating the Open Graph Schema
To create a schema go to Administration -> Content -> Tags. The following view will be presented:
1. Select schemas, and then click add. The following view will be presented:
2. Add the following information:
Schema Name
Open Graph
Property Prefix
og
Property Delimiter
Select ':'
Schema URI
Enter the URL of a resource detailing the schema. For example: http://opengraphprotocol.org/schema/
Creating Metatags
To create metatags go to Administration -> Content -> Tags. Select the tags tab and click add. The following view will be presented:
1. Create the required metatags. Typically these would include:
title - the title of your object as it should appear within the graph
type - The type of your object, for example: "website". Alternatively, use "article" to indicate specific content with a site such as a page, image or video
image - An image URL which should represent your object within the graph
url - The canonical URL of the object that will be used as the permanent ID in the graph.
In the source code the schema and metatag will be combined, for example:
<metaproperty="og:title"content="Welcome"/>
Note: if any meta tags using these titles already exist, new tags will need to be created specifically for use with the OG schema.
For further information Open Graph metatags see: http://ogp.me/
Creating and Populating Open Tags for an Easysite Page
The following metatags and associated settings would be used when including pages in a social network:
Title
Target: Page
Title: title
Attribute Key: Property
Population options: Automatic Generation
Use: Page Property
Page Property: Page Title
Type
Target: Page
Title: type
Attribute Key: Property
Population options: Automatic Generation
Use: Fixed Value
Fixed Value: Article
Show meta tag without Schema: uncheck
Image
Target: Page
Title: image
Attribute Key: Property
Population options: Automatic Generation
Use: Page Property
Page Property: Page Avatar or Page First Media Asset, as required.
Show meta tag without Schema: uncheck
Note: please refer to information provided by individual social networks in regard to optimum image sizes. For example: https://developer.linkedin.com/documents/setting-display-tags-shares
URL
Target: Page
Title: url
Attribute Key: Property
Population options: Automatic Generation
Use: Page Property
Page Property: Identifier (Page URL)
Show meta tag without Schema: uncheck
Note: for further information on configuring metadata see Tags.
Associate your Open Graph Tags with your Open Graph Schema
Once you have set up your tags you will need to associate them with the twitter schema you created in the first step.
go to Administration -> Content -> Tags
select schemas
select Open Graph
select associated tags tab
check the box for each of the tags you would like to add to your Open Graph Schema created earlier
click the associate button
Testing the Interpretation Open Graph Tags
Some social networks include tools which can be used for testing - and reporting any errors - in relation to Open Graph tags. For example: https://developers.facebook.com/tools/debug
Done this?....why not implement meta data for Twitter Cards too...
If you implement Open Graph it is only a few extra steps to implement Twitter Cards too...read this best practice guide to find out how.
