如何避免重复的元标记？

Question

我正在使用 next.js 开发我的网站。

我的问题

下面的代码在 _document.js 头组件中。这些是根元标记。

<meta name="description" content="~~~"/>
<meta name="keywords" content="~~~"/>

动态创建页面时，会创建这些标签并将其插入 Item.js。

<meta name="description" content={item.product_description}/>
<meta name="description" content={item.brand_name}/>

为了避免元标记重复，我在元中插入了一些 key="" 值参考 Next.js 文档，但它没有用。因此，我被迫使用 useEffect.

更改内容

useEffect(() => {
    const description = document.getElementsByName('description');
    const keywords = document.getElementsByName('keywords');
    description[0].content = item.product_description;
    keywords[0].content = item.brand_name;
    return () => {
        description[0].content = '~~~';
        keywords[0].content = '~~~';
    }
}, [])

但这种方式似乎不对。如何更清楚地避免重复的元标记？

我想获取最新的元标记。

Answer 1

添加到自定义 _document 的元标记无法进行重复数据删除。

要解决此限制，您应该在 next/head 内的 _app 中设置默认元标记（可以在其中删除重复数据），并在需要时在页面中覆盖它们。

如何避免重复的元标记？

How to avoid duplicated meta tags?

html

javascript

meta

seo

next.js