@quintype/seo 1.48.0-recipe-schema.0 → 1.48.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.48.0](https://github.com/quintype/quintype-node-seo/compare/v1.47.0...v1.48.0) (2024-12-11)
+
+
+### Features
+
+* **media-gallery:** add media gallery schema to visual stories ([#565](https://github.com/quintype/quintype-node-seo/issues/565)) ([34ded03](https://github.com/quintype/quintype-node-seo/commit/34ded036225af150d8085c6d108b5c8bbacece73))
+
 ## [1.47.0](https://github.com/quintype/quintype-node-seo/compare/v1.46.5...v1.47.0) (2024-10-30)
 
 

package/dist/index.cjs.js

@@ -57,6 +57,22 @@ function getWatermarkImage(story, cdnSrc, cdnURL) {
   return watermarkImageS3Key;
 }
 
+function getAllowedCards(card) {
+  const storyElementWhitelist = ["text", "title", "image", "video"];
+  const validCards = card["story-elements"].some(el => {
+    if (el.type === "jsembed") {
+      const videoUrl = el && atob(`${el["embed-js"]}`);
+      const formatWhitelist = ["mp4", "webm", "ogv"];
+      const isValidVideoUrl = formatWhitelist.some(format => {
+        return videoUrl && videoUrl.endsWith(format);
+      });
+      return isValidVideoUrl;
+    }
+    return storyElementWhitelist.includes(el.type);
+  });
+  return validCards;
+}
+
 function showAmpTag({ ampStoryPages = true }, pageType, story) {
   if (!ampStoryPages || pageType !== "story-page") {
     return false;
@@ -550,33 +566,6 @@ function generateAuthorPageSchema(publisherConfig, data, url) {
   };
 }
 
-function generateRecipePageSchema(story) {
-  const { headline, url, "author-name": authorName, description, metadata } = story;
-  const servings = lodash.get(metadata, ["servings"], "");
-  const ingredients = lodash.get(metadata, ["ingredients"], "");
-  const recipeAttributes = lodash.get(metadata, ["story-attributes"], "");
-  const cuisine = lodash.get(recipeAttributes, ["cuisine", "0"], "");
-  const preperationtime = lodash.get(recipeAttributes, ["preparationtime", "0"], "");
-  const cookingtime = lodash.get(recipeAttributes, ["cookingtime", "0"], "");
-
-  return {
-    "@context": "https://schema.org/",
-    "@type": "Recipe",
-    name: headline,
-    url: url,
-    author: {
-      "@type": "Person",
-      name: authorName
-    },
-    description: description,
-    recipeIngredient: ingredients,
-    prepTime: preperationtime,
-    cookTime: cookingtime,
-    recipeCuisine: cuisine,
-    recipeYield: servings
-  };
-}
-
 function getMovieEntityTags(movieJson) {
     return getSchemaMovieReview(movieJson);
 }
@@ -987,6 +976,7 @@ function StructuredDataTags({ structuredData = {} }, config, pageType, response
   const isStructuredDataEmpty = Object.keys(structuredData).length === 0;
   const enableBreadcrumbList = get__default["default"](structuredData, ["enableBreadcrumbList"], true);
   const structuredDataTags = get__default["default"](structuredData, ["structuredDataTags"], []);
+
   let articleData = {};
 
   if (!isStructuredDataEmpty) {
@@ -1015,32 +1005,13 @@ function StructuredDataTags({ structuredData = {} }, config, pageType, response
   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") {
     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 (story["story-template"] === "visual-story") {
+      tags.push(visualStorySchema());
     }
   }
 
@@ -1084,6 +1055,48 @@ function StructuredDataTags({ structuredData = {} }, config, pageType, response
     return {};
   }
 
+  function visualStorySchema() {
+    if (!story || !publisherConfig) return null;
+    const storyCards = get__default["default"](story, ["cards"], []).filter(card => getAllowedCards(card));
+    const galleryItems = storyCards.map(card => {
+      const imageElement = card["story-elements"].find(el => el.type === "image");
+      if (!imageElement) return; // for now schema is added only for images
+      const titleElement = card["story-elements"].find(el => el.type === "title");
+      const textElements = card["story-elements"].filter(el => el.type === "text" && el.subtype !== "cta");
+      const description = textElements.reduce((acc, current) => `${acc}. ${current.text}`, "");
+      return {
+        "@type": "ImageObject",
+        image: imageUrl(publisherConfig, imageElement["image-s3-key"]),
+        name: get__default["default"](titleElement, ["text"]),
+        contentUrl: story.url,
+        description: description,
+        caption: get__default["default"](imageElement, ["title"])
+      };
+    });
+    const heroImgSrc = story["hero-image-s3-key"];
+    if (heroImgSrc) {
+      galleryItems.unshift({
+        "@type": "ImageObject",
+        image: imageUrl(publisherConfig, heroImgSrc),
+        name: get__default["default"](story, ["headline"]),
+        contentUrl: story.url,
+        description: get__default["default"](story, ["subheadline"]),
+        caption: get__default["default"](story, ["hero-image-caption"])
+      });
+    }
+
+    const metaDescription = get__default["default"](story, ["seo", "meta-description"], "");
+    const subHeadline = get__default["default"](story, ["subheadline"], "");
+    const headline = get__default["default"](story, ["headline"], "");
+    const schema = Object.assign({}, getSchemaMainEntityOfPage(story.url), {
+      name: story.headline || "Media Gallery",
+      description: metaDescription || subHeadline || headline,
+      // author: authorData(story.authors, [], publisherConfig),
+      hasPart: { "@type": "ImageGallery", associatedMedia: galleryItems }
+    });
+    return ldJson("MediaGallery", schema);
+  }
+
   // All Pages have: Publisher, Site
   // Story Page have : Article/NewsArticle/LiveBlog/Review as appropriate
   return tags;

package/package.json

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

package/src/structured-data/schema.js

@@ -141,30 +141,3 @@ export function generateAuthorPageSchema(publisherConfig, data, url) {
     },
   };
 }
-
-export function generateRecipePageSchema(story) {
-  const { headline, url, "author-name": authorName, description, metadata } = story;
-  const servings = get(metadata, ["servings"], "");
-  const ingredients = get(metadata, ["ingredients"], "");
-  const recipeAttributes = get(metadata, ["story-attributes"], "");
-  const cuisine = get(recipeAttributes, ["cuisine", "0"], "");
-  const preperationtime = get(recipeAttributes, ["preparationtime", "0"], "");
-  const cookingtime = get(recipeAttributes, ["cookingtime", "0"], "");
-
-  return {
-    "@context": "https://schema.org/",
-    "@type": "Recipe",
-    name: headline,
-    url: url,
-    author: {
-      "@type": "Person",
-      name: authorName,
-    },
-    description: description,
-    recipeIngredient: ingredients,
-    prepTime: preperationtime,
-    cookTime: cookingtime,
-    recipeCuisine: cuisine,
-    recipeYield: servings,
-  };
-}

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

@@ -1,9 +1,8 @@
 import get from "lodash/get";
-import { getQueryParams, stripMillisecondsFromTime } from "../utils";
+import { getAllowedCards, getQueryParams, stripMillisecondsFromTime } from "../utils";
 import { generateTagsForEntity } from "./entity";
 import {
   generateAuthorPageSchema,
-  generateRecipePageSchema,
   getSchemaBlogPosting,
   getSchemaBreadcrumbList,
   getSchemaContext,
@@ -473,6 +472,7 @@ 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) {
@@ -501,44 +501,13 @@ 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") {
     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 (story["story-template"] === "visual-story") {
+      tags.push(visualStorySchema());
     }
   }
 
@@ -588,6 +557,48 @@ export function StructuredDataTags({ structuredData = {} }, config, pageType, re
     return {};
   }
 
+  function visualStorySchema() {
+    if (!story || !publisherConfig) return null;
+    const storyCards = get(story, ["cards"], []).filter((card) => getAllowedCards(card));
+    const galleryItems = storyCards.map((card) => {
+      const imageElement = card["story-elements"].find((el) => el.type === "image");
+      if (!imageElement) return; // for now schema is added only for images
+      const titleElement = card["story-elements"].find((el) => el.type === "title");
+      const textElements = card["story-elements"].filter((el) => el.type === "text" && el.subtype !== "cta");
+      const description = textElements.reduce((acc, current) => `${acc}. ${current.text}`, "");
+      return {
+        "@type": "ImageObject",
+        image: imageUrl(publisherConfig, imageElement["image-s3-key"]),
+        name: get(titleElement, ["text"]),
+        contentUrl: story.url,
+        description: description,
+        caption: get(imageElement, ["title"]),
+      };
+    });
+    const heroImgSrc = story["hero-image-s3-key"];
+    if (heroImgSrc) {
+      galleryItems.unshift({
+        "@type": "ImageObject",
+        image: imageUrl(publisherConfig, heroImgSrc),
+        name: get(story, ["headline"]),
+        contentUrl: story.url,
+        description: get(story, ["subheadline"]),
+        caption: get(story, ["hero-image-caption"]),
+      });
+    }
+
+    const metaDescription = get(story, ["seo", "meta-description"], "");
+    const subHeadline = get(story, ["subheadline"], "");
+    const headline = get(story, ["headline"], "");
+    const schema = Object.assign({}, getSchemaMainEntityOfPage(story.url), {
+      name: story.headline || "Media Gallery",
+      description: metaDescription || subHeadline || headline,
+      // author: authorData(story.authors, [], publisherConfig),
+      hasPart: { "@type": "ImageGallery", associatedMedia: galleryItems },
+    });
+    return ldJson("MediaGallery", schema);
+  }
+
   // All Pages have: Publisher, Site
   // Story Page have : Article/NewsArticle/LiveBlog/Review as appropriate
   return tags;

package/src/utils.js

@@ -40,3 +40,19 @@ export function getWatermarkImage(story, cdnSrc, cdnURL) {
   }
   return watermarkImageS3Key;
 }
+
+export function getAllowedCards(card) {
+  const storyElementWhitelist = ["text", "title", "image", "video"];
+  const validCards = card["story-elements"].some((el) => {
+    if (el.type === "jsembed") {
+      const videoUrl = el && atob(`${el["embed-js"]}`);
+      const formatWhitelist = ["mp4", "webm", "ogv"];
+      const isValidVideoUrl = formatWhitelist.some((format) => {
+        return videoUrl && videoUrl.endsWith(format);
+      });
+      return isValidVideoUrl;
+    }
+    return storyElementWhitelist.includes(el.type);
+  });
+  return validCards;
+}