Remove keyoverride attribute from additional meta tags (#1080)

Author: ediblecode

README.md

@@ -574,17 +574,16 @@ additionalMetaTags={[{
 }]}
 ```
 
-One thing to note on this is that it currently only supports unique tags.
-This means it will only render one tag per unique `name` / `property` / `httpEquiv`. The last one defined will be rendered.
+One thing to note on this is that it currently only supports unique tags, unless you use the `keyOverride` prop to provide a unique [key](https://reactjs.org/docs/lists-and-keys.html#keys) to each additional meta tag.
 
-Example:
+The default behaviour (without a `keyOverride` prop) is to render one tag per unique `name` / `property` / `httpEquiv`. The last one defined will be rendered.
 
-If you pass:
+For example if you pass 2 tags with the same `property`:
 
 ```js
 additionalMetaTags={[{
   property: 'dc:creator',
-  content: 'John Doe'
+  content: 'Joe Bloggs'
 }, {
   property: 'dc:creator',
   content: 'Jane Doe'
@@ -594,7 +593,28 @@ additionalMetaTags={[{
 it will result in this being rendered:
 
 ```html
-<meta property="dc:creator" content="Jane Doe" />,
+<meta property="dc:creator" content="Jane Doe" />
+```
+
+Providing an additional `keyOverride` property like this:
+
+```js
+additionalMetaTags={[{
+  property: 'dc:creator',
+  content: 'Joe Bloggs',
+  keyOverride: 'creator1',
+}, {
+  property: 'dc:creator',
+  content: 'Jane Doe',
+  keyOverride: 'creator2',
+}]}
+```
+
+results in the correct HTML being rendered:
+
+```html
+<meta property="dc:creator" content="Joe Bloggs" />
+<meta property="dc:creator" content="Jane Doe" />
 ```
 
 #### Additional Link Tags

src/meta/__tests__/buildTags.spec.tsx

@@ -872,6 +872,28 @@ it('additional meta tags are set', () => {
   expect(Array.from(httpEquivTag).length).toBe(1);
 });
 
+it('uses key override to render multiple additional meta tags with the same key', () => {
+  const overrideProps: BuildTagsParams = {
+    ...SEO,
+    additionalMetaTags: [
+      { property: 'foo', content: 'Foo 1', keyOverride: 'foo1' },
+      { property: 'foo', content: 'Foo 2', keyOverride: 'foo2' },
+      { name: 'bar', content: 'Bar 1', keyOverride: 'bar1' },
+      { name: 'bar', content: 'Bar 2', keyOverride: 'bar2' },
+    ],
+  };
+  const tags = buildTags(overrideProps);
+  const { container } = render(<>{React.Children.toArray(tags)}</>);
+
+  const propertyTags = container.querySelectorAll('meta[property="foo"]');
+  expect(Array.from(propertyTags).length).toBe(2);
+  expect(propertyTags[0]).not.toHaveAttribute('keyoverride');
+
+  const nameTags = container.querySelectorAll('meta[name="bar"]');
+  expect(Array.from(nameTags).length).toBe(2);
+  expect(nameTags[0]).not.toHaveAttribute('keyoverride');
+});
+
 it('correctly sets noindex default', () => {
   const overrideProps: BuildTagsParams = {
     ...SEO,

src/meta/buildTags.tsx

@@ -188,13 +188,9 @@ const buildTags = (config: BuildTagsParams) => {
     );
   }
 
-  if(config.themeColor){
+  if (config.themeColor) {
     tagsToRender.push(
-      <meta
-        key="theme-color"
-        name="theme-color"
-        content={config.themeColor}
-      />
+      <meta key="theme-color" name="theme-color" content={config.themeColor} />,
     );
   }
 
@@ -640,11 +636,11 @@ const buildTags = (config: BuildTagsParams) => {
   }
 
   if (config.additionalMetaTags && config.additionalMetaTags.length > 0) {
-    config.additionalMetaTags.forEach(tag => {
+    config.additionalMetaTags.forEach(({ keyOverride, ...tag }) => {
       tagsToRender.push(
         <meta
           key={`meta:${
-            tag.keyOverride ?? tag.name ?? tag.property ?? tag.httpEquiv
+            keyOverride ?? tag.name ?? tag.property ?? tag.httpEquiv
           }`}
           {...tag}
         />,