Question

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

我已经研究过使用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;

Answer 1

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

我的React网站是使用Netlify托管的，其解决方案是启用Netlify的Prerendering设置。启用Prerednering后，立即识别与共享相关的标头。似乎无法识别呈现在客户端的标头（此SO question的更多信息）。

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

Answer 2

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

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

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

Answer 3

我不确定你是否已经知道了！

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

使用React Helmet将所有<head>部分直接注入您的js文件。如果您的app.js是您的目标网页，请尝试直接将所有meta标签注入该页面。

还使用Google搜索控制台检查索引页面的meta标签中是否具有data-react-helmet =“ true”。

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

它目前正在“反应头盔”中为我工作：“ 5.2.1”

Answer 4

尽管没有具体要求，但您或其他可能会发现此问题的人可能会受益于服务器端渲染。即使您更改了反应头盔的配置，通过javascript呈现时，Facebook之类的网站也不会缓存您的标题和描述。

Google未显示React-Helmet标题和描述

4 个答案: