Structured data, AMP Story metadata, AMP HTML language code #36

pietrop · 2018-05-21T14:22:55Z

Hello,
Thanks for the great project repo and open sourcing this. As mentioned ( micnews/story-json#6 ) at BBC News Labs, we are doing some AMP stories experiments.

Following up on this issue micnews/story-json#9 in this pull request we've addressed some of the issues around:

Improving the existing structured data json with the remaining fields,
- this should help with SEO.
adding AMP Story metadata,
- this should help with getting a carousel in google searches (?).
optional AMP HTML language code,
- for use cases when not publishing for English audience.

Structured data for Google SEO

From google amp stories docs

We still recommend adding Structured Data to all your AMP pages, including AMP stories.

See google documentation on the structured data specs

There is a google structured data testing tool

We’ve added support for son with structured data for google SEO.

by adding the following fields to story-json:

author
added authorType to Mic story-json, to have option to have Organisation instead of default, hardcoded Person.
date
Array of images under meta.images. To add to metadata for google SEO, to structured data json as well as the new metadata requirements

Example output after changes

 <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "https://www.bbc.co.uk/news/ampstories/wedding-designers/index.html"
        },
        "headline": "Making Meghan's Dress",
        "image": [
           "https://news.files.bbci.co.uk/include/newslabs/ampstories/shared/wedding-designers/wedding-designers-poster-square.jpg", 
           "https://news.files.bbci.co.uk/include/newslabs/ampstories/shared/wedding-designers/wedding-designers-poster-portrait.jpg", 
           "https://news.files.bbci.co.uk/include/newslabs/ampstories/shared/wedding-designers/wedding-designers-poster-landscape.jpg"
        ],
        "datePublished": "2018-05-18",
        "dateModified": "2018-05-21 12:58:37",
        "author": {
          "@type": "Organization",
          "name": "BBC"
        },
        "description": "Royal wedding 2018: Four young fashion designers share their ideas for a bride’s dress for Meghan Markle ahead of her marriage to Prince Harry.",
        "publisher": {
          "@type": "Organization",
          "name": "BBC",
          "logo": {
            "@type": "ImageObject",
            "url": "https://news.files.bbci.co.uk/amp/brand/bbc-news.png",
            "width": 600,
            "height": 60
          }
        }
      }
    </script>

Language code for AMP HTML

The language of the AMP HTML page is hardcoded to English (en) in the current implementation, and we have a use case where we need to publish in Russian language.

And therefore need the flexibility to change the language code.

<html ⚡ lang="en">

So added a language code for the AMP HTML page header.

By adding the following optional field to story-json:

At root of mic story-json a languageCode attribute.

Allowing to render as

<html ⚡ lang="ru">

Valid attributes for language codes follow the HTML specs of using ISO 639-1 language Codes

AMP Story metadata fields

Added support for AMP story metadata info in body of AMP HTML.

See amp documentation

at the moment mic story-json only has these fields

<amp-story standalone bookend-config-src="https://mic.com/stories/bookend/244?mic_noredirect">

Used the images fields previously added for structured data to populate remaining metadata fields.

<amp-story standalone title="My Story"
    publisher="The AMP Team"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    poster-square-src="https://example.com/my-story/poster/1x1.jpg"
    poster-landscape-src="https://example.com/my-story/poster/4x3.jpg">

See individual commits for a breakdown.

Thanks, and let us know if you have any questions.

Removed duplicate nested publisher key in meta data for schema.org requirement

removing CLI info from package.json

put bin/cli.js back

added support for changing AMP HTML header language code, by adding a languageCode attribute to Mic story-json

added support for AMP Story metadata fields, see docs for more details https://www.ampproject.org/docs/reference/components/amp-story#announcements

with new fields

iefserge · 2018-06-01T13:35:02Z

@pietrop thank you for the PR, going to look into it later today

pietrop · 2018-06-04T07:40:37Z

That’s great, thanks @iefserge let me know if you have any questions

iefserge · 2018-06-04T10:20:15Z

README.md

+      where 
+      - first one is square 
+      - second one is `poster-portrait`
+      - third one is `poster-landscape`


@pietrop what's the reason for using array vs named keys? i.e images: { square: ..., landscape: ... }?

Was following the structured data specs, where they are added to the json as an array.

https://developers.google.com/search/docs/data-types/article#properties

https://search.google.com/structured-data/testing-tool

I think this can be confusing as we require images to be in the specific order. From the doc looks like structured data schema allows different images to be in any order.

iefserge

Just 1 question, otherwise this looks great!

iefserge · 2018-10-15T16:57:30Z

@pietrop Hi, doing some updates to support amp-story v1 and interested in incorporating parts of your PR (specifically language code and authorType). Would this make sense?

On the metadata fields, I'm adding new preview field (separate from structured data props) because I think it may be useful to customize story preview differently. #38.

pietrop · 2018-10-18T07:59:52Z

Thanks @iefserge, sounds good, let me know if you have any questions on any parts of it.

leihelondon and others added 8 commits May 16, 2018 15:02

Fixed publisher in meta data

c99db04

Removed duplicate nested publisher key in meta data for schema.org requirement

troubleshooting

1737aec

removing CLI info from package.json

troubleshooting

66ee977

put bin/cli.js back

added support for structured data

079ee1e

AMP HTML language codes

29dc880

added support for changing AMP HTML header language code, by adding a languageCode attribute to Mic story-json

AMP Story metadata fields

eaec4e1

added support for AMP Story metadata fields, see docs for more details https://www.ampproject.org/docs/reference/components/amp-story#announcements

removed vulnerabilities notes

accba9a

updated README

c1367db

with new fields

pietrop mentioned this pull request May 21, 2018

Metadata fields AMP Story recent update micnews/story-json#9

Open

iefserge reviewed Jun 4, 2018

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Structured data, AMP Story metadata, AMP HTML language code #36

Structured data, AMP Story metadata, AMP HTML language code #36

pietrop commented May 21, 2018

iefserge commented Jun 1, 2018

pietrop commented Jun 4, 2018

iefserge Jun 4, 2018

pietrop Jun 4, 2018

iefserge Jun 5, 2018

iefserge left a comment

iefserge commented Oct 15, 2018

pietrop commented Oct 18, 2018

Structured data, AMP Story metadata, AMP HTML language code #36

Are you sure you want to change the base?

Structured data, AMP Story metadata, AMP HTML language code #36

Conversation

pietrop commented May 21, 2018

Structured data for Google SEO

Language code for AMP HTML

AMP Story metadata fields

iefserge commented Jun 1, 2018

pietrop commented Jun 4, 2018

iefserge Jun 4, 2018

Choose a reason for hiding this comment

pietrop Jun 4, 2018

Choose a reason for hiding this comment

iefserge Jun 5, 2018

Choose a reason for hiding this comment

iefserge left a comment

Choose a reason for hiding this comment

iefserge commented Oct 15, 2018

pietrop commented Oct 18, 2018