为什么 og:image 没有用 React 渲染？

Question

在 Facebook 消息中发送网站链接时尝试使用缩略图。开始使用s-yadav/react-meta-tags以下教程，但发送链接后图像不存在。

链接：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 渲染的所有内容还不存在（包括那些元标记）。您可以通过右键单击该页面并选择“查看源代码”来验证它，您将看到在正文中，只有一个<div id="root"></div>. 问题在于，许多搜索引擎和爬虫在爬行时实际上并不运行 JavaScript。相反，他们会查看初始 HTML 文件中的内容。这就是 Facebook 找不到“og:image”标签的原因。有两种方法可以解决这个问题。

TL;DR如果可以的话，将您的应用程序托管在Netlify上。他们提供预渲染服务。

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

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

• Next.js 教程
• Gatsby.js 教程

实施其中一种解决方案后，请访问Facebook 共享调试器，要求 Facebook 再次对您的页面进行扫描。