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( ,