Developing in Cascade how to

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

Open Graph and Twitter Card meta tags control what your pages look like when shared on social media.

To add them to your published pages, create a new system region within the <head> tags of your Template:

HTML

<system-region name="SOCIAL_META"/>

Then attach a Format to that region that generates the markup from the current page. This example generates a number of Open Graph tags:

Velocity

#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]

Adapting the example

Customize the markup and the metadata and structured data fields to match your implementation.
The og:image tag is populated by an image chooser named "image". Adjust the $image variable to your own Data Definition structure.
URLs must be fully qualified, which is why the example uses ${currentPage.site.url}.
The markup is wrapped in system-view:external pseudo-tags so it only renders when published.