OG 标签不适用于 react-helmet 和 Netlify
OG tags not working with react-helmet and Netlify
我这辈子都弄不明白。以下站点托管在 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
唯一应该存在的 errors/warnings 是 app_id，我不关心它。
我已经等了超过 48 小时才清除缓存，我尝试使用附加到 URL 的查询字符串进行抓取，并且图像具有绝对 URLs。但连描述标签都没有通过。
有人可以使用 react-helmet 和 Netlify 来解释这个问题吗？
虽然我不能告诉你确切原因。您的 SSR 无法正常工作。转到 Chrome DevTools 并单击 Console 旁边的 3 个垂直点：
Select网络条件，然后取消勾选Select自动输入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 生成的应用程序一起使用。
这与已知的 prerendering issue 有关。
我的解决方法是从 index.html 文件中删除 <!DOCTYPE html> 声明作为临时解决方法，直到上述问题得到解决。
我这辈子都弄不明白。以下站点托管在 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
唯一应该存在的 errors/warnings 是 app_id，我不关心它。
我已经等了超过 48 小时才清除缓存，我尝试使用附加到 URL 的查询字符串进行抓取，并且图像具有绝对 URLs。但连描述标签都没有通过。
有人可以使用 react-helmet 和 Netlify 来解释这个问题吗？
虽然我不能告诉你确切原因。您的 SSR 无法正常工作。转到 Chrome DevTools 并单击 Console 旁边的 3 个垂直点：
Select网络条件，然后取消勾选Select自动输入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 生成的应用程序一起使用。
这与已知的 prerendering issue 有关。
我的解决方法是从 index.html 文件中删除 <!DOCTYPE html> 声明作为临时解决方法，直到上述问题得到解决。