Merge pull request #101 from brandonbk/google-structured-data-1

Add Google Structured Data markup to videos, articles, news

packages/marko-web/components/page/metadata/content.marko

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 import { get } from "@parameter1/base-cms-object-path";
 import { warn } from "@parameter1/base-cms-utils";
+import buildStructuredData from "./google-structured-data/content";
 
 <!-- @todo This data should generated and saved to the content object as flat data, so no relationships are required. -->
 
@@ -13,6 +14,8 @@ fragment ContentPageMetadataFragment on Content {
     path
     canonicalUrl
   }
+  published
+  updated
   metadata {
     title
     description
@@ -21,7 +24,28 @@ fragment ContentPageMetadataFragment on Content {
     expiresDate
     image {
       id
-      src(input: { options: { auto: "format", w: "1200", fit: "max" } })
+      src(input: { options: { auto: "format,compress", w: "1200", fit: "max", q: 70 } })
+    }
+  }
+  ... on ContentVideo {
+    embedSrc
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+  images(input:{ pagination: { limit: 0 }, sort: { order: values } }) {
+    edges {
+      node {
+        id
+        src(input: { options: { auto: "format,compress", w: "1200", fit: "max", q: 70 } })
+      }
     }
   }
 }
@@ -61,6 +85,13 @@ fragment ContentPageMetadataFragment on Content {
       </if>
     </else>
 
+    $ const structuredData = buildStructuredData(node);
+    <if(structuredData)>
+      <script type="application/ld+json">
+        ${structuredData}
+      </script>
+    </if>
+
     <@when-empty>
       $ warn(`Unable to create content metadata: no content found for ${id}.`);
     </@when-empty>

packages/marko-web/components/page/metadata/google-structured-data/content.js

@@ -0,0 +1,58 @@
+const objectPath = require('@parameter1/base-cms-object-path');
+
+const { getAsArray } = objectPath;
+
+const get = (o, path) => {
+  const v = objectPath.get(o, path);
+  return v == null ? undefined : v;
+};
+
+const getAuthor = (node) => {
+  const authors = getAsArray(node, 'authors.edges').map(e => get(e, 'node.name'));
+  return authors.length ? { '@type': 'Person', name: authors.join(', ') } : undefined;
+};
+
+const getImages = (node) => {
+  const images = getAsArray(node, 'images.edges').map(e => get(e, 'node.src'));
+  return images.length ? images : undefined;
+};
+
+module.exports = (node) => {
+  const publishedISOString = node.published ? (new Date(node.published)).toISOString() : undefined;
+  const updatedISOString = node.updated ? (new Date(node.updated)).toISOString() : undefined;
+  if (node.type === 'video') {
+    const structuredData = JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'VideoObject',
+      name: get(node, 'metadata.title'),
+      description: get(node, 'metadata.description'),
+      thumbnailUrl: get(node, 'metadata.image.src'),
+      uploadDate: publishedISOString,
+      contentUrl: get(node, 'siteContext.canonicalUrl'),
+      author: getAuthor(node),
+      embedUrl: get(node, 'embedSrc'),
+    });
+    return structuredData;
+  }
+
+  const newsArticleTypes = ['article', 'news'];
+  if (newsArticleTypes.includes(node.type)) {
+    const structuredData = JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'NewsArticle',
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': get(node, 'siteContext.canonicalUrl'),
+      },
+      headline: get(node, 'metadata.title'),
+      image: getImages(node),
+      datePublished: publishedISOString,
+      dateModified: updatedISOString,
+      author: getAuthor(node),
+      description: get(node, 'metadata.description'),
+    });
+    return structuredData;
+  }
+
+  return undefined;
+};