为什么React无法渲染og:image？

Question

为什么React无法渲染og:image？

5

尝试在 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 中看到渲染的元标记，但它却不工作？

- János

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hangindev.com · Accepted Answer

因为该网站是单页应用程序。在加载JavaScript之前，由React渲染的所有内容（包括那些元标记）都不存在。您可以通过右键单击页面并选择“查看源代码”来验证它，您会发现在body中，只有一个

。问题在于，许多搜索引擎和网络爬虫在爬行时实际上不运行JavaScript。相反，它们查看初始HTML文件中的内容。这就是为什么Facebook找不到"og:image"标记的原因。解决此问题有两种方法。

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

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

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

实施这些解决方案之一后，访问 Facebook分享调试器，请求 Facebook 再次扫描您的页面。