Development

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. Here is an example Format that generates a number of Open Graph meta tags:

#set ($image = $currentPage.getStructuredDataNode("path/to/image"))

[system-view:external]

<meta content="${currentPage.site.url}/${currentPage.path}.html" property="og:url"/>

#if (!$_PropertyTool.isEmpty($currentPage.metadata.title))
    <meta content="${_EscapeTool.xml($currentPage.metadata.title)}" property="og:title"/>
#end

#if (!$_PropertyTool.isEmpty($currentPage.metadata.summary))
    <meta content="${_EscapeTool.xml($currentPage.metadata.summary)}" property="og:description"/>
#end

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

[/system-view:external]

Notes:

  • The example Format above is provided as a starting point, and should be customized based on your desired markup and the metadata and structured data fields you use in your implementation.
  • 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.
Back to Top ↑