Including Metadata

Including sufficient metadata in your AMP pages will ensure they are handled well by search engines and other third party sites that may link to them. You are recommended to add at least the following sets of metadata to your AMP content:

schema.org: schema.org provides a widely-supported vocabulary for adding metadata to web pages. Adding valid schema.org metadata to your AMP pages will ensure they are linked to by all major search engines, and will also help to ensure they get added to the Google news carousel for AMP news stories. schema.org metadata takes the form of a JSON object that must be wrapped in an HTML script element.
Open Graph protocol: Including Open Graph metadata helps to ensure that your content can be handled well by Facebook and other social media apps. Open Graph metadata is encoded as a set of HTML meta elements.
Twitter Card: Including Twitter Card metadata ensures that links to your pages will appear as "cards" in tweets. Twitter card metadata is encoded as a set of HTML meta elements.

Here is an example of a JSP template you might use to generate such metadata for your AMP content items:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": "${article.url}",
  "headline": "${article.title}",
  "datePublished": "${article.publishedDate}",
  "dateModified": "${article.lastModifiedDate}",
  "author": {
    "@type": "Person",
    "name": "${article.author.name}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "name-of-your organization",
    "logo": {
      "@type": "ImageObject",
      "url": "url-of-your-logo",
      "width": "your-logo-width",
      "height": "your-logo-height"
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "${article.relatedElements.images.items[0].fields.representations.value.small.href}",
    "height": "${article.relatedElements.images.items[0].fields.representations.value.small.height}",
    "width": "${article.relatedElements.images.items[0].fields.representations.value.small.width}"
  }
}
</script">

<meta property="og:title" content="${article.title}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="${article.url}" />
<meta property="og:image" content="${article.relatedElements.images.items[0].fields.representations.value.small.href}" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@your-twitter-user" />
<meta name="twitter:title" content="${article.title}" />
<meta name="twitter:description" content="${article.fields.leadtext}" />
<meta name="twitter:image" content="${article.relatedElements.images.items[0].fields.representations.value.small.href}" />

To include such metadata in your content items, save the JSP file in your webapp's /template/widgets/code/view folder (as article-metadata.jsp, for example). Then create a Code widget, go to its JSP tab and set the Path field to reference the JSP file. Then place the Code widget in the meta area of your Widget Framework article templates.

The image object referenced in the JSON metadata above must appear somewhere in the AMP document itself. So make sure you refer to a related image in the JSON that is also rendered in the article page.

Note that Open Graph and Twitter Card metadata property names include the prefixes og: and twitter:. Open Graph requires this prefix to be declared and associated with the namespace http://ogp.me/ns#, usually in the HTML root element:

<html prefix="og: http://ogp.me/ns#">
...
</html>

The twitter: prefix does not require any such declaration.