为什么 og:image 不使用 React 渲染？

Question

在 Facebook 消息中发送网站 link 时尝试使用缩略图。开始使用 s-yadav/react-meta-tags 按照教程进行操作，但在 link 发送后图像不存在。

Link: https://ticket-44-portal-staging.herokuapp.com/buyTicket?status=1959165690885328

在 React 组件中应用了以下代码：

return (
<div className="container">
  <MetaTags>
    <title>{searchedEventTime.name}</title>
    <meta name="description" content={searchedEventTime.description} />
    <meta property="og:title" content={searchedEventTime.name} />
    <meta
      property="og:image"
      content={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${eventId}.cover.jpg`}
    />
  </MetaTags>

我可以在 HTML 中看到呈现的元标记，为什么它不起作用？

Answer 1

因为网站是单页应用。在加载 JavaScript 之前，React 渲染的所有内容还不存在（包括那些元标记）。您可以通过右键单击该页面并select“查看源代码”来验证它，您会看到在正文内部，只有一个<div id="root"></div>。问题是许多搜索引擎和爬虫在抓取时实际上并不运行 JavaScript 。相反，他们查看初始 HTML 文件中的内容。这就是 Facebook 找不到“og:image”标签的原因。有两种方法可以解决这个问题。

TL;DR Host your app on Netlify if you can. They offer prerendering service.

首先，您可以查看预呈现，这是一种在浏览器中呈现您的 javascript 的服务，保存静态 HTML 和 return，当该服务检测到请求来自爬虫。如果你可以在 Netlify 上托管你的 React，你可以使用他们的免费预渲染服务（它会将预渲染页面缓存 24 到 48 小时）。或者您可以查看 prerender.io。如果您不想移动到另一个框架而只想让 SEO 工作正常，这就是解决方案。

另一种更常见的处理此问题的方法是进行静态站点生成 (SSG) 或服务器端呈现 (SSR)。这意味着 HTML 内容是使用 React DOM 服务器端 API 静态生成的。当静态 HTML 内容到达客户端时，它将调用 hydrate() 方法将其转回正常运行的 React 应用程序。两个最流行的框架是 Gatsby.js and Next.js。使用这些框架，您将像现在一样编写 React 和 JSX 代码。但他们提供更多功能来增强您的应用程序，包括 SSG、SSR、API 路由、插件等。我建议您查看他们的“入门”教程。从 create-react-app 转移到其中一个框架可能需要不到一天的时间，具体取决于项目的大小。

实施这些解决方案之一后，访问 Facebook Sharing Debugger 要求 Facebook 再次对您的页面进行 scape。

为什么 og:image 不使用 React 渲染？

Why og:image does not rendered with React?

facebook-opengraph

reactjs