Setting Open Graph Data

While you can set open graph data when you edit content or through the site settings, you can also set it programmatically in your templates.

Testing for Open Graph data

If your page is for an app item then you can test to see if open graph data was set for the app item before overwriting it with something else.  When you edit an app item you can set the open graph data. If any open graph data is set then, that data is available under the openGraph variable for the app item.

For most app items you can set the following open graph data:

  • title
  • description
  • image
  • type
  • twitterCard
  • twitterDescription
  • twitterImage
  • twitterTitle

You can test for the value before setting it. For example, if your app is a blog, you can do the following to set the description to use the post abstract if a description isn't set.

{% if post.openGraph.description is not defined %}
    {% do _page.openGraph.setDescription(post.abstract) %}
{% endif %}

Set Open Graph data

Below are the available methods for setting open graph data. All open graph meta tags will be outputted wherever the {{ _page.meta() }} tag is in your templates.

Open Graph Methods Description
_page.openGraph.addImage

Adds an image to the open graph data.

Use _page.openGraph.setImage() to set a single image and replace any existing image data.

Parameters

  • image: (string) (required) The path or URL to the image.
  • width: (int) (optional) The image width.
  • height: (int) (optional) The image height.

If the height or width are not set then the system will try to determine them if the image is a local image. However, it's recommended to pass the dimensions.

Example

{% do _page.openGraph.addImage('/path/to/image.jpg', '500','400') %}

The above example will cause the following tags to be built:

<meta property="og:image" content="http://www.mysite.com/path/to/image.jpg">
<meta property="og:image:height" content="400">
<meta property="og:image:width" content="500">
_page.openGraph.addTag

Adds content for an open graph meta tag. If there is already content for the tag type, then this will add an additional meta tag for the tag type.

Use _page.openGraph.setTag() to overwrite any existing content for a tag type.

This can be used to add custom tags that aren't available with the existing open graph methods.

Parameters

  • type: (string) (required) The open graph meta tag type. i.e. 'og:title' or 'og:description'.
  • content: (string) (required) The meta tag content value.

Example

{% do _page.openGraph.addTag('og:video','/videos/bond/trailer.mp4') %}

The above example will cause the following tag to be built:

<meta property="og:video" content="http://www.mysite.com/videos/bond/trailer.mp4">
_page.openGraph.setDescription

Sets the description.

Parameter

  • description: (string) (required) A one to two sentence description of your object.

Example

{% do _page.openGraph.setDescription('description value') %}

The above example will cause the following tag to be built:

<meta property="og:description" content="description value">
_page.openGraph.setFacebookAppId

Sets the Facebook app id value.

Parameter

  • id: (string) (required) The Facebook app id which should be displayed for the overall site.

Example

{% do _page.openGraph.setFacebookAppId('302184056577324') %}

The above example will cause the following tag to be built:

<meta property="fb:app_id" content="302184056577324">
_page.openGraph.setImage

Sets the image value in the open graph data.

Where _page.openGraph.addImage() is used to add multiple images, this will replace any previously set images with one image.

Parameters

  • image: (string) (required) The path or URL to the image.
  • width: (int) (optional) The image width.
  • height: (int) (optional) The image height.

If the height or width are not set then the system will try to determine them if the image is a local image. However, it's recommended to pass the dimensions.

Example

{% do _page.openGraph.setImage('/path/to/image.jpg', '500','400') %}

The above example will cause the following tags to be built:

<meta property="og:image" content="http://www.mysite.com/path/to/image.jpg">
<meta property="og:image:height" content="400">
<meta property="og:image:width" content="500">
_page.openGraph.setLocale

Sets the locale value.

Parameter

  • locale: (string) (required) The locale the open graph tags are marked up in. Of the format language_TERRITORY. For example: en_US.

Example

{% do _page.openGraph.setLocale('en_US') %}

The above example will cause the following tag to be built:

<meta property="og:locale" content="en_US">
_page.openGraph.setSiteName

Sets the site name.

Parameter

  • site: (string) (required) The site name.

Example

{% do _page.openGraph.setSiteName('Aptuitiv') %}

The above example will cause the following tag to be built:

<meta property="og:site_name" content="Aptuitiv">
_page.openGraph.setTag

Sets content for an open graph meta tag.

Where _page.openGraph.addTag will add an additional meta tag for the tag type if content already exists, this method will replace any existing content for the tag type.

This can be used to add custom tags that aren't available with the existing open graph methods.

Parameters

  • type: (string) (required) The open graph meta tag type. i.e. 'og:title' or 'og:description'.
  • content: (string) (required) The meta tag content value.

Example

{% do _page.openGraph.setTag('og:video','/videos/bond/trailer.swf') %}

The above example will cause the following tag to be built:

<meta property="og:video" content="http://www.mysite.com/videos/bond/trailer.mp4">
_page.openGraph.setTitle

Sets the page title value.

Parameter

  • title (string) (required) The title of the object as it should appear within the graph.

Example

{% do _page.openGraph.setTitle('Page title') %}

The above example will cause the following tag to be built:

<meta property="og:title" content="Page title">
_page.openGraph.setTwitterCard

Sets the Twitter card value.

Parameter

  • card: (string) (required) The card type of your object as it should appear within the graph.

Example

{% do _page.openGraph.setTwitterCard('summary') %}

The above example will cause the following tag to be built:

<meta property="twitter:card" content="summary">
_page.openGraph.setTwitterCreator

Sets the Twitter 'creator' (usually a Twitter username).

Parameter

  • creator: (string) (required) The Twitter username which should be displayed as the creator of the content.

Example

{% do _page.openGraph.setTwitterCreator('aptuitiv') %}

The above example will cause the following tag to be built:

<meta property="twitter:creator" content="summary">
_page.openGraph.setTwitterDescription

Sets the Twitter description.

Parameter

  • description: (string) (required) A one to two sentence description of your object.

Example

{% do _page.openGraph.setTwitterDescription('Twitter description') %}

The above example will cause the following tag to be built:

<meta property="twitter:description" content="Twitter description">
_page.openGraph.setTwitterImage

Sets the Twitter image value.

Parameter

  • image: (string) (required) The path or URL to the image.
  • altText: (string) (optional) A text description of the image conveying the essential nature of an image to users who are visually impaired.

Note: Twitter does not use the image width or height values for images as can be seen in their documentation.

Example

{% do _page.openGraph.setTwitterImage('http://www.mysite.com/image.jpg', 'Alt text') %}

The above example will cause the following tags to be built:

<meta property="twitter:image" content="http://www.mysite.com/path/to/image.jpg">
<meta property="twitter:image:alt" content="Alt text">
_page.openGraph.setTwitterSite

Sets the Twitter 'site' (usually the Twitter username).

Parameter

  • site: (string) (required) The Twitter username which should be displayed for the overall site.

Example

{% do _page.openGraph.setTwitterSite('aptuitiv') %}

The above example will cause the following tag to be built:

<meta property="twitter:site" content="aptuitiv">
_page.openGraph.setTwitterTitle

Sets the Twitter title value. 

Parameter

  • title: (string) (required) The title of your object as it should appear within the graph.

Example

{% do _page.openGraph.setTwitterTitle('Twitter title') %}

The above example will cause the following tag to be built:

<meta property="twitter:title" content="Twitter title">
_page.openGraph.setTwitterUrl

Sets the Twitter URL value.

Parameter

  • url: (string) (required) The canonical URL of your object that will be used as its permanent ID in the graph.

If the domain isn't set then it will be added.

Example

{% do _page.openGraph.setTwitterUrl('/page') %}

The above example will cause the following tag to be built:

<meta property="twitter:url" content="http://www.mysite.com/page">
_page.openGraph.setType

Sets the type value.

Parameter

  • type: (string) (required) The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.

Example

{% do _page.openGraph.setType('article') %}

The above example will cause the following tag to be built:

<meta property="og:type" content="article">
_page.openGraph.setUrl

Sets the URL value.

Parameter

  • url: (string) (required) The canonical URL of your object that will be used as its permanent ID in the graph.

If the domain isn't set then it will be added.

Example

{% do _page.openGraph.setUrl('/page') %}

The above example will cause the following tag to be built:

<meta property="og:url" content="http://www.mysite.com/page">