Amphtml: amp-story: Story-level metadata
- 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>
choumx
All 7 comments
Useful reference https://json-ld.org/spec/latest/json-ld-api-best-practices/
jpettitt
on 8 Nov 2017
Still slated for post-developer-preview.
choumx
on 5 Feb 2018
New proposal: Add a small number of required attributes to <amp-story> element.
<amp-story standalone title="My Story"
publisher="Stories from Me" publisher-logo="logo.png"
poster-portrait="a.jpg" poster-landscape="b.jpg" poster-square="c.jpg">
TODO:
- Which poster attributes do we require (and what aspect ratios)?
- Blog post and email to communicate breaking change.
- Refactor bookend to read from these attributes (with fallback to JSON-LD for garbage values?).
Nice-to-have:
- Runtime fetches and verifies aspect ratio of posters in development mode
/cc @newmuis
choumx
on 16 Mar 2018
@choumx - In validation, the URLs for publisher-logo-src and poster-portrait-src and now bookend-config-src (and probably the other new meta attributes) disallows relative urls, that is, you have to spell out the full URL. I didn't expect this, also the docs show otherwise, is this correct?
Sample story app: https://bap-amp-001.appspot.com/
bpaduch
on 26 Apr 2018
@ithinkihaveacat also reported this in #14765.
choumx
on 27 Apr 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?
honeybadgerdontcare
on 2 May 2018
We'll be allowing relative URLs for all of those attributes in the next 1-2 weeks.
honeybadgerdontcare
on 18 May 2018
Related issues
Download
·
3Comments
westonruter
·
3Comments
jpettitt
·
3Comments
choumx
·
3Comments
sryze
·
3Comments
Most helpful comment
We'll be allowing relative URLs for all of those attributes in the next 1-2 weeks.