Avoid Duplicate Meta Description and Keywords in Next js

Question

I'm developing my website with Next.js To upgrade my website's SEO performance, I'm trying to avoid duplicated meta tags.

My Question

In Next official docs, they say that I can avoid overlapped meta tag by insert key property in meta tag. But this does not work.

<meta name="description" content="~~" key="titleDescription"/>
<meta name="keywords" content="~~" key="titleKeywords"/>

These are default rootDocument meta tags and,

<meta name="description" content={item.product_description} key="titleDescription"></meta>
<meta name="keywords" content={item.brand_name} key="titleKeywords"></meta>

These are dynamically generated meta tags in item pages.

In deployed browser, there are still two description and keywords meta tags in website. I want to avoid duplicated meta tag. Thank you for your help!se

Answer 1

First of all take a deep look into this  https://github.com/garmeeh/next-seo you will get a clear idea 

Next.js recommends that all the dynamic <meta /> tags should only be defined on an individual page level.

Notice that your meta tags in the _document.js file are self-closing: <meta /> and the dynamic ones are not: <meta></meta>.

Ensure you are consistent with it