Question

我在我的React项目中使用react-helmet。

我的index.html中的

元标记是：

<link rel="canonical" href="https://example.com" />
<meta name="description" content="main description">

在组件中，我将元标记设置为：

const ContactUs = () => {
return (
    <div className="less-content-container justify-content-start align-items-start">
        <Helmet>
            <title>Contact Us | Example</title>
            <meta name="description" content={"contact us description"} />
            <link rel="canonical" href={"https://example.com/contact-us"} ></link>
        </Helmet>
    </div>
  );
}

当最终与我们联系的页面在浏览器中呈现时，我在Chrome检查中呈现的html中看到了两组meta标签。第一组元标记是index.html的，而第二组元标记是在component中声明的。

此外，在Google网站管理员控制台中，我看到用户声明的规范设置为“无”。那就是Google搜寻器未读取规范的元标记。

Answer 1

解决了完全相同的问题，并在我的data-react-helmet="true"的定义中添加了index.html属性来解决此问题。像这样：

<meta name="description" content="main description" data-react-helmet="true" />

反应头盔现在应在启动时替换index.html上的描述。

在react CSR页面上将react-helmet结果用于2组meta标签

1 个答案: