如何避免重复的元标签？ [重复]

Question

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

我的问题

下面的代码位于

_document.js

Head 组件中。这些是根元标记。

<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

的元标记无法进行重复数据删除。

要解决此限制，您应该在

_app

内的

next/head

中设置默认元标记（可以对它们进行重复数据删除），并在页面中需要时覆盖它们。