How do I include Open Graph or Twitter card meta tags in my page?

Open Graph meta tags and Twitter Card 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="SOCIAL_META"/>

Then, attach a format to that region that dynamically generates the 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 in this example 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 pseudo-tags so that they're only rendered when published.