我们使用React和.net core创建了一个Web应用程序，客户端渲染使用了React。我们使用react-helmet动态分配meta标签。问题在于当应用程序在浏览器中呈现时，初始加载时浏览器仅获取静态HTML，其中不包括我们设置的动态meta标签。但是，在检查元素时，您可以获得这些meta标签。此外，如果我们在任何社交媒体上使用这些URL进行共享，例如WhatsApp或Facebook，URL将不会呈现任何元数据。我们尝试寻找解决方案，并发现最明显的答案是尝试使用服务器端渲染。我们理解这一点，但在准备好应用程序以滚动它之后，这不是要尝试的解决方案。我们还尝试了“react-snap”、“react-snapshot”，但没有运气，对于react-snap，它需要升级React版本到16+，虽然我们已经这样做了，但我想并非所有依赖项都已升级，因为出现了错误，显示“hydrate is not a function”（hydrate涉及react-dom）。使用react-snapshot，我们找不到必要的类型定义，在react .net core中需要它才能正常运行。请指导下一步可能的步骤（除了付费的如prerender等）？主要目标：在社交应用程序中粘贴/共享URL时，应呈现元数据。
在社交媒体上分享时，URL没有呈现任何元数据。
19
- Prasaad Patil
2
同样的问题.. 你为此做了什么？ - Burak Kalafat
你说你更新了React，但是你有更新react-dom依赖吗？我在我的SPA上使用了react-snap，效果非常好。我写了一篇关于它的博客文章：https://romiem.com/blog/opengraph-single-page-app/ - romiem
3个回答
6
预渲染是唯一的解决方案。 我使用了一个名为“prerender”的node依赖项 -> https://github.com/prerender/prerender
它通过启用一个Web服务器来使http请求生效。在你的网站上分配一个布尔值：window.prerenderReady = true; 告诉你的服务器页面何时准备好“拍照”，并在此时返回Html。您需要编写一个简单的脚本来解析所有站点URL并将这些HTML内容保存到文件中。将它们上传到您的服务器，并使用.htaccess或类似的方式针对爬虫external-hit-facebook、twitterbot、googlebot等展示渲染后的版本和“真实站点”给其他用户代理。
对我很有用。
- Becario Senior
5
太好了..!!唯一的问题是我必须使用'api.prerender.com/render?token=token&url=https://MySPA.com'来渲染元标记。另外，我的spa的css和标志也没有被呈现。如果我只想使用MySPA.com来呈现这些元标记怎么办？ - Prasaad Patil
请注意，在您的初始HTML中必须设置变量：window.prerenderReady = false; 然后在JS代码中，当您完全确定JS操作完成时，请将window.prerenderReady = true。此外，您应该注意，您可以下载此服务并在NodeJS上本地使用，而不是使用它们的公共测试URL。 - Becario Senior
我使用npm命令安装了Prerender，但是每当我使用window.prerenderReady = false时，它就会给我一个编译错误，说类型为window的属性prerender不存在 :( 这是因为我在使用TypeScript吗？ - Prasaad Patil
好的... 这个 window.prerenderReady = false 需要在初始 HTML 中用 <script></script> 包裹起来。然后你可以通过 JS 代码将其设置为 true。请阅读 prerender 文档。 - Becario Senior
不支持 TypeScript。需要使用 prerender.io 中间件，但它没有类型定义。同时，我们的应用程序不是 express 应用程序，因此 app.use(require('prerender-node')) 无法工作。 - Prasaad Patil
3
当获取URL时，需要在发送回客户端的HTML中存在Open Graph的元标签。浏览器或机器人不会等待应用程序在客户端渲染之前确定元标签是什么-它们只会查看最初加载的HTML。
如果您需要您的Open Graph元数据的内容是动态的（根据URL、设备、浏览器等显示不同的内容），您需要将react-meta-tags之类的内容添加到您的服务器代码中。
任何react meta tags库都没有可用的类型定义，但您可以添加自己的类型定义。这可能有点棘手，但请查看官方文档和提供的模板以开始操作。
如果您不需要它是动态的，您可以将标签添加到 index.html 中静态部分的<head> 标签中。- maxpaj
8
如果没有服务器端渲染，元数据就不能是动态的。所有这些React元数据渲染库似乎都缺少类型定义。也许你可以在其中任何一个中添加自己的类型定义？ - maxpaj
我假设API调用是在客户端进行的。在应用程序在客户端呈现之前，您需要在客户端和服务器之间的第一次联系中在HTML中具有元标记，以便社交应用程序（Facebook、LinkedIn等）可以读取这些标记。 - maxpaj
是的，调用是在客户端进行的，并且元标签存在于组件的渲染函数中。 - Prasaad Patil
好的。由于我们对reactjs和typescript非常陌生，你能给我一个关于如何添加自定义类型定义的好参考吗？此外，父组件实际上正在调用api，然后将其状态作为props传递给子组件。在该子组件的render函数中，我们已将这些props分配给metadata的content部分。如果您需要，我可以编辑问题并附上代码。 - Prasaad Patil
显示剩余3条评论
2
今天我遇到了同样的问题。我有两个 React Web 应用程序需要解决这个问题。以下是我的解决方案：
- 将您的预览图像放在 public 文件夹中。
- 仍然在 public 文件夹中，打开
index.html，添加行<meta property="og:image" content="preview.png"/>或者<meta property="og:image" content="%PUBLIC_URL%/preview.png"/>。
前往 https://www.linkedin.com/post-inspector/ 检查是否有效。
希望这能帮助到您！
- yukiyao
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接