logo标签列表

React Helmet无法更新meta标题标签。

reactjssingle-page-applicationmeta-tagsreact-helmet
9

我一直通过以下方式设置我的 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"没有被更新，而在下面几行，<title>却已经被更新了。我做错了什么？
2个回答
21

虽然在自述文件中没有记录，但您需要将data-react-helmet="true"添加到您希望用react-helmet替换的meta标记中。因此，例如，在你的index.html中，您的标记应该更新为以下内容：

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

我不知道为什么这个内容没有在自述文件里，但我看到有人已经开了一个拉取请求来添加它。

10
在我的<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">

我猜测（也希望）这段内容可以被搜索引擎机器人爬取。
更新：
经过一段时间的等待，我可以确认 Facebook 和 Google 正确读取了 helmet 的标题标签。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接