Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c99db04
Fixed publisher in meta data
leihelondon May 16, 2018
1737aec
troubleshooting
leihelondon May 16, 2018
66ee977
troubleshooting
leihelondon May 16, 2018
079ee1e
added support for structured data
May 21, 2018
29dc880
AMP HTML language codes
May 21, 2018
eaec4e1
AMP Story metadata fields
May 21, 2018
accba9a
removed vulnerabilities notes
May 21, 2018
c1367db
updated README
May 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,20 @@ In addition to [standard `story-json` properties](https://github.com/micnews/sto
| `analytics` | Array of [AMP analytics objects](https://www.ampproject.org/docs/reference/components/amp-analytics) |
| `bookendConfigSrc` | [Bookend endpoint URL](https://www.ampproject.org/docs/tutorials/visual_story/create_bookend) |

### Google AMP specific fields in `story-json`

- In `story-json` attribute `meta.authorType` can be `Organization` or `Person`. This is uses in structured data.
- In `story-json` attribute `meta.images` is an array of images. This is used for AMP story metadata as well as structured data for SEO.
where
- first one is square
- second one is `poster-portrait`
- third one is `poster-landscape`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


### AMP HTML language code - optional

- In `story-json` optional root level `languageCode` attribute takes a [ISO 639-1 language Code](https://www.w3schools.com/tags/ref_language_codes.asp) string to set the AMP HTML header language code eg `<html ⚡ lang="ru">`.


## Example

Here's an AMP story generated by this module:
Expand Down
16 changes: 13 additions & 3 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const renderAmpElementScripts = elementsMap => Object.keys(elementsMap)

const textComponents = Object.keys(textComponentToHtmlTagMap);
export default ({
languageCode,
title,
defaultStyles = {},
pages = [],
Expand Down Expand Up @@ -127,15 +128,24 @@ export default ({

const renderStory = (storyPages, storyAnalytics) => renderTag(
'amp-story',
{ standalone: true, 'bookend-config-src': bookendConfigSrc },
{
standalone: true,
'bookend-config-src': bookendConfigSrc,
'title': title,
'publisher': meta.publisher.name,
'publisher-logo-src': meta.publisher.logo.url,
'poster-portrait-src': meta.images[1],
'poster-square-src': meta.images[0],
'poster-landscape-src': meta.images[2]
},
[renderAnalytics(storyAnalytics), ...storyPages.map(renderPage)].join(''),
);

// This has to happen first so that acmpElementsThatNeedScripts will be filled
const renderedStory = renderStory(pages, analytics);

return format(`<!doctype html>
<html ⚡ lang="en">
<html ⚡ lang="${languageCode ? `${languageCode}` : 'en'}">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Expand All @@ -160,4 +170,4 @@ export default ({
</html>`);
};

export const convertToReactInlineStyle = _convertToReactInlineStyle;
export const convertToReactInlineStyle = _convertToReactInlineStyle;
12 changes: 7 additions & 5 deletions lib/render-meta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
/* @flow */
/* @flow
* for google structured data validation see
* https://search.google.com/structured-data/testing-tool
*/

import type { StoryMetaType } from '../flow-types';

Expand All @@ -10,6 +13,7 @@ export default (storyMeta: StoryMetaType) => {
datePublished,
dateModified,
author,
authorType,
publisher,
description,
} = storyMeta;
Expand All @@ -26,7 +30,7 @@ export default (storyMeta: StoryMetaType) => {
datePublished,
dateModified,
author: author && {
'@type': 'Person',
'@type': authorType,
name: author,
},
description,
Expand All @@ -35,14 +39,12 @@ export default (storyMeta: StoryMetaType) => {

if (publisher) {
json.publisher = {
publisher: {
'@type': 'Organization',
name: publisher.name,
logo: {
'@type': 'ImageObject',
...publisher.logo,
},
},
}
};
}

Expand Down
Loading