Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

amp-story: Story-level metadata

See original GitHub issue

Metadata is used for showing previews of AMP stories on various surfaces
Metadata format should be extensible
A subset of metadata will be enforced to encourage good UX (for now, by AMP Validator)

Option 0: Use current markup with no changes

Page-level schema.org JSON+LD.

<head>
  ...
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://google.com/article"
    },
    "headline": "The Top 10 things about stories… #7 will blow your mind!",
    "image": [
      "assets/img/square.jpg",
      "assets/img/9_16.jpg",
      "assets/img/16_9.jpg",
    ],
    "author": {
      "@type": "Person",
      "name": "Jon Newmuis"
    },
    "publisher": {
      "@type": "Organization",
      "name": "AMP Team",
    },
  }
  </script>
</head>
<body>
  <amp-story standalone bookend-config-src="./my-bookend.json"
      logo="assets/logo.png" ad-network="TripleLift">
    <amp-story-splash-screen icon="assets/icon.png"></amp-story-splash-screen>
    <amp-story-page id="page1">...</amp-story-page>
    <amp-story-page id="page2">...</amp-story-page>
  </amp-story>
</body>

Option 1: Attribute Soup

No new config or elements, just attributes.

<amp-story bookend-config-src="./my-bookend.json"
    square-poster="assets/img/square.jpg" vertical-poster="assets/img/9_16.jpg"
    horizontal-poster="assets/img/16_9.jpg" publisher="AMP Team" standalone
    ad-network="TripleLift" splash-screen-bgcolor="#ff0000"
    logo="assets/logo.png" icon="assets/icon.png" author="Jon Newmuis"
    story-title="The Top 10 things about stories… #7 will blow your mind!">
  <amp-story-page id="page1">...</amp-story-page>
  <amp-story-page id="page2">...</amp-story-page>
</amp-story>

Option 2: Configuration Element

Similar to existing JSON configs in AMP e.g. amp-analytics.

<amp-story standalone>
  <amp-config>
    <script type="application/json">
    {
      "ads-config": {
        "network": "TripleLift",
        ... /* more ads configurations here */
      },
      "bookend": "./my-bookend.json", /* or alternatively, specify JSON inline */
      "publisher-info": {
        "author-name": "Jon Newmuis",
        "organization-name": "AMP Team",
        "publisher-logo": "assets/logo.png",
        "publisher-icon": "assets/icon.png"
      },
      "embed-image": {
        "square": "assets/img/square.jpg",
        "vertical": "assets/img/9_16.jpg",
        "horizontal": "assets/img/16_9.jpg",
      },
      "splash-screen-config": {
        "background-color": "#ff0000",
        "icon": "assets/icon.png",
      },
      "story-title": "The Top 10 things about stories… #7 will blow your mind!"
    }
    </script>
  </amp-config>
  <amp-story-page id="page1">...</amp-story-page>
  <amp-story-page id="page2">...</amp-story-page>
</amp-story>

Option 3: Nested Elements

Analogous to HTML’s <meta> tag, but story-level instead of page-level.

<amp-story standalone bookend-config-src="./my-bookend.json">
  <amp-story-metadata
      story-title="The Top 10 things about stories… #7 will blow your mind!"
      publisher="AMP Team" author="Jon Newmuis" publisher-logo="assets/logo.png"
      publisher-icon="assets/icon.png">
  </amp-story-metadata>
  <amp-story-embed-image horizontal-poster="assets/img/16_9.jpg"
      vertical-poster="assets/img/9_16.jpg" square-poster="assets/img/square.jpg">
  </amp-story-embed-image>
  <amp-story-ads network="TripleLift"></amp-story-ads>
  <amp-story-splash-screen icon="assets/icon.png" color="#f00">
  </amp-story-splash-screen>

  <amp-story-page id="page1">...</amp-story-page>
  <amp-story-page id="page2">...</amp-story-page>
</amp-story>

Issue Analytics

State:
Created 6 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

honeybadgerdontcarecommented, May 18, 2018

We’ll be allowing relative URLs for all of those attributes in the next 1-2 weeks.

1reaction

honeybadgerdontcarecommented, May 2, 2018

The AMP Cache already rewrites bookend-config-src to absolute. Since we’re allowing background-audio, publisher-logo-src, poster-landscape-src, poster-portrait-src and poster-square-src to be http in addition to https, shouldn’t we also allow relative and then rewrite these in the AMP Cache?

Top Results From Across the Web

Example: Stories in AMP - Hello World - amp.dev

Stories are declared inside the amp-story tag. Story-level metadata is provided via attributes. (The first four attributes are mandatory; the final two are ......

How to Create your First Google Web Story - Section.io

The amp-story tag contains the amp-story-page tags, which display stories. The story level also contains important metadata like title ...

ampproject/amphtml 1810171544580 on GitHub

... Add fie-metadata-extension experiment (#18738); Revert " Expander: Fix ... [amp-story] Extracts page level click listener to be at amp-story level ......

Making your first AMP Story: Google's answer to Snapchat and ...

background-audio. We can set an audio file to play while viewing that particular slide, unlike the attribute used at the < amp-story >...

Videoita aiheesta J6ed0 Facebook Watchissa | Facebook

asphalt 8 gameplay, asphalt 89, asphalt 8 mod apk, asphalt 8 song, asphalt 8 vs asphalt 9, asphalt 8 airborne, asphalt 8 car...