Question

我无法为我的生命解决这个问题。以下站点托管在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的人可以对这个问题有一定的了解吗？

Answer 1

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

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

现在刷新页面，请注意，您在网站上看到的只是一些纯文本，显示为“ html”，甚至您的javascript包也丢失了。这是您的html外观：

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是Beta版，但我个人没有这些问题。除了启用它以外，您是否还执行了其他任何步骤？如果执行相同的步骤并检查我使用Netlify SSR和React create-app创建的站点，请注意html正确：https://yebu.io/

Answer 2

这与已知的prerendering issue有关。

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

OG标签无法与React-Helmet和Netlify一起使用

2 个答案: