diff --git a/packages/next/src/client/head-manager.ts b/packages/next/src/client/head-manager.ts
index 8d477e46e9fb4..052b251d36d58 100644
--- a/packages/next/src/client/head-manager.ts
+++ b/packages/next/src/client/head-manager.ts
@@ -51,62 +51,56 @@ export function isEqualNode(oldTag: Element, newTag: Element) {
 let updateElements: (type: string, components: JSX.Element[]) => void
 
 if (process.env.__NEXT_STRICT_NEXT_HEAD) {
-  updateElements = (type: string, components: JSX.Element[]) => {
+  updateElements = (type, components) => {
     const headEl = document.querySelector('head')
     if (!headEl) return
 
-    const headMetaTags = headEl.querySelectorAll('meta[name="next-head"]') || []
-    const oldTags: Element[] = []
+    const oldTags = new Set(headEl.querySelectorAll(`${type}[data-next-head]`))
 
     if (type === 'meta') {
       const metaCharset = headEl.querySelector('meta[charset]')
-      if (metaCharset) {
-        oldTags.push(metaCharset)
+      if (metaCharset !== null) {
+        oldTags.add(metaCharset)
       }
     }
 
-    for (let i = 0; i < headMetaTags.length; i++) {
-      const metaTag = headMetaTags[i]
-      const headTag = metaTag.nextSibling as Element
-
-      if (headTag?.tagName?.toLowerCase() === type) {
-        oldTags.push(headTag)
-      }
-    }
-    const newTags = (components.map(reactElementToDOM) as HTMLElement[]).filter(
-      (newTag) => {
-        for (let k = 0, len = oldTags.length; k < len; k++) {
-          const oldTag = oldTags[k]
-          if (isEqualNode(oldTag, newTag)) {
-            oldTags.splice(k, 1)
-            return false
-          }
+    const newTags: Element[] = []
+    for (let i = 0; i < components.length; i++) {
+      const component = components[i]
+      const newTag = reactElementToDOM(component)
+      newTag.setAttribute('data-next-head', '')
+
+      let isNew = true
+      for (const oldTag of oldTags) {
+        if (isEqualNode(oldTag, newTag)) {
+          oldTags.delete(oldTag)
+          isNew = false
+          break
         }
-        return true
       }
-    )
 
-    oldTags.forEach((t) => {
-      const metaTag = t.previousSibling as Element
-      if (metaTag && metaTag.getAttribute('name') === 'next-head') {
-        t.parentNode?.removeChild(metaTag)
+      if (isNew) {
+        newTags.push(newTag)
       }
-      t.parentNode?.removeChild(t)
-    })
-    newTags.forEach((t) => {
-      const meta = document.createElement('meta')
-      meta.name = 'next-head'
-      meta.content = '1'
+    }
+
+    for (const oldTag of oldTags) {
+      oldTag.parentNode?.removeChild(oldTag)
+    }
 
+    for (const newTag of newTags) {
       // meta[charset] must be first element so special case
-      if (!(t.tagName?.toLowerCase() === 'meta' && t.getAttribute('charset'))) {
-        headEl.appendChild(meta)
+      if (
+        newTag.tagName.toLowerCase() === 'meta' &&
+        newTag.getAttribute('charset') !== null
+      ) {
+        headEl.prepend(newTag)
       }
-      headEl.appendChild(t)
-    })
+      headEl.appendChild(newTag)
+    }
   }
 } else {
-  updateElements = (type: string, components: JSX.Element[]) => {
+  updateElements = (type, components) => {
     const headEl = document.getElementsByTagName('head')[0]
     const headCountEl: HTMLMetaElement = headEl.querySelector(
       'meta[name=next-head-count]'
diff --git a/packages/next/src/pages/_document.tsx b/packages/next/src/pages/_document.tsx
index 792c45f0c2d29..99f89cd208cff 100644
--- a/packages/next/src/pages/_document.tsx
+++ b/packages/next/src/pages/_document.tsx
@@ -682,30 +682,29 @@ export class Head extends React.Component<HeadProps> {
     let cssPreloads: Array<JSX.Element> = []
     let otherHeadElements: Array<JSX.Element> = []
     if (head) {
-      head.forEach((c) => {
-        let metaTag
-
-        if (this.context.strictNextHead) {
-          metaTag = React.createElement('meta', {
-            name: 'next-head',
-            content: '1',
-          })
-        }
-
+      head.forEach((child) => {
         if (
-          c &&
-          c.type === 'link' &&
-          c.props['rel'] === 'preload' &&
-          c.props['as'] === 'style'
+          child &&
+          child.type === 'link' &&
+          child.props['rel'] === 'preload' &&
+          child.props['as'] === 'style'
         ) {
-          metaTag && cssPreloads.push(metaTag)
-          cssPreloads.push(c)
+          if (this.context.strictNextHead) {
+            cssPreloads.push(
+              React.cloneElement(child, { 'data-next-head': '' })
+            )
+          } else {
+            cssPreloads.push(child)
+          }
         } else {
-          if (c) {
-            if (metaTag && (c.type !== 'meta' || !c.props['charSet'])) {
-              otherHeadElements.push(metaTag)
+          if (child) {
+            if (this.context.strictNextHead) {
+              otherHeadElements.push(
+                React.cloneElement(child, { 'data-next-head': '' })
+              )
+            } else {
+              otherHeadElements.push(child)
             }
-            otherHeadElements.push(c)
           }
         }
       })
diff --git a/test/development/pages-dir/client-navigation/index.test.ts b/test/development/pages-dir/client-navigation/index.test.ts
index d684bffa3a615..a6ba555d2924f 100644
--- a/test/development/pages-dir/client-navigation/index.test.ts
+++ b/test/development/pages-dir/client-navigation/index.test.ts
@@ -1683,6 +1683,9 @@ describe.each([[false], [true]])(
         expect(
           Number(await browser.eval('window.__test_async_executions'))
         ).toBe(1)
+        expect(
+          Number(await browser.eval('window.__test_defer_executions'))
+        ).toBe(1)
 
         await browser.elementByCss('#toggleScript').click()
         await waitFor(2000)
@@ -1690,6 +1693,9 @@ describe.each([[false], [true]])(
         expect(
           Number(await browser.eval('window.__test_async_executions'))
         ).toBe(1)
+        expect(
+          Number(await browser.eval('window.__test_defer_executions'))
+        ).toBe(1)
       } finally {
         if (browser) {
           await browser.close()
diff --git a/test/development/pages-dir/client-navigation/rendering.test.ts b/test/development/pages-dir/client-navigation/rendering.test.ts
index 2fd1dcb096bca..869327510d4fa 100644
--- a/test/development/pages-dir/client-navigation/rendering.test.ts
+++ b/test/development/pages-dir/client-navigation/rendering.test.ts
@@ -43,8 +43,8 @@ describe('Client Navigation rendering', () => {
   describe('Rendering via HTTP', () => {
     test('renders a stateless component', async () => {
       const html = await render('/stateless')
-      expect(html.includes('<meta charSet="utf-8"/>')).toBeTruthy()
-      expect(html.includes('My component!')).toBeTruthy()
+      expect(html).toContain('<meta charSet="utf-8" data-next-head=""/>')
+      expect(html).toContain('My component!')
     })
 
     it('should should not contain scripts that are not js', async () => {
@@ -349,55 +349,93 @@ describe.each([[false], [true]])(
     // default-head contains an empty <Head />.
     test('header renders default charset', async () => {
       const html = await render('/default-head')
-      expect(html.includes('<meta charSet="utf-8"/>')).toBeTruthy()
-      expect(html.includes('next-head, but only once.')).toBeTruthy()
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta charSet="utf-8" data-next-head=""/>'
+          : '<meta charSet="utf-8"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta charSet="utf-8" data-next-head=""/>'
+          : '<meta charSet="utf-8"/>'
+      )
     })
 
     test('header renders default viewport', async () => {
       const html = await render('/default-head')
       expect(html).toContain(
-        '<meta name="viewport" content="width=device-width"/>'
+        strictNextHead
+          ? '<meta name="viewport" content="width=device-width" data-next-head=""/>'
+          : '<meta name="viewport" content="width=device-width"/>'
       )
     })
 
     test('header helper renders header information', async () => {
       const html = await render('/head')
-      expect(html.includes('<meta charSet="iso-8859-5"/>')).toBeTruthy()
-      expect(html.includes('<meta content="my meta"/>')).toBeTruthy()
       expect(html).toContain(
-        '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
+        strictNextHead
+          ? '<meta charSet="iso-8859-5" data-next-head=""/>'
+          : '<meta charSet="iso-8859-5"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta content="my meta" data-next-head=""/>'
+          : '<meta content="my meta"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/>'
+          : '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
       )
-      expect(html.includes('I can have meta tags')).toBeTruthy()
+      expect(html).toContain('I can have meta tags')
     })
 
     test('header helper dedupes tags', async () => {
       const html = await render('/head')
-      expect(html).toContain('<meta charSet="iso-8859-5"/>')
-      expect(html).not.toContain('<meta charSet="utf-8"/>')
       expect(html).toContain(
-        '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
+        strictNextHead
+          ? '<meta charSet="iso-8859-5" data-next-head=""/>'
+          : '<meta charSet="iso-8859-5"/>'
+      )
+      expect(html).not.toContain(
+        strictNextHead
+          ? '<meta charSet="utf-8" data-next-head=""/>'
+          : '<meta charSet="utf-8"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/>'
+          : '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
       )
       // Should contain only one viewport
       expect(html.match(/<meta name="viewport" /g).length).toBe(1)
       expect(html).not.toContain(
-        '<meta name="viewport" content="width=device-width"/>'
+        '<meta name="viewport" content="width=device-width"'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta content="my meta" data-next-head=""/>'
+          : '<meta content="my meta"/>'
       )
-      expect(html).toContain('<meta content="my meta"/>')
       expect(html).toContain(
         strictNextHead
-          ? '<link rel="stylesheet" href="/dup-style.css"/><meta name="next-head" content="1"/><link rel="stylesheet" href="/dup-style.css"/>'
+          ? '<link rel="stylesheet" href="/dup-style.css" data-next-head=""/><link rel="stylesheet" href="/dup-style.css" data-next-head=""/>'
           : '<link rel="stylesheet" href="/dup-style.css"/><link rel="stylesheet" href="/dup-style.css"/>'
       )
-      const dedupeLink = '<link rel="stylesheet" href="dedupe-style.css"/>'
+      const dedupeLink = strictNextHead
+        ? '<link rel="stylesheet" href="dedupe-style.css" data-next-head=""/>'
+        : '<link rel="stylesheet" href="dedupe-style.css"/>'
       expect(html).toContain(dedupeLink)
       expect(
         html.substring(html.indexOf(dedupeLink) + dedupeLink.length)
-      ).not.toContain('<link rel="stylesheet" href="dedupe-style.css"/>')
+      ).not.toContain('<link rel="stylesheet" href="dedupe-style.css"')
       expect(html).toContain(
-        '<link rel="alternate" hrefLang="en" href="/last/en"/>'
+        strictNextHead
+          ? '<link rel="alternate" hrefLang="en" href="/last/en" data-next-head=""/>'
+          : '<link rel="alternate" hrefLang="en" href="/last/en"/>'
       )
       expect(html).not.toContain(
-        '<link rel="alternate" hrefLang="en" href="/first/en"/>'
+        '<link rel="alternate" hrefLang="en" href="/first/en"'
       )
     })
 
@@ -407,86 +445,170 @@ describe.each([[false], [true]])(
       expect((html.match(/charSet=/g) || []).length).toBe(1)
       // Expect exactly one `viewport`
       expect((html.match(/name="viewport"/g) || []).length).toBe(1)
-      expect(html).toContain('<meta charSet="iso-8859-1"/>')
-      expect(html).toContain('<meta name="viewport" content="width=500"/>')
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta charSet="iso-8859-1" data-next-head=""/>'
+          : '<meta charSet="iso-8859-1"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta name="viewport" content="width=500" data-next-head=""/>'
+          : '<meta name="viewport" content="width=500"/>'
+      )
     })
 
     test('header helper avoids dedupe of specific tags', async () => {
       const html = await render('/head')
-      expect(html).toContain('<meta property="article:tag" content="tag1"/>')
-      expect(html).toContain('<meta property="article:tag" content="tag2"/>')
-      expect(html).not.toContain('<meta property="dedupe:tag" content="tag3"/>')
-      expect(html).toContain('<meta property="dedupe:tag" content="tag4"/>')
+      console.log(html)
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta property="article:tag" content="tag1" data-next-head=""/>'
+          : '<meta property="article:tag" content="tag1"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta property="article:tag" content="tag2" data-next-head=""/>'
+          : '<meta property="article:tag" content="tag2"/>'
+      )
+      expect(html).not.toContain('<meta property="dedupe:tag" content="tag3"')
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta property="dedupe:tag" content="tag4" data-next-head=""/>'
+          : '<meta property="dedupe:tag" content="tag4"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta property="og:image" content="ogImageTag1" data-next-head=""/>'
+          : '<meta property="og:image" content="ogImageTag1"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta property="og:image" content="ogImageTag2" data-next-head=""/>'
+          : '<meta property="og:image" content="ogImageTag2"/>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta property="og:image:alt" content="ogImageAltTag1" data-next-head=""/>'
+          : '<meta property="og:image:alt" content="ogImageAltTag1"/>'
+      )
       expect(html).toContain(
-        '<meta property="og:image" content="ogImageTag1"/>'
+        strictNextHead
+          ? '<meta property="og:image:alt" content="ogImageAltTag2" data-next-head=""/>'
+          : '<meta property="og:image:alt" content="ogImageAltTag2"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image" content="ogImageTag2"/>'
+        strictNextHead
+          ? '<meta property="og:image:width" content="ogImageWidthTag1" data-next-head=""/>'
+          : '<meta property="og:image:width" content="ogImageWidthTag1"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:alt" content="ogImageAltTag1"/>'
+        strictNextHead
+          ? '<meta property="og:image:width" content="ogImageWidthTag2" data-next-head=""/>'
+          : '<meta property="og:image:width" content="ogImageWidthTag2"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:alt" content="ogImageAltTag2"/>'
+        strictNextHead
+          ? '<meta property="og:image:height" content="ogImageHeightTag1" data-next-head=""/>'
+          : '<meta property="og:image:height" content="ogImageHeightTag1"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:width" content="ogImageWidthTag1"/>'
+        strictNextHead
+          ? '<meta property="og:image:height" content="ogImageHeightTag2" data-next-head=""/>'
+          : '<meta property="og:image:height" content="ogImageHeightTag2"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:width" content="ogImageWidthTag2"/>'
+        strictNextHead
+          ? '<meta property="og:image:type" content="ogImageTypeTag1" data-next-head=""/>'
+          : '<meta property="og:image:type" content="ogImageTypeTag1"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:height" content="ogImageHeightTag1"/>'
+        strictNextHead
+          ? '<meta property="og:image:type" content="ogImageTypeTag2" data-next-head=""/>'
+          : '<meta property="og:image:type" content="ogImageTypeTag2"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:height" content="ogImageHeightTag2"/>'
+        strictNextHead
+          ? '<meta property="og:image:secure_url" content="ogImageSecureUrlTag1" data-next-head=""/>'
+          : '<meta property="og:image:secure_url" content="ogImageSecureUrlTag1"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:type" content="ogImageTypeTag1"/>'
+        strictNextHead
+          ? '<meta property="og:image:secure_url" content="ogImageSecureUrlTag2" data-next-head=""/>'
+          : '<meta property="og:image:secure_url" content="ogImageSecureUrlTag2"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:type" content="ogImageTypeTag2"/>'
+        strictNextHead
+          ? '<meta property="og:image:url" content="ogImageUrlTag1" data-next-head=""/>'
+          : '<meta property="og:image:url" content="ogImageUrlTag1"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:secure_url" content="ogImageSecureUrlTag1"/>'
+        strictNextHead
+          ? '<meta property="og:image:url" content="ogImageUrlTag2" data-next-head=""/>'
+          : '<meta property="og:image:url" content="ogImageUrlTag2"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:secure_url" content="ogImageSecureUrlTag2"/>'
+        strictNextHead
+          ? '<meta property="fb:pages" content="fbpages1" data-next-head=""/>'
+          : '<meta property="fb:pages" content="fbpages1"/>'
       )
       expect(html).toContain(
-        '<meta property="og:image:url" content="ogImageUrlTag1"/>'
+        strictNextHead
+          ? '<meta property="fb:pages" content="fbpages2" data-next-head=""/>'
+          : '<meta property="fb:pages" content="fbpages2"/>'
       )
-      expect(html).toContain('<meta property="fb:pages" content="fbpages1"/>')
-      expect(html).toContain('<meta property="fb:pages" content="fbpages2"/>')
     })
 
     test('header helper avoids dedupe of meta tags with the same name if they use unique keys', async () => {
       const html = await render('/head')
       expect(html).toContain(
-        '<meta name="citation_author" content="authorName1"/>'
+        strictNextHead
+          ? '<meta name="citation_author" content="authorName1" data-next-head=""/>'
+          : '<meta name="citation_author" content="authorName1"/>'
       )
       expect(html).toContain(
-        '<meta name="citation_author" content="authorName2"/>'
+        strictNextHead
+          ? '<meta name="citation_author" content="authorName2" data-next-head=""/>'
+          : '<meta name="citation_author" content="authorName2"/>'
       )
     })
 
     test('header helper renders Fragment children', async () => {
       const html = await render('/head')
-      expect(html).toContain('<title>Fragment title</title>')
-      expect(html).toContain('<meta content="meta fragment"/>')
+      expect(html).toContain(
+        strictNextHead
+          ? '<title data-next-head="">Fragment title</title>'
+          : '<title>Fragment title</title>'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<meta content="meta fragment" data-next-head=""/>'
+          : '<meta content="meta fragment"/>'
+      )
     })
 
     test('header helper renders boolean attributes correctly children', async () => {
       const html = await render('/head')
-      expect(html).toContain('<script src="/test-async-true.js" async="">')
-      expect(html).toContain('<script src="/test-async-false.js">')
-      expect(html).toContain('<script src="/test-defer.js" defer="">')
+      expect(html).toContain(
+        strictNextHead
+          ? '<script src="/test-async-false.js" data-next-head="">'
+          : '<script src="/test-async-false.js">'
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<script src="/test-async-true.js" async="" data-next-head="">'
+          : ''
+      )
+      expect(html).toContain(
+        strictNextHead
+          ? '<script src="/test-defer.js" defer="" data-next-head="">'
+          : ''
+      )
     })
 
     it('should place charset element at the top of <head>', async () => {
       const html = await render('/head-priority')
       const nextHeadElement = strictNextHead
-        ? '<meta charSet="iso-8859-5"/><meta name="next-head" content="1"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="next-head" content="1"/><meta name="title" content="head title"/>'
+        ? '<meta charSet="iso-8859-5" data-next-head=""/><meta name="viewport" content="width=device-width,initial-scale=1" data-next-head=""/><meta name="title" content="head title" data-next-head=""/>'
         : '<meta charSet="iso-8859-5"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="title" content="head title"/><meta name="next-head-count" content="3"/>'
       const documentHeadElement =
         '<meta name="keywords" content="document head test"/>'
diff --git a/test/e2e/next-head/index.test.ts b/test/e2e/next-head/index.test.ts
index 9552102b30fe6..c589b11ed7389 100644
--- a/test/e2e/next-head/index.test.ts
+++ b/test/e2e/next-head/index.test.ts
@@ -32,7 +32,7 @@ describe('next/head', () => {
     })
 
     expect(html).toContain(
-      `<meta charset="utf-8"><meta name="next-head" content="1"><meta name="viewport" content="width=device-width"><meta name="next-head" content="1"><meta name="test-head-1" content="hello">`
+      `<meta charset="utf-8" data-next-head=""><meta name="viewport" content="width=device-width" data-next-head=""><meta name="test-head-1" content="hello" data-next-head="">`
     )
   })