fix(start): dedupe meta tags also by property (#2823)

TanStack · Nov 21, 2024 · 9d4d512 · 9d4d512
1 parent e79035a
commit 9d4d512
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/start/src/client/Meta.tsx b/packages/start/src/client/Meta.tsx
@@ -16,7 +16,7 @@ export const useMeta = () => {
 
   const meta: Array<RouterManagedTag> = React.useMemo(() => {
     const resultMeta: Array<RouterManagedTag> = []
-    const metaByName: Record<string, true> = {}
+    const metaByAttribute: Record<string, true> = {}
     let title: RouterManagedTag | undefined
     ;[...routeMeta].reverse().forEach((metas) => {
       ;[...metas].reverse().forEach((m) => {
@@ -30,11 +30,12 @@ export const useMeta = () => {
             }
           }
         } else {
-          if (m.name) {
-            if (metaByName[m.name]) {
+          const attribute = m.name ?? m.property
+          if (attribute) {
+            if (metaByAttribute[attribute]) {
               return
             } else {
-              metaByName[m.name] = true
+              metaByAttribute[attribute] = true
             }
           }
 

diff --git a/packages/start/src/client/tests/index.test.tsx b/packages/start/src/client/tests/index.test.tsx
@@ -103,6 +103,14 @@ describe('ssr meta', () => {
               name: 'image',
               content: 'image.jpg',
             },
+            {
+              property: 'og:image',
+              content: 'root-image.jpg',
+            },
+            {
+              property: 'og:description',
+              content: 'Root description',
+            },
           ],
         }
       },
@@ -136,6 +144,10 @@ describe('ssr meta', () => {
               name: 'last-modified',
               content: '2021-10-10',
             },
+            {
+              property: 'og:image',
+              content: 'index-image.jpg',
+            },
           ],
         }
       },
@@ -156,15 +168,18 @@ describe('ssr meta', () => {
       { title: 'Root' },
       { name: 'description', content: 'Root' },
       { name: 'image', content: 'image.jpg' },
+      { property: 'og:image', content: 'root-image.jpg' },
+      { property: 'og:description', content: 'Root description' },
       { title: 'Index' },
       { name: 'description', content: 'Index' },
       { name: 'last-modified', content: '2021-10-10' },
+      { property: 'og:image', content: 'index-image.jpg' },
     ])
 
     const { container } = render(<RouterProvider router={router} />)
 
     expect(container.innerHTML).toEqual(
-      `<title>Index</title><meta name="image" content="image.jpg"><meta name="description" content="Index"><meta name="last-modified" content="2021-10-10">`,
+      `<title>Index</title><meta name="image" content="image.jpg"><meta property="og:description" content="Root description"><meta name="description" content="Index"><meta name="last-modified" content="2021-10-10"><meta property="og:image" content="index-image.jpg">`,
     )
   })
 })