From f7d8975b502c77bfc074bbd2038a41636b39d92f Mon Sep 17 00:00:00 2001
From: nariakira-hara <nariakira.hara@linecorp.com>
Date: Tue, 14 May 2024 13:27:27 +0900
Subject: [PATCH] fix: keyOverride attribute

---
 README.md                             |  2 +-
 src/meta/__tests__/buildTags.spec.tsx | 34 +++++++++++++++++++++++++++
 src/meta/buildTags.tsx                |  4 ++--
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 15ca910f..8d587129 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ If you are using **`pages`** directory then `NextSeo` is **exactly what you need
     - [dangerouslySetAllPagesToNoFollow](#dangerouslysetallpagestonofollow)
     - [robotsProps](#robotsprops)
     - [Twitter](#twitter)
-    - [facebook](#facebook)
+    - [Facebook](#facebook)
     - [Canonical URL](#canonical-url)
     - [Alternate](#alternate)
     - [Additional Meta Tags](#additional-meta-tags)
diff --git a/src/meta/__tests__/buildTags.spec.tsx b/src/meta/__tests__/buildTags.spec.tsx
index 8f046a05..992806e8 100644
--- a/src/meta/__tests__/buildTags.spec.tsx
+++ b/src/meta/__tests__/buildTags.spec.tsx
@@ -976,3 +976,37 @@ it('correctly read all robots props', () => {
   expect(Array.from(content).length).toBe(0);
   expect(Array.from(contentOverride).length).toBe(1);
 });
+
+it('additional link tags are set', () => {
+  const overrideProps: BuildTagsParams = {
+    ...SEO,
+    additionalLinkTags: [
+      {
+        rel: 'apple-touch-icon',
+        href: 'https://www.test.ie/touch-icon-ipad.jpg',
+        sizes: '76x76',
+        keyOverride: '76x76',
+      },
+      {
+        rel: 'apple-touch-icon',
+        href: 'https://www.test.ie/touch-icon-ipad.jpg',
+        sizes: '120x120',
+        keyOverride: '120x120',
+      },
+      {
+        rel: 'icon',
+        href: 'https://www.test.ie/favicon.ico',
+      },
+    ],
+  };
+  const tags = buildTags(overrideProps);
+  const { container } = render(<>{React.Children.toArray(tags)}</>);
+  const appleTouchIconTags = container.querySelectorAll(
+    'link[rel="apple-touch-icon"]',
+  );
+  expect(Array.from(appleTouchIconTags).length).toBe(2);
+  expect(appleTouchIconTags[0]).not.toHaveAttribute('keyoverride');
+
+  const iconTags = container.querySelectorAll('link[rel="icon"]');
+  expect(Array.from(iconTags).length).toBe(1);
+});
diff --git a/src/meta/buildTags.tsx b/src/meta/buildTags.tsx
index 32e07b61..a0676e7e 100644
--- a/src/meta/buildTags.tsx
+++ b/src/meta/buildTags.tsx
@@ -659,7 +659,7 @@ const buildTags = (config: BuildTagsParams) => {
 
   if (config.additionalLinkTags?.length) {
     config.additionalLinkTags.forEach(tag => {
-      const { crossOrigin: tagCrossOrigin, ...rest } = tag;
+      const { crossOrigin: tagCrossOrigin, keyOverride, ...rest } = tag;
       const crossOrigin: 'anonymous' | 'use-credentials' | '' | undefined =
         tagCrossOrigin === 'anonymous' ||
         tagCrossOrigin === 'use-credentials' ||
@@ -669,7 +669,7 @@ const buildTags = (config: BuildTagsParams) => {
 
       tagsToRender.push(
         <link
-          key={`link${rest.keyOverride ?? rest.href}${rest.rel}`}
+          key={`link${keyOverride ?? rest.href}${rest.rel}`}
           {...rest}
           crossOrigin={crossOrigin}
         />,