Structured data, AMP Story metadata, AMP HTML language code

pietrop commented 6 years ago

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

Following up on this issue https://github.com/micnews/story-json/issues/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.

iefserge commented 6 years ago

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

pietrop commented 6 years ago

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

iefserge commented 5 years ago

@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. https://github.com/micnews/story-json-to-amp/pull/38.

pietrop commented 5 years ago

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

micnews / story-json-to-amp