fix(meta_tags): add special case for dealing with json-ld scripts

lib/meta_tags.js

@@ -138,6 +138,9 @@ function (_Component) {
           } else if (tag === 'link' && child.rel === 'canonical') {
             var link = (0, _utils.getDuplicateCanonical)(child);
             if (link) (0, _utils.removeChild)(head, link);
+          } else if (tag === 'script' && child.type === 'application/ld+json') {
+            var script = (0, _utils.getDuplicateJsonLd)(child);
+            if (script) (0, _utils.removeChild)(head, script);
           }
         });
         (0, _utils.appendChild)(document.head, childNodes);

lib/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.filterAndArrangeTags = filterAndArrangeTags;
 exports.getDuplicateTitle = getDuplicateTitle;
 exports.getDuplicateCanonical = getDuplicateCanonical;
+exports.getDuplicateJsonLd = getDuplicateJsonLd;
 exports.getDuplicateMeta = getDuplicateMeta;
 exports.appendChild = appendChild;
 exports.removeChild = removeChild;
@@ -83,7 +84,7 @@ function removeDuplicateMetas(metas) {
     }
 
     if (addMeta) {
-      filteredMetas.unshift(meta); //add meta as added 
+      filteredMetas.unshift(meta); //add meta as added
 
       uniqueIdentifiersAll.forEach(function (identifier) {
         var identifierValue = meta.props[identifier];
@@ -107,6 +108,10 @@ function getDuplicateCanonical() {
   return document.head.querySelectorAll('link[rel="canonical"]');
 }
 
+function getDuplicateJsonLd() {
+  return document.head.querySelectorAll('script[type="application/ld+json"]');
+}
+
 function getDuplicateMeta(meta) {
   var head = document.head;
   var id = meta.id; //if has id and element with id is not present than return the element

src/meta_tags.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import {getDuplicateTitle, getDuplicateCanonical, getDuplicateMeta, appendChild, removeChild} from './utils';
+import {getDuplicateTitle, getDuplicateCanonical, getDuplicateMeta, getDuplicateJsonLd, appendChild, removeChild} from './utils';
 
 
 /** An wrapper component to wrap element which need to shifted to head **/
@@ -85,6 +85,9 @@ class MetaTags extends Component {
         } else if (tag === 'link' && child.rel === 'canonical') {
           const link = getDuplicateCanonical(child);
           if (link) removeChild(head, link);
+        } else if (tag === 'script' && child.type === 'application/ld+json') {
+          const script = getDuplicateJsonLd(child);
+          if (script) removeChild(head, script);
         }
       });
 

src/utils.js

@@ -1,5 +1,5 @@
-const camelCaseProps = ['itemProp']; 
-const uniqueIdentifiersI = ['property', 'name', 'itemprop']; 
+const camelCaseProps = ['itemProp'];
+const uniqueIdentifiersI = ['property', 'name', 'itemprop'];
 const uniqueIdentifiers = uniqueIdentifiersI.concat(camelCaseProps); //case sensitive props is defined in case anyone defined the lowercase prop
 const uniqueIdentifiersAll = uniqueIdentifiers.concat(['id']);
 
@@ -39,7 +39,7 @@ export function filterAndArrangeTags(headElms) {
 
 function removeDuplicateMetas(metas) {
   const addedMeta = {};
-  
+
   //initialize all the identifiers with empty array
   uniqueIdentifiersAll.forEach((identifier) => {
     addedMeta[identifier] = [];
@@ -68,10 +68,10 @@ function removeDuplicateMetas(metas) {
     if (addMeta) {
       filteredMetas.unshift(meta);
 
-      //add meta as added 
+      //add meta as added
       uniqueIdentifiersAll.forEach((identifier) => {
         const identifierValue = meta.props[identifier];
-        if (identifierValue) addedMeta[identifier][identifierValue] = meta; 
+        if (identifierValue) addedMeta[identifier][identifierValue] = meta;
       });
     }
   }
@@ -87,19 +87,23 @@ export function getDuplicateCanonical() {
   return document.head.querySelectorAll('link[rel="canonical"]');
 }
 
+export function getDuplicateJsonLd() {
+  return document.head.querySelectorAll('script[type="application/ld+json"]');
+}
+
 export function getDuplicateMeta(meta) {
   const head = document.head;
   const { id } = meta;
 
   //if has id and element with id is not present than return the element
   if (id) {
     return id && head.querySelector(`#${id}`);
-  } 
+  }
 
   //for any other unique identifier check if metas already available with same identifier which doesn't have id
   return uniqueIdentifiersI.reduce((duplicates, identifier) => {
     const identifierValue = meta.getAttribute(identifier);
-    return (identifierValue ? 
+    return (identifierValue ?
       duplicates.concat(filterOutMetaWithId(head.querySelectorAll(`[${identifier} = "${identifierValue}"]`))) :
       duplicates);
   }, []);