时间戳

首页 > 解决方案 > 在社交媒体上分享，网址不呈现任何元数据

reactjs - 在社交媒体上分享，网址不呈现任何元数据

问题描述

我们在 React .net 核心中使用客户端渲染中的 react 构建了一个项目（Web 应用程序）。

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

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

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

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

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

水合物不是函数

（水合物涉及反应域）

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

请指导下一个可能的步骤（除了预渲染等付费步骤）？

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

标签： reactjstypescriptvisual-studio-2017meta-tagssocial-media

解决方案

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

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

它对我有用。

推荐阅读