feat(recipe-schema): add support for recipe schema in structured data

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/seo",
-  "version": "1.46.3",
+  "version": "1.46.4-recipe-schema.3",
   "description": "SEO Modules for Quintype",
   "main": "dist/index.cjs.js",
   "repository": "https://github.com/quintype/quintype-node-seo",

src/structured-data/schema.js

@@ -1,6 +1,6 @@
 import { get } from "lodash";
 import { getTitle } from "../generate-common-seo";
-import { stripMillisecondsFromTime } from "../utils";
+import { extractTextFromHtmlString, getCardAttributes, stripMillisecondsFromTime } from "../utils";
 export const getSchemaContext = { "@context": "http://schema.org" };
 
 export function getSchemaType(type) {
@@ -151,3 +151,29 @@ export function generateAuthorPageSchema(publisherConfig, data, url) {
     },
   };
 }
+
+export function generateRecipePageSchema(story) {
+  const { headline, url, "author-name": authorName } = story;
+
+  const cardsWithAttributes = story.cards.filter((card) => getCardAttributes(card, "cardtype"));
+  const cardWithIngredients = cardsWithAttributes.filter((card) =>
+    getCardAttributes(card, "cardtype").includes("ingredients ")
+  );
+  const ingredientsRichText = cardWithIngredients[0]["story-elements"][0].text;
+  const ingredients = extractTextFromHtmlString(ingredientsRichText);
+  const instructions = [];
+
+  return {
+    "@context": "https://schema.org/",
+    "@type": "Recipe",
+    name: headline,
+    url: url,
+    author: {
+      "@type": "Person",
+      name: authorName,
+    },
+    description: story.description,
+    recipeIngredient: ingredients,
+    recipeInstructions: instructions,
+  };
+}

src/structured-data/structured-data-tags.js

@@ -3,6 +3,7 @@ import { getQueryParams, stripMillisecondsFromTime } from "../utils";
 import { generateTagsForEntity } from "./entity";
 import {
   generateAuthorPageSchema,
+  generateRecipePageSchema,
   getSchemaBlogPosting,
   getSchemaBreadcrumbList,
   getSchemaContext,
@@ -265,11 +266,11 @@ function generateLiveBlogPostingData(structuredData = {}, story = {}, publisherC
 function getEmbedUrl(cards) {
   const playerUrlMapping = {
     "dailymotion-embed-script": "dailymotion-url",
-    "instagram": "instagram-url",
+    instagram: "instagram-url",
     "facebook-video": "facebook-url",
-    "tweet": "tweet-url",
+    tweet: "tweet-url",
     "vimeo-video": "vimeo-url",
-    "brightcove-video": "player-url"
+    "brightcove-video": "player-url",
   };
 
   for (const card of cards) {
@@ -280,7 +281,7 @@ function getEmbedUrl(cards) {
         if (elem.metadata && elem.metadata[playerUrlField]) {
           return elem.metadata[playerUrlField];
         }
-      };
+      }
       if (elem.type === "youtube-video" && elem.subtype === null) {
         if (elem.url) {
           return elem.url;
@@ -446,7 +447,6 @@ export function StructuredDataTags({ structuredData = {} }, config, pageType, re
   const isStructuredDataEmpty = Object.keys(structuredData).length === 0;
   const enableBreadcrumbList = get(structuredData, ["enableBreadcrumbList"], true);
   const structuredDataTags = get(structuredData, ["structuredDataTags"], []);
-
   let articleData = {};
 
   if (!isStructuredDataEmpty) {
@@ -475,6 +475,23 @@ export function StructuredDataTags({ structuredData = {} }, config, pageType, re
   if (!isStructuredDataEmpty && pageType === "story-page") {
     const newsArticleTags = generateNewsArticleTags();
     newsArticleTags ? tags.push(storyTags(), newsArticleTags) : tags.push(storyTags());
+    if (story["story-template"] === "recipe") {
+      const recipeTags = generateRecipePageSchema(story);
+      recipeTags.image = Object.assign(
+        {
+          "@type": "ImageObject",
+        },
+        generateArticleImageData(story["hero-image-s3-key"], publisherConfig)
+      );
+      recipeTags.video = Object.assign(
+        {
+          "@type": "VideoObject",
+        },
+        generateVideoArticleData(structuredData, story, publisherConfig, timezone)
+      );
+
+      tags.push(ldJson("Recipe", recipeTags));
+    }
   }
 
   if (!isStructuredDataEmpty && pageType === "story-page-amp") {

src/utils.js

@@ -8,6 +8,22 @@ export function objectToTags(object) {
     .map(([key, value]) => ({ [getPropertyName(key)]: key, content: value }));
 }
 
+export function extractTextFromHtmlString(html) {
+  const regex = /<p>(.*?)<\/p>/g;
+  const textContents = [];
+
+  let match;
+  while ((match = regex.exec(html)) !== null) {
+    textContents.push(match[1]);
+  }
+
+  return textContents;
+}
+
+export const getCardAttributes = (card, type) => {
+  return card.metadata.attributes[type];
+};
+
 function getPropertyName(key) {
   return key.startsWith("fb:") || key.startsWith("og:") ? "property" : "name";
 }