Open Graph meta tags allow you to control what your pages look like when shared on social media sites such as Facebook and Twitter.

To add these tags to your published pages, create a new system region within the <head> tags of your Template(s). For example:

<system-region name="OG TAGS"/>

Then, attach a format to that region that dynamically generates the Open Graph tag markup based on the current page. For example:

#set ($image = $currentPage.getStructuredDataNode("image"))

[system-view:external]

<meta content="${currentPage.site.url}/${currentPage.path}.html" property="og:url"/>
<meta content="${_EscapeTool.xml($currentPage.metadata.title)}" property="og:title"/>
<meta content="${_EscapeTool.xml($currentPage.metadata.summary)}" property="og:description"/>

#if (!$_PropertyTool.isNull($image.asset))
  <meta content="${image.asset.site.url}/${image.asset.path}" property="og:image"/>
#end

[/system-view:external]

Notes:

  • The og:image tag is populated by an image chooser called "image". Be sure to adjust the $image variable to your own Data Definition structure.
  • URLs must be fully-qualified, so this example format uses the ${currentPage.site.url} property to output the current site's URL.
  • The markup is wrapped in system-view:external psuedo-tags so that they're only rendered when published.
Did this answer your question?