如何避免重复的元标记？

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 中设置默认元标记（可以在其中删除重复数据），并在页面中需要时覆盖它们。