我可以看到有关您共享的代码的一些问题。

1. Meta 标签位于 head 之下，但您的 react 组件将呈现在您的 body 标签中。
2. 考虑到 SEO 部分，谷歌现在可以解析 JS，所以你的标签会被读取，但如果你认为雅虎仍然不能这样做（谷歌也确实没有那么高效，在使用单页应用程序处理 SEO 时面临太多问题）
3. 如果您的 React 组件用于Link导航到我假设的其他组件，那么在 SPA 的情况下它将无法正常工作，因为爬虫会尝试直接访问您的页面。

现在，如果您有一个带有单个组件的单页应用程序，您可以尝试react-helmet，但如果它涉及多个组件和导航，我建议您进行预渲染，也许使用 phatom-js 或 pre-render.io （间接使用phantomjs）。

如果您唯一关心的是元标记，那么您可以将元标记直接嵌入到您的 html 代码中，而不是在组件中。这将真正帮助爬虫查看元标记。

但是，如果您还希望爬虫看到您的内容，那么预渲染是我现在能想到的最佳解决方案。

如果您从服务器提供 React 包，则可以在服务器上动态生成元标记。

本质上，在您的 public/index.html 文件中，您希望用可识别的字符串替换元数据：

<!-- in public/index.html -->
<title>$OG_TITLE</title>
<meta name="description"        content="$OG_DESCRIPTION" />
<meta property="og:title"       content="$OG_TITLE" />
<meta property="og:description" content="$OG_DESCRIPTION" />
<meta property="og:image"       content="$OG_IMAGE" />

然后在服务器上，您想用动态生成的信息替换这些字符串。这是使用 Node 和 Express 的示例路由：

app.get('/about', function(request, response) {
  console.log('About page visited!');
  const filePath = path.resolve(__dirname, './build', 'index.html')
  fs.readFile(filePath, 'utf8', function (err,data) {
    if (err) {
      return console.log(err);
    }
    data = data.replace(/\$OG_TITLE/g, 'About Page');
    data = data.replace(/\$OG_DESCRIPTION/g, "About page description");
    result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png');
    response.send(result);
  });
});

取自本教程：https : //www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

** 无需安装 express 节点和所有..
** 只需添加 react-helmat & 必须添加 Helmat-meta 标记所有路由容器。（否则它仍然显示主页元标记）**react返回单个元素，因此您必须添加到父元素中，例如（div，form）

import { Helmet } from "react-helmet";
import MetaDataJSON from "./MetaDataJSON_File"; 

constructor(){
    this.metaDetails = {}; 
}

UNSAFE_componentWillMount(){
    let curPath = window.location.pathname
    this.metaDetails =  getMetaData(curPath);   
}

export const getMetaData = (pathname) =>{
  const metaObj = MetaDataJSON;      // import meta json and check the route path is in equal to your meta json file        
  let metaPath = Object.keys(metaObj);
  if (metaPath.indexOf(pathname) >= 0) {
    return metaObj[pathname]; 
  }else{
    return metaObj["/"]; 
  }
} 

// you must add in all component (where routing container)
render(){ 
    return(
        <div>
            <Helmet>
                <title>{this.metaDetails.title}</title>
                <meta name="description" content= {this.metaDetails.description}/>
                <meta name="keywords" content= {this.metaDetails.keywords} />
            </Helmet>
        <div>
    )
}

有一个名为 React-Helmet 的包可用，它有助于控制每条路线上的 Your Head 标签。Helmet 采用纯 HTML 标签并输出纯 HTML 标签。它非常简单，并且对 React 初学者友好。

<Helmet>
     <title>{context.StoreName}</title>
     <meta name="theme-color" content={`${context.ThemeColor}`}/>
</Helmet>

参考 - https://codeburst.io/how-to-control-head-tags-in-react-seo-friendly-8264e1194880