Question

我一直在通过以下方式设置我的react.js SPA的页面标题：

document.title = {some title}

...到目前为止，一切正常。现在，我还想更新meta title标签，因此我安装了react-helmet。
在我的组件中，我已经从库中导入了Helmet，并且做到了：

render() {
  {/* ... */}
  return (
    <div>
      <Helmet>
        <title>{docTitle}</title>
        <meta name="title" content={docTitle} />
      </Helmet>
      {/* ... */}
    </div>
  )
}

打开页面时，我看到文档标题已正确更新，但是在检查浏览器中的元素时，我注意到<meta name="title"并未更新，而几行向下，{{1} } 已更新。

我在这里做什么错了？

Answer 1

自述文件中未对此进行记录，但是您必须在要用react-helmet替换的meta标签中添加data-react-helmet="true"。举例来说，在您的index.html中，您的元标记应更新为如下形式：

 <meta name="title" content="Default Title" data-react-helmet="true">

这应该在自述文件中，我不知道为什么不是这样，并且我看到一条评论，说有人已经打开PR来添加它。

Answer 2

在我的<head>代码中，我在index.html文件中添加了以下标记：

<meta name="title" content="Default Title">

当使用react-helmet更新该meta标签时，在检查浏览器中的元素时，仍然在index.html文件中看到该标签未更新。
但是，我没有注意到的是，在<head>的最底部，Helmet显然添加了此标签：

<meta name="title" content="Default Title" data-react-helmet="true">

我猜（并希望）它将被搜索引擎机器人抓取。

反应头盔未更新元标题标签

2 个答案: