@quintype/seo 1.42.0 → 1.42.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.42.1](https://github.com/quintype/quintype-node-seo/compare/v1.42.0...v1.42.1) (2023-04-06)
+
+## [1.42.0](https://github.com/quintype/quintype-node-seo/compare/v1.40.10...v1.42.0) (2023-04-06)
+
+
+### Features
+
+* **canonical:** Add canonical url toggle ([#539](https://github.com/quintype/quintype-node-seo/issues/539)) ([3c18124](https://github.com/quintype/quintype-node-seo/commit/3c181249b7adb06061a8a4c16aa71b640b21679c))
+
+
+### Bug Fixes
+
+* **canonical:** Toggle canonical tags ([1f8a4fe](https://github.com/quintype/quintype-node-seo/commit/1f8a4fe0955688080095275290dabe79dc6344d6))
+* **dates:**  update  datePublished ([#537](https://github.com/quintype/quintype-node-seo/issues/537)) ([b81f1ae](https://github.com/quintype/quintype-node-seo/commit/b81f1aeef63937673f376203a8d7a45b7a0de2b3))
+* **discover-meta:** Add max image meta tag to story pages ([e96fa17](https://github.com/quintype/quintype-node-seo/commit/e96fa17637e2a625aa39601d2ace8ad2ea46d786))
+* **live-blog:** Support articleBody in BlogPosting schema ([#532](https://github.com/quintype/quintype-node-seo/issues/532)) ([4389509](https://github.com/quintype/quintype-node-seo/commit/43895094aa2d7c1cafb347a539ad70a16b06727e))
+
 ## [1.42.0](https://github.com/quintype/quintype-node-seo/compare/v1.40.13...v1.42.0) (2023-04-03)
 
 

package/dist/index.cjs.js

@@ -6,8 +6,8 @@ var lodash = require('lodash');
 var React = require('react');
 var ReactDomServer = require('react-dom/server');
 var get = require('lodash/get');
-var url = require('url');
 var dateFnsTz = require('date-fns-tz');
+var url = require('url');
 var isUndefined = require('lodash/isUndefined');
 var omitBy = require('lodash/omitBy');
 var quintypeJs = require('quintype-js');
@@ -25,7 +25,7 @@ function objectToTags(object) {
 }
 
 function getPropertyName(key) {
-  return key.startsWith('fb:') || key.startsWith('og:') ? 'property' : 'name';
+  return key.startsWith("fb:") || key.startsWith("og:") ? "property" : "name";
 }
 
 function stripMillisecondsFromTime(date, timezone) {
@@ -33,20 +33,28 @@ function stripMillisecondsFromTime(date, timezone) {
   if (!toReturn) return toReturn;
   const zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
   const formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
-  const formatToReturn = toReturn.split('.')[0] + "Z";
+  const formatToReturn = toReturn.split(".")[0] + "Z";
   return timezone ? formatZonedTime : formatToReturn;
 }
 
 function getQueryParams(url$1) {
   const urlObj = new url.URL(url$1);
   const search_params = new url.URLSearchParams(urlObj.search);
-  const getWidth = search_params.get('w') || '';
-  const getHeight = search_params.get('h') || '';
+  const getWidth = search_params.get("w") || "";
+  const getHeight = search_params.get("h") || "";
   return { width: getWidth, height: getHeight };
 }
 
 function isStoryPublic(story) {
-  return story.access === undefined || story.access === null || story.access === 'public';
+  return story.access === undefined || story.access === null || story.access === "public";
+}
+
+function getWatermarkImage(story, cdnSrc, cdnURL) {
+  const watermarkImageS3Key = lodash.get(story, ["watermark", "social", "image-s3-key"], "");
+  if (cdnSrc && cdnSrc.includes("gumlet") && watermarkImageS3Key.length > 0) {
+    return `https://${cdnURL}/${watermarkImageS3Key}`;
+  }
+  return watermarkImageS3Key;
 }
 
 function showAmpTag({ ampStoryPages = true }, pageType, story) {
@@ -320,6 +328,14 @@ function pickImage({ pageType, config, seoConfig, data, url }) {
  */
 function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   const { image, alt, includesHost = false } = pickImage({ pageType, data, url, seoConfig, config });
+  const dataObj = lodash.get(data, ["data"], {});
+  const story = lodash.get(dataObj, ["story"], {});
+  const publisherConfig = lodash.get(data, ["config", "publisher-attributes"], {});
+  const fallbackValue = dataObj.hasOwnProperty("collection") ? true : false;
+  const isWatermarkDisabled = lodash.get(story, ["metadata", "watermark-image", "disabled"], fallbackValue);
+  const imageCdnSrc = publisherConfig.cdn_src;
+  const imageCdnUrl = publisherConfig.cdn_image || config["cdn-image"];
+  const fallbackSocialImage = lodash.get(seoConfig, ["fallbackSocialImage"]);
 
   if (!image) {
     return [];
@@ -330,16 +346,52 @@ function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (pageType == "story-page") {
     tags.push({ name: "robots", content: "max-image-preview:large" });
   }
+  const getHeroImage = (imageRatio, imageProp) => {
+    return includesHost ? image : `https://${imageCdnUrl}/${image.path(imageRatio, imageProp)}`;
+  };
+
+  const getWatermarkHeroImage = (imageRatio, imageProp) => {
+    const overlayWatermarkProps = Object.assign({}, imageProp, {
+      overlay: getWatermarkImage(story, imageCdnSrc, imageCdnUrl),
+      overlay_position: "bottom"
+    });
+
+    const watermarkImageProps = imageCdnSrc && imageCdnSrc.includes("gumlet") ? Object.assign({}, overlayWatermarkProps, {
+      overlay_width_pct: 1
+    }) : Object.assign({}, overlayWatermarkProps, {
+      overlay_width: 100
+    });
+
+    const getFallbackImage = () => {
+      if (fallbackSocialImage) {
+        const fbUrl = new URL(fallbackSocialImage);
+        const fbImageSlug = new quintypeJs.FocusedImage(fbUrl.href.slice(fbUrl.origin.length + 1));
+        const fbHost = new URL(fallbackSocialImage).origin;
+        return `${fbHost}/${fbImageSlug.path(imageRatio, watermarkImageProps)}`;
+      } else {
+        return image;
+      }
+    };
+
+    return includesHost ? getFallbackImage() : `https://${imageCdnUrl}/${image.path(imageRatio, watermarkImageProps)}`;
+  };
+
+  const getImageContent = imageRatio => {
+    const imageProp = {
+      w: 1200,
+      ar: imageRatio.join(":"),
+      auto: "format,compress",
+      ogImage: true,
+      mode: "crop",
+      enlarge: true
+    };
+    return isWatermarkDisabled ? getHeroImage(imageRatio, imageProp) : getWatermarkHeroImage(imageRatio, imageProp);
+  };
 
   if (seoConfig.enableTwitterCards) {
     tags.push({
       name: "twitter:image",
-      content: includesHost ? image : `https://${config["cdn-image"]}/${image.path([16, 9], {
-        w: 1200,
-        auto: "format,compress",
-        ogImage: true,
-        enlarge: true
-      })}`
+      content: getImageContent([40, 21])
     });
     alt && tags.push({ property: "twitter:image:alt", content: alt });
   }
@@ -347,12 +399,7 @@ function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (seoConfig.enableOgTags) {
     tags.push({
       property: "og:image",
-      content: includesHost ? image : `https://${config["cdn-image"]}/${image.path([40, 21], {
-        w: 1200,
-        auto: "format,compress",
-        ogImage: true,
-        enlarge: true
-      })}`
+      content: getImageContent([40, 21])
     });
     tags.push({ property: "og:image:width", content: 1200 });
     if (lodash.get(image, ["metadata", "focus-point"])) {
@@ -587,6 +634,7 @@ function generateArticleData(structuredData = {}, story = {}, publisherConfig =
 function generateArticleImageData(image, publisherConfig = {}) {
   const imageWidth = 1200;
   const imageHeight = 675;
+
   const articleImage = imageUrl(publisherConfig, image, imageWidth, imageHeight);
 
   return Object.assign({}, {

package/package.json

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

package/src/image-tags.js

@@ -1,5 +1,6 @@
 import { get, isEmpty } from "lodash";
 import { FocusedImage } from "quintype-js";
+import { getWatermarkImage } from "./utils";
 
 function pickImageFromCard(story, cardId) {
   const { metadata = {} } = story.cards.find((card) => card.id === cardId) || {};
@@ -112,6 +113,14 @@ function pickImage({ pageType, config, seoConfig, data, url }) {
  */
 export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   const { image, alt, includesHost = false } = pickImage({ pageType, data, url, seoConfig, config });
+  const dataObj = get(data, ["data"], {});
+  const story = get(dataObj, ["story"], {});
+  const publisherConfig = get(data, ["config", "publisher-attributes"], {});
+  const fallbackValue = dataObj.hasOwnProperty("collection") ? true : false;
+  const isWatermarkDisabled = get(story, ["metadata", "watermark-image", "disabled"], fallbackValue);
+  const imageCdnSrc = publisherConfig.cdn_src;
+  const imageCdnUrl = publisherConfig.cdn_image || config["cdn-image"];
+  const fallbackSocialImage = get(seoConfig, ["fallbackSocialImage"]);
 
   if (!image) {
     return [];
@@ -122,18 +131,55 @@ export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (pageType == "story-page") {
     tags.push({ name: "robots", content: "max-image-preview:large" });
   }
+  const getHeroImage = (imageRatio, imageProp) => {
+    return includesHost ? image : `https://${imageCdnUrl}/${image.path(imageRatio, imageProp)}`;
+  };
+
+  const getWatermarkHeroImage = (imageRatio, imageProp) => {
+    const overlayWatermarkProps = Object.assign({}, imageProp, {
+      overlay: getWatermarkImage(story, imageCdnSrc, imageCdnUrl),
+      overlay_position: "bottom",
+    });
+
+    const watermarkImageProps =
+      imageCdnSrc && imageCdnSrc.includes("gumlet")
+        ? Object.assign({}, overlayWatermarkProps, {
+            overlay_width_pct: 1,
+          })
+        : Object.assign({}, overlayWatermarkProps, {
+            overlay_width: 100,
+          });
+
+    const getFallbackImage = () => {
+      if (fallbackSocialImage) {
+        const fbUrl = new URL(fallbackSocialImage);
+        const fbImageSlug = new FocusedImage(fbUrl.href.slice(fbUrl.origin.length + 1));
+        const fbHost = new URL(fallbackSocialImage).origin;
+        return `${fbHost}/${fbImageSlug.path(imageRatio, watermarkImageProps)}`;
+      } else {
+        return image;
+      }
+    };
+
+    return includesHost ? getFallbackImage() : `https://${imageCdnUrl}/${image.path(imageRatio, watermarkImageProps)}`;
+  };
+
+  const getImageContent = (imageRatio) => {
+    const imageProp = {
+      w: 1200,
+      ar: imageRatio.join(":"),
+      auto: "format,compress",
+      ogImage: true,
+      mode: "crop",
+      enlarge: true,
+    };
+    return isWatermarkDisabled ? getHeroImage(imageRatio, imageProp) : getWatermarkHeroImage(imageRatio, imageProp);
+  };
 
   if (seoConfig.enableTwitterCards) {
     tags.push({
       name: "twitter:image",
-      content: includesHost
-        ? image
-        : `https://${config["cdn-image"]}/${image.path([16, 9], {
-            w: 1200,
-            auto: "format,compress",
-            ogImage: true,
-            enlarge: true,
-          })}`,
+      content: getImageContent([40, 21]),
     });
     alt && tags.push({ property: "twitter:image:alt", content: alt });
   }
@@ -141,14 +187,7 @@ export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (seoConfig.enableOgTags) {
     tags.push({
       property: "og:image",
-      content: includesHost
-        ? image
-        : `https://${config["cdn-image"]}/${image.path([40, 21], {
-            w: 1200,
-            auto: "format,compress",
-            ogImage: true,
-            enlarge: true,
-          })}`,
+      content: getImageContent([40, 21]),
     });
     tags.push({ property: "og:image:width", content: 1200 });
     if (get(image, ["metadata", "focus-point"])) {

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

@@ -129,6 +129,7 @@ function generateArticleData(structuredData = {}, story = {}, publisherConfig =
 function generateArticleImageData(image, publisherConfig = {}) {
   const imageWidth = 1200;
   const imageHeight = 675;
+
   const articleImage = imageUrl(publisherConfig, image, imageWidth, imageHeight);
 
   return Object.assign(

package/src/utils.js

@@ -1,35 +1,42 @@
-import {entries} from 'lodash';
-import { URL, URLSearchParams } from 'url';
-import { format, utcToZonedTime } from 'date-fns-tz';
+import { format, utcToZonedTime } from "date-fns-tz";
+import { entries, get } from "lodash";
+import { URL, URLSearchParams } from "url";
 
 export function objectToTags(object) {
   return entries(object)
     .filter(([key, value]) => value)
-    .map(([key, value]) => ({[getPropertyName(key)]: key, content: value}));
+    .map(([key, value]) => ({ [getPropertyName(key)]: key, content: value }));
 }
 
 function getPropertyName(key) {
-  return (key.startsWith('fb:') || key.startsWith('og:')) ? 'property' : 'name';
+  return key.startsWith("fb:") || key.startsWith("og:") ? "property" : "name";
 }
 
 export function stripMillisecondsFromTime(date, timezone) {
   const toReturn = date.toJSON();
-  if(!toReturn)
-    return toReturn
+  if (!toReturn) return toReturn;
   const zonedTime = timezone && utcToZonedTime(date, timezone);
   const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
-  const formatToReturn = toReturn.split('.')[0]+"Z";
+  const formatToReturn = toReturn.split(".")[0] + "Z";
   return timezone ? formatZonedTime : formatToReturn;
 }
 
 export function getQueryParams(url) {
-  const urlObj =  new URL(url);
+  const urlObj = new URL(url);
   const search_params = new URLSearchParams(urlObj.search);
-  const getWidth = search_params.get('w') || '';
-  const getHeight = search_params.get('h') || '';
-  return {width: getWidth, height: getHeight};
+  const getWidth = search_params.get("w") || "";
+  const getHeight = search_params.get("h") || "";
+  return { width: getWidth, height: getHeight };
 }
 
 export function isStoryPublic(story) {
-  return story.access === undefined || story.access === null || story.access === 'public';
+  return story.access === undefined || story.access === null || story.access === "public";
+}
+
+export function getWatermarkImage(story, cdnSrc, cdnURL) {
+  const watermarkImageS3Key = get(story, ["watermark", "social", "image-s3-key"], "");
+  if (cdnSrc && cdnSrc.includes("gumlet") && watermarkImageS3Key.length > 0) {
+    return `https://${cdnURL}/${watermarkImageS3Key}`;
+  }
+  return watermarkImageS3Key;
 }

package/test/image_tags_test.js

@@ -17,6 +17,16 @@ describe("ImageTags", function () {
   it("gets the twitter tags", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
+      metadata: {
+        "watermark-image": {
+          disabled: true,
+        },
+      },
+      watermark: {
+        social: {
+          "image-s3-key": "my/watermark-image.png",
+        },
+      },
       alternative: {
         social: {
           default: {
@@ -39,11 +49,55 @@ describe("ImageTags", function () {
     const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, {});
     const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, {});
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
       string
     );
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      ampPageString
+    );
+  });
+
+  it("gets the twitter tags with watermark", function () {
+    const story = {
+      "hero-image-s3-key": "my/image.png",
+      metadata: {
+        "watermark-image": {
+          disabled: false,
+        },
+      },
+      watermark: {
+        social: {
+          "image-s3-key": "my/watermark-image.png",
+        },
+      },
+      alternative: {
+        social: {
+          default: {
+            headline: null,
+            "hero-image": {
+              "hero-image-s3-key": "my/socialimage.png",
+            },
+          },
+        },
+        home: {
+          default: {
+            headline: null,
+            "hero-image": {
+              "hero-image-s3-key": "my/homeimage.png",
+            },
+          },
+        },
+      },
+    };
+    const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, {});
+    const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, {});
+    assertContains(
+      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true&amp;overlay=my%2Fwatermark-image.png&amp;overlay_position=bottom&amp;overlay_width=100"/>',
+      string
+    );
+    assertContains(
+      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true&amp;overlay=my%2Fwatermark-image.png&amp;overlay_position=bottom&amp;overlay_width=100"/>',
       ampPageString
     );
   });
@@ -78,6 +132,11 @@ describe("ImageTags", function () {
   it("has facebook tags resized correctly", function () {
     const story = {
       "hero-image-s3-key": "my/images.png",
+      metadata: {
+        "watermark-image": {
+          disabled: true,
+        },
+      },
       "hero-image-metadata": {
         width: 2400,
         height: 1260,
@@ -115,11 +174,11 @@ describe("ImageTags", function () {
     const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, {});
     const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, {});
     assertContains(
-      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
       string
     );
     assertContains(
-      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
       ampPageString
     );
     assertContains('<meta property="og:image:width" content="1200"/>', string);
@@ -131,6 +190,11 @@ describe("ImageTags", function () {
   it("gets card image values instead of story image values on card share", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
+      metadata: {
+        "watermark-image": {
+          disabled: true,
+        },
+      },
       cards: [
         {
           id: "sample-card-id",
@@ -163,7 +227,7 @@ describe("ImageTags", function () {
     const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, opts);
 
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fcard%2Fimage.jpg?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fcard%2Fimage.jpg?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
       string
     );
   });
@@ -318,6 +382,11 @@ describe("ImageTags", function () {
   it("gets story data as fallback if the card metadata is falsy", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
+      metadata: {
+        "watermark-image": {
+          disabled: true,
+        },
+      },
       cards: [
         {
           id: "sample-card-id",
@@ -343,11 +412,11 @@ describe("ImageTags", function () {
     const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, opts);
 
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
       string
     );
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
       ampPageString
     );
   });
@@ -368,7 +437,7 @@ describe("ImageTags", function () {
       };
       const string = getSeoMetadata(seoConfig, config, "home-page", { data: { collection: collection } }, {});
       assertContains(
-        '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
+        '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
         string
       );
       assertContains('<meta property="og:image:width" content="1200"/>', string);