在 react CSR 頁面上使用 react-helmet 生成 2 組元標記

Question

我正在為我的反應項目使用 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 中的兩組元標記。 第一組元標記是 index.html 的元標記，第二組元標記是在組件中聲明的。

此外，在 Google 網站管理員控制台中，我看到用戶聲明的規范設置為無。 這意味着。 谷歌爬蟲沒有讀取規范的元標記。

Answer 1

遇到了完全相同的問題，並通過在我的index.html的定義中添加data-react-helmet="true"屬性來修復它。 像這樣的東西：

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

React Helmet 現在應該在啟動時替換index.html上的描述。