@quintype/seo 1.41.4 → 1.41.5-description-fallback.0

package/dist/index.cjs.js

@@ -49,6 +49,20 @@ function isStoryPublic(story) {
   return story.access === undefined || story.access === null || story.access === 'public';
 }
 
+function getTextOfCards(story) {
+  if (story && story.cards) {
+    story.cards.map(item => {
+      return item['story-elements'].reduce((acc, currentItem) => {
+        const elementType = currentItem.subtype || currentItem.type || '';
+        if (elementType === 'text') {
+          acc.push(currentItem.text);
+        }
+        return acc;
+      }, []);
+    }).join(' ').replace(/(<([^>]+)>)/gi, '');
+  }
+}
+
 function showAmpTag({ ampStoryPages = true }, pageType, story) {
   if (!ampStoryPages || pageType !== "story-page") {
     return false;
@@ -931,7 +945,7 @@ function StructuredDataTags({ structuredData = {} }, config, pageType, response
   return tags;
 }
 
-function buildTagsFromStory(config, story, url = {}, data = {}) {
+function buildTagsFromStory(config, story, url = {}, data = {}, seoConfig = {}) {
   if (!story) return;
 
   function getStoryCardMetadata(cardId) {
@@ -952,18 +966,27 @@ function buildTagsFromStory(config, story, url = {}, data = {}) {
 
   const seo = story.seo || {};
 
-  const storyUrl = story.url || `${config["sketches-host"]}/${story.slug}`;
+  let descriptionWithExtraFallback = "";
+  let ogDescriptionWithExtraFallback = "";
+  if (seoConfig.enableMetaDescriptionFallback) {
+    const fetch160Characters = data => data ? data.substring(0, 160) : null;
+    const fullStoryTextElementContent = getTextOfCards(story);
+    descriptionWithExtraFallback = fetch160Characters(story.subheadline) || fetch160Characters(fullStoryTextElementContent);
+    ogDescriptionWithExtraFallback = fetch160Characters(fullStoryTextElementContent) || fetch160Characters(story.subheadline) || seo["meta-description"];
+  }
 
+  const storyUrl = story.url || `${config["sketches-host"]}/${story.slug}`;
   const customSeo = lodash.get(data, ["data", "customSeo"], {});
   const authors = lodash.get(story, ["authors"], []).map(author => author.name);
   const title = customSeo.title || seo["meta-title"] || story.headline;
   const pageTitle = customSeo["page-title"] || seo["meta-title"] || story.headline;
-  const description = customSeo.description || seo["meta-description"] || story.summary;
+  const description = customSeo.description || seo["meta-description"] || story.summary || descriptionWithExtraFallback;
   const keywords = (customSeo.keywords || seo["meta-keywords"] || (story.tags || []).map(tag => tag.name)).join(",");
   const ogUrl = customSeo.ogUrl || lodash.get(seo, ["og", "url"]) || storyUrl;
   const getOgTitle = customSeo.ogTitle || lodash.get(story, ["alternative", "social", "default", "headline"], story.headline) || story.headline;
-  const ogDescription = customSeo.ogDescription || story.summary;
+  const ogDescription = customSeo.ogDescription || story.summary || ogDescriptionWithExtraFallback;
   const canonicalUrl = customSeo.canonicalUrl || story["canonical-url"] || storyUrl;
+
   const storyMetaData = {
     title,
     "page-title": pageTitle,
@@ -1147,11 +1170,11 @@ function getSeoData(config, pageType, data, url = {}, seoConfig = {}) {
     case "tag-page":
       return buildTagsFromTopic(config, lodash.get(data, ["data", "tag"]), url, data) || getSeoData(config, "home-page", data, url);
     case "story-page":
-      return buildTagsFromStory(config, lodash.get(data, ["data", "story"]), url, data) || getSeoData(config, "home-page", data, url);
+      return buildTagsFromStory(config, lodash.get(data, ["data", "story"]), url, data, seoConfig) || getSeoData(config, "home-page", data, url);
     case "visual-story":
-      return buildTagsFromStory(config, lodash.get(data, ["story"]), url, data) || getSeoData(config, "home-page", data, url);
+      return buildTagsFromStory(config, lodash.get(data, ["story"]), url, data, seoConfig) || getSeoData(config, "home-page", data, url);
     case "story-page-amp":
-      return buildTagsFromStory(config, lodash.get(data, ["data", "story"]), url, data) || getSeoData(config, "home-page", data, url);
+      return buildTagsFromStory(config, lodash.get(data, ["data", "story"]), url, data, seoConfig) || getSeoData(config, "home-page", data, url);
     case "author-page":
       return buildTagsFromAuthor(config, lodash.get(data, ["data", "author"], {}), url, data) || getSeoData(config, "home-page", data, url);
     case "static-page":
@@ -1204,6 +1227,7 @@ const SKIP_CANONICAL = "__SKIP__CANONICAL__";
  * @param {boolean} seoConfig.enableOgTags Add og tags for Facebook
  * @param {boolean} seoConfig.enableTwitterCards Add twitter tags
  * @param {boolean} seoConfig.enableNews Add tags for Google News, like news_keywords
+ * @param {boolean} seoConfig.enableMetaDescriptionsFallback Add extra fallbacks for meta description, og:description and twitter:description
  * @param {Object} seoConfig.customTags Add tags for a custom page type. Usually looks like `{"custom-page": {"title": "value", "canonicalUrl": "value"}}`
  * @param {...*} params See {@link Generator} for other Parameters
  */
@@ -1338,7 +1362,8 @@ class MetaTagList {
  *     },
  *     enableNewsArticle: true
  *   },
- *   ampStoryPages: true
+ *   ampStoryPages: true,
+ *   enableMetaDescriptionsFallback: true
  * });
  * ```
  */

package/index.js

@@ -93,7 +93,8 @@ export class MetaTagList {
  *     },
  *     enableNewsArticle: true
  *   },
- *   ampStoryPages: true
+ *   ampStoryPages: true,
+ *   enableMetaDescriptionsFallback: true
  * });
  * ```
  */

package/package.json

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

package/src/text-tags.js

@@ -1,7 +1,7 @@
 import { get, isEmpty } from "lodash";
-import { objectToTags } from "./utils";
+import { getTextOfCards, objectToTags } from "./utils";
 
-function buildTagsFromStory(config, story, url = {}, data = {}) {
+function buildTagsFromStory(config, story, url = {}, data = {}, seoConfig = {}) {
   if (!story) return;
 
   function getStoryCardMetadata(cardId) {
@@ -22,19 +22,32 @@ function buildTagsFromStory(config, story, url = {}, data = {}) {
 
   const seo = story.seo || {};
 
-  const storyUrl = story.url || `${config["sketches-host"]}/${story.slug}`;
+  let descriptionWithExtraFallback = "";
+  let ogDescriptionWithExtraFallback = "";
+  if (seoConfig.enableMetaDescriptionFallback) {
+    const fetch160Characters = (data) => (data ? data.substring(0, 160) : null);
+    const fullStoryTextElementContent = getTextOfCards(story);
+    descriptionWithExtraFallback =
+      fetch160Characters(story.subheadline) || fetch160Characters(fullStoryTextElementContent);
+    ogDescriptionWithExtraFallback =
+      fetch160Characters(fullStoryTextElementContent) ||
+      fetch160Characters(story.subheadline) ||
+      seo["meta-description"];
+  }
 
+  const storyUrl = story.url || `${config["sketches-host"]}/${story.slug}`;
   const customSeo = get(data, ["data", "customSeo"], {});
   const authors = get(story, ["authors"], []).map((author) => author.name);
   const title = customSeo.title || seo["meta-title"] || story.headline;
   const pageTitle = customSeo["page-title"] || seo["meta-title"] || story.headline;
-  const description = customSeo.description || seo["meta-description"] || story.summary;
+  const description = customSeo.description || seo["meta-description"] || story.summary || descriptionWithExtraFallback;
   const keywords = (customSeo.keywords || seo["meta-keywords"] || (story.tags || []).map((tag) => tag.name)).join(",");
   const ogUrl = customSeo.ogUrl || get(seo, ["og", "url"]) || storyUrl;
   const getOgTitle =
     customSeo.ogTitle || get(story, ["alternative", "social", "default", "headline"], story.headline) || story.headline;
-  const ogDescription = customSeo.ogDescription || story.summary;
+  const ogDescription = customSeo.ogDescription || story.summary || ogDescriptionWithExtraFallback;
   const canonicalUrl = customSeo.canonicalUrl || story["canonical-url"] || storyUrl;
+
   const storyMetaData = {
     title,
     "page-title": pageTitle,
@@ -230,14 +243,17 @@ function getSeoData(config, pageType, data, url = {}, seoConfig = {}) {
       );
     case "story-page":
       return (
-        buildTagsFromStory(config, get(data, ["data", "story"]), url, data) ||
+        buildTagsFromStory(config, get(data, ["data", "story"]), url, data, seoConfig) ||
         getSeoData(config, "home-page", data, url)
       );
     case "visual-story":
-      return buildTagsFromStory(config, get(data, ["story"]), url, data) || getSeoData(config, "home-page", data, url);
+      return (
+        buildTagsFromStory(config, get(data, ["story"]), url, data, seoConfig) ||
+        getSeoData(config, "home-page", data, url)
+      );
     case "story-page-amp":
       return (
-        buildTagsFromStory(config, get(data, ["data", "story"]), url, data) ||
+        buildTagsFromStory(config, get(data, ["data", "story"]), url, data, seoConfig) ||
         getSeoData(config, "home-page", data, url)
       );
     case "author-page":
@@ -298,6 +314,7 @@ const SKIP_CANONICAL = "__SKIP__CANONICAL__";
  * @param {boolean} seoConfig.enableOgTags Add og tags for Facebook
  * @param {boolean} seoConfig.enableTwitterCards Add twitter tags
  * @param {boolean} seoConfig.enableNews Add tags for Google News, like news_keywords
+ * @param {boolean} seoConfig.enableMetaDescriptionsFallback Add extra fallbacks for meta description, og:description and twitter:description
  * @param {Object} seoConfig.customTags Add tags for a custom page type. Usually looks like `{"custom-page": {"title": "value", "canonicalUrl": "value"}}`
  * @param {...*} params See {@link Generator} for other Parameters
  */

package/src/utils.js

@@ -33,3 +33,20 @@ export function getQueryParams(url) {
 export function isStoryPublic(story) {
   return story.access === undefined || story.access === null || story.access === 'public';
 }
+
+export function getTextOfCards(story) {
+  if (story && story.cards) {
+    story.cards
+      .map((item) => {
+        return item['story-elements'].reduce((acc, currentItem) => {
+          const elementType = currentItem.subtype || currentItem.type || '';
+          if (elementType === 'text') {
+            acc.push(currentItem.text);
+          }
+          return acc;
+        }, []);
+      })
+      .join(' ')
+      .replace(/(<([^>]+)>)/gi, '');
+  }
+}