Reactjs 为什么og:图像不使用React渲染？

在Facebook消息中发送网站链接时，请尝试使用缩略图。按照教程开始使用

s-yadav/react meta标记

，但发送链接后图像不存在

链接：

在React componenet中应用以下代码：

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>

返回(
{searchedEventTime.name}

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

---

这是因为该网站是一个单页应用程序。在加载JavaScript之前，React呈现的所有内容都还没有出现（包括那些元标记）。您可以通过右键单击该页面并选择“查看源代码”进行验证，您将看到，在主体内部，只有一个

。问题是，许多搜索引擎和爬虫程序在爬网时并没有实际运行JavaScript。相反，它们查看初始HTML文件中的内容。这就是Facebook找不到“og:image”标记的原因。有两种方法可以解决此问题

如果可以的话，DR会把你的应用程序放在主机上。他们提供预渲染服务

首先，您可以查看prerendering，它是一种在浏览器中呈现javascript的服务，保存静态HTML，并在服务检测到请求来自爬虫时返回。如果您可以在Netlify上托管React，您可以使用免费的prerendering服务（该服务将预呈现页面缓存24到48小时）。或者你可以查看。如果你不想转移到另一个框架，只想让SEO工作，这是一个解决方案

处理此问题的另一种更常见的方法是执行静态站点生成（SSG）或服务器端呈现（SSR）。这意味着HTML内容是使用React DOM服务器端API静态生成的。当静态HTML内容到达客户端时，它将调用方法将其转换回正常运行的React应用程序。两个最流行的框架是和。有了这些框架，您将像以前一样编写React和JSX代码。但它们为您的应用程序提供了更多功能，包括SSG、SSR、API路由、插件等。我建议您查看它们的“入门”教程。根据项目的大小，从CreateReact应用程序转移到这些框架之一可能需要不到一天的时间

---

在实施了其中一个解决方案后，请访问Facebook，要求Facebook再次替换您的页面。

我在Heroku没有发现任何预渲染，你知道为什么吗？我正在使用Heroku作为发布服务器。@János您正在使用create react应用程序吗？如果您在Heroku托管应用程序，您必须设置自己的预渲染服务器。但是，这是什么呢使用目的？或者从我在他们的描述中读到的内容来看，他们只是帮助将元标记从组件移动到文档头。除非您进行服务器端渲染或预渲染，否则他们无法解决您的问题。