fix(gatsby): Keep order in moved meta tags (#36158)

initial
gatsbyjs · Jul 18, 2022 · 997db76 · 997db76
1 parent ecc7530
commit 997db76
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 deletions.
diff --git a/packages/gatsby/cache-dir/__tests__/static-entry.js b/packages/gatsby/cache-dir/__tests__/static-entry.js
@@ -539,3 +539,52 @@ describe(`sanitizeComponents`, () => {
     expect(sanitizedComponents[0].props.href).toBe(`/blog/manifest.webmanifest`)
   })
 })
+
+describe(`reorderHeadComponents`, () => {
+  let reorderHeadComponents
+
+  beforeEach(() => {
+    fs.readFileSync.mockImplementation(file => MOCK_FILE_INFO[file])
+    reorderHeadComponents = require(`../static-entry`).reorderHeadComponents
+  })
+
+  const exampleHead = [
+    <style key="style1"> .style1 {} </style>,
+    <style key="style2"> .style2 {} </style>,
+    <script key="json-ld" type="application/ld+json">
+      {`
+        {
+          "@context": "https://schema.org",
+          "@type": "Organization",
+          "url": "https://www.spookytech.com",
+          "name": "Spooky technologies",
+          "contactPoint": {
+            "@type": "ContactPoint",
+            "telephone": "+5-601-785-8543",
+            "contactType": "Customer Support"
+          }
+        }
+      `}
+    </script>,
+    <link key="canonical" rel="canonical" href="url" />,
+    <link key="icon" rel="icon" type="image/svg+xml" href="favicon" />,
+    <meta key="desc" name="description" content="desc 1" />,
+    <meta key="og:url" property="og:url" content="url" />,
+    <meta key="og:desc" property="og:description" content="desc 2" />,
+  ]
+
+  it(`reorders meta tags in front of other tags and keeps original order (for moved meta tags)`, () => {
+    const reordered = reorderHeadComponents(exampleHead)
+    const keyList = reordered.map(e => e.key)
+    expect(keyList).toEqual([
+      `desc`,
+      `og:url`,
+      `og:desc`,
+      `style1`,
+      `style2`,
+      `json-ld`,
+      `canonical`,
+      `icon`,
+    ])
+  })
+})
diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js
@@ -90,6 +90,21 @@ function deepMerge(a, b) {
   return merge(a, b, { arrayMerge: combineMerge })
 }
 
+/**
+Reorder headComponents so meta tags are always at the top and aren't missed by crawlers by being pushed down by large inline styles, etc.
+@see https://github.com/gatsbyjs/gatsby/issues/22206
+*/
+export const reorderHeadComponents = headComponents => {
+  const sorted = headComponents.sort((a, b) => {
+    if (a.type && a.type === `meta` && !(b.type && b.type === `meta`)) {
+      return -1
+    }
+    return 0
+  })
+
+  return sorted
+}
+
 export default async function staticPage({
   pagePath,
   pageData,
@@ -404,15 +419,7 @@ export default async function staticPage({
 
     postBodyComponents.push(...bodyScripts)
 
-    // Reorder headComponents so meta tags are always at the top and aren't missed by crawlers
-    // by being pushed down by large inline styles, etc.
-    // https://github.com/gatsbyjs/gatsby/issues/22206
-    headComponents.sort((a, _) => {
-      if (a.type && a.type === `meta`) {
-        return -1
-      }
-      return 0
-    })
+    headComponents = reorderHeadComponents(headComponents)
 
     apiRunner(`onPreRenderHTML`, {
       getHeadComponents,