OG 标签不适用于 react-helmet 和 Netlify答案

【问题标题】：OG tags not working with react-helmet and NetlifyOG 标签不适用于 react-helmet 和 Netlify
【发布时间】：2019-05-02 12:12:52
【问题描述】：

我这辈子都想不通。以下站点托管在 Netlify 上并启用了预渲染。检查页面时，所有 OG 标签都是正确的。这些标签是使用 react-helmet 注入的。

https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays

在 Facebook 调试器上抓取上述 URL 时，它会响应：

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

应该存在的唯一一个错误/警告是app_id，我不在乎。

我已经等待了超过 48 小时来清除缓存，我尝试使用附加到 URL 的查询字符串进行抓取，并且图像具有绝对 URL。但即使是描述标签也没有通过。

使用 react-helmet 和 Netlify 的人能否明确说明这个问题？

【问题讨论】：

标签： prerender netlify facebook-opengraph react-helmet

【解决方案1】：

这与已知的prerendering issue 有关。

我的解决方法是从index.html 文件中删除<!DOCTYPE html> 声明作为临时解决方法，直到上述问题得到解决。

【讨论】：

【解决方案2】：

虽然我不能告诉你确切的原因。您的 SSR 无法正常工作。转到 Chrome DevTools 并单击控制台旁边的 3 个垂直点：

选择网络条件，然后取消选中自动选择并输入Googlebot/2.1 (+http://www.google.com/bot.html)：

现在刷新页面并注意到您在网站上看到的只是一些纯文本，上面写着“html”，甚至您的 javascript 包也丢失了。这是你的 html 的样子：

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="fragment" content="!">
  <link rel="shortcut icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Brownie Points</title>
  <link href="/static/css/2.3bf0f3c5.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

请注意，Netlify SSR 处于测试阶段，但我个人没有遇到这些问题。除了启用它之外，您是否执行过任何其他步骤？我之前已经测试过它可以与 CRA 生成的应用程序一起使用。

【讨论】：

用户代理和由此产生的损坏的 HTML 导致我在我的答案中找到了 github 线程以及错误解决方法，所以我奖励了你。