diff --git a/README.md b/README.md
index 0051a870..8c519ec9 100644
--- a/README.md
+++ b/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
-,
+
+```
+
+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
+
+
```
#### Additional Link Tags
diff --git a/src/meta/__tests__/buildTags.spec.tsx b/src/meta/__tests__/buildTags.spec.tsx
index 9ce9106a..49228967 100644
--- a/src/meta/__tests__/buildTags.spec.tsx
+++ b/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,
diff --git a/src/meta/buildTags.tsx b/src/meta/buildTags.tsx
index 49986846..0560ea10 100644
--- a/src/meta/buildTags.tsx
+++ b/src/meta/buildTags.tsx
@@ -188,13 +188,9 @@ const buildTags = (config: BuildTagsParams) => {
);
}
- if(config.themeColor){
+ if (config.themeColor) {
tagsToRender.push(
-
+ ,
);
}
@@ -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(
,