在社交媒体上分享,URL 不呈现任何元数据

IT技术 reactjs typescript visual-studio-2017 meta-tags social-media
2021-03-27 13:49:52

我们在 React .net core 中构建了一个项目(Web 应用程序),在客户端渲染中使用 react。

我们已经使用 react-helmet 动态分配元标记。

问题在于应用程序何时在浏览器中呈现。浏览器在初始加载时仅获取静态 HTML,其中不包括我们设置的动态元标记。但是,在检查时,您会在“元素”下获得这些元标记。

此外,如果我们使用这些 URL 在任何社交媒体(如 WhatsApp 或 Facebook)上共享,则该 URL 不会按应有的方式呈现任何元数据。

尝试寻找我们问题的解决方案,我们遇到的最明显的答案是尝试服务器端渲染。我们明白这一点,但是当我们准备好推出应用程序时,这不是在这个时刻尝试的解决方案。

我们遇到的其他人是“react-snap”,“react-snapshot”,但是react-snap没有运气,它需要将React的版本升级到16+,我们做到了,但我想并不是所有的依赖项都升级了,有一个错误说“

水合物不是函数

(水合物与react域有关)

使用 react-snapshot,我们找不到必要的类型定义,这是 react .net core 正常运行所必需的

请指导下一个可能的步骤(除了预渲染等付费步骤)?

主要目标:当我们在其中粘贴/共享 URL 时,社交应用程序应该呈现元数据。

3个回答

预渲染是唯一的解决方案。 我使用了一个名为“prerender”的节点依赖项 -> https://github.com/prerender/prerender

它可以启用发出 http 请求的 Web 服务器。为布尔值赋值:window.prerenderReady = true; 在您的网站中告诉您的服务器页面何时准备好“拍照”,并在此时返回 Html。您需要编写一个简单的脚本来解析所有站点 url 并将这些 html 内容保存到文件中。将它们上传到您的服务器并使用 .htaccess 或类似的目标抓取外部-hit-facebook、twitterbot、googlebot 等。向其他用户代理显示预渲染版本和“真实站点”。

它对我有用。

不适用于typescript。需要 prerender,io 用于中间件,但没有可用的类型定义。此外,我们的应用程序不是快速应用程序,因此 app.use(require('prerender-node')) 将无法工作。
2021-06-03 13:49:52
这很棒..!!唯一的问题是我必须使用 'api.prerender.com/render?token=token&url= MySPA.com ' 来呈现元标记。我的水疗中心的 css 和徽标也没有呈现。如果我只想使用 MySPA.com 来呈现这些元标记怎么办?
2021-06-07 13:49:52
我使用 npm 命令安装了预渲染,但是每当我使用 window.prerenderReady = false 时,它​​都会给我一个编译错误,说类型窗口上不存在属性预渲染:( 是因为我使用的是typescript吗??
2021-06-07 13:49:52
请注意您必须在初始 html 中设置的变量:window.prerenderReady = false; 然后在您的 JS 代码中,当您完全确定 JS 操作已完成时,设置 window.prerenderReady = true。您还应该注意到,您可以下载此服务并在 NodeJS 本地使用它,而不是使用他们的公共测试 url。
2021-06-12 13:49:52
好的.... 这个 window.prerenderReady = false 需要在初始 html 中包裹在 <script></script> 中。然后通过 JS 代码将其设置为 true。阅读预渲染文档。
2021-06-16 13:49:52

Open Graph的元标记需要出现在 HTML 中,当获取 URL 时,HTML 会发送回客户端。浏览器或机器人不会等到客户端呈现应用程序来确定元标记是什么——它们只会查看最初加载的 HTML。

如果您需要 Open Graph 元数据的内容是动态的(根据 URL、设备、浏览器等显示不同的内容),您需要在服务器代码中添加类似react-meta-tags 的内容

任何 react 元标记库都没有可用的类型定义,但您可以添加自己的类型定义。这可能有点棘手,但请查看官方文档他们提供的模板以开始使用。

如果你没有需要它是动态的,您可以添加标签到的静态部分<head>在您的index.html -标签。

基本上,我们正在做的是为一个组件调用 api 并将其分配给状态。然后将状态值分配给元数据的内容部分
2021-05-23 13:49:52
您可以查看有关声明文件官方文档及其提供的模板 以开始使用。
2021-05-31 13:49:52
类型定义不可用于 react-meta-tags。我们正在使用使用typescript的 Visual Studio 2017 反应模板。我们还需要元数据是动态的,没有任何服务器端渲染
2021-06-01 13:49:52
如果没有服务器端渲染,元数据就不能是动态的。似乎所有这些反应元数据渲染库都缺少类型定义。也许您可以将自己的添加到其中任何一个?
2021-06-13 13:49:52
我假设 API 调用是在客户端进行的。您需要在客户端和服务器之间的第一次接触时将元标记存在于 HTML 中 - 在应用程序在客户端呈现之前,以便社交应用程序(Facebook、LinkedIn 等)读取这些标记。
2021-06-19 13:49:52

我今天遇到了同样的问题。我有两个需要这个的 React Web 应用程序。这是我解决它的方法:

  1. 将您的预览图像放在公共文件夹中
  2. 仍在公共文件夹中,打开index.html,添加行<meta property="og:image" content="preview.png"/><meta property="og:image" content="%PUBLIC_URL%/preview.png"/>

转到https://www.linkedin.com/post-inspector/ 检查它是否有效。

我希望这会有所帮助!