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

Question

我正在使用 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;

标签： reactjsseometadatameta-tagsreact-helmet

Answer 1

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

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

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