谷歌没有显示 React-Helmet 的标题和描述答案

【问题标题】：Google Not Showing React-Helmet Title And Description谷歌没有显示 React-Helmet 的标题和描述
【发布时间】：2019-09-17 23:34:47
【问题描述】：

我正在使用 react-helmet 为我的每个页面赋予我的 React 应用程序的唯一标题和描述。当我使用开发工具检查页面时，标题在浏览器选项卡中正确呈现，并且标题和描述正确呈现。然而，谷歌并没有在他们的搜索结果中显示标题或描述。我究竟做错了什么？

我已经研究过使用 prerender.io，但由于我的网站没有后端（目前它只是一个营销网站），我不确定它是否是一个好的解决方案。我删除了一些元素，但这基本上是我的代码的外观......

import React, {Component} from 'react';
import {Helmet} from "react-helmet";

class Home extends Component {
  render() {
    return (
      <div>
        <Helmet>
          <title> My title </title>
          <meta name="description" content="My description"/>
        </Helmet>
      </div>
    )
  }
}

export default Home;

【问题讨论】：

嘿@William，我的反应网站也面临同样的问题。你找到解决办法了吗？
这里也一样。我要求谷歌重新抓取，但我不知道需要多长时间。已经2天了，没有变化。有人有见解吗？
您可以通过制作一个测试页面来测试对抓取结果的更改，并通过网站管理员控制台中的新站点地图将更改通知谷歌。这将触发相对立即的抓取，您可以看到之前尝试未污染的结果。
头盔与 CRA 不符，请查看this。
嗨@gael，我最终搬到了Next.js，它没有这个问题，所以我恐怕不能给出任何建议来单独使用React解决这个问题。希望您找到解决方案！

标签： reactjs seo metadata meta-tags react-helmet

【解决方案1】：

我的描述标签出现问题，无法正确显示。谷歌反而在搜索结果中显示了我帖子中的一些随机文本。然后我意识到我没有在react-helmet 软件包旁边安装gatsby-plugin-react-helmet。所以：

npm install gatsby-plugin-react-helmet react-helmet

然后在您的gatsby-config.js 文件中添加插件。这解决了我的问题。

【讨论】：

【解决方案2】：

我正在托管客户端渲染的 React 应用程序并使用 react-helmet 5.2.1 来管理 og tags 和其他与共享相关的标头。我遇到了 Facebook（和其他网站）所描述的问题，因为我的共享相关标题未被识别。

我的 React 网站使用 Netlify 托管，修复是启用 Netlify 的预渲染设置。启用 Prerednering 后，与共享相关的标头立即被识别。似乎无法识别客户端呈现的标头（来自此SO question 的更多信息）。

顺便说一句，我发现 Facebook 提供的 Sharing Debugger 在调试与共享相关的标头问题时非常有用。

【讨论】：

刚打开我的，它还没有工作，但希望它会很快（你提到它立即工作，所以我有点担心我的不是立即工作）

【解决方案3】：

虽然不是您所要求的具体内容，但您或可能发现此问题的其他人可能会从服务器端渲染中受益。即使你改变了你的 react-helmet 配置，像 Facebook 这样的网站在通过 javascript 呈现时也不会缓存你的标题和描述。

【讨论】：

【解决方案4】：

我不确定你是否已经想通了！

尝试从 public-> index.html 文件夹中删除 <meta name="description"> 和 <title> 。

使用 React Helmet 将所有 <head> 部分直接注入到您的 js 文件中。如果您的 app.js 是您的登录页面，请尝试直接在那里注入所有元标记。

还可以使用 Google 搜索控制台检查您的索引页面在元标记中是否包含 data-react-helmet="true"。

请求重新索引并等待谷歌再次抓取。

它目前在“react-helmet”中为我工作：“5.2.1”

【讨论】：