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

【问题标题】：Sharing on social media, the URL does not render any meta data在社交媒体上分享，网址不呈现任何元数据
【发布时间】：2018-11-30 18:58:03
【问题描述】：

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

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

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

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

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

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

水合物不是函数

（水合物与反应域有关）

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

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

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

【问题讨论】：

同样的问题..你为此做了什么
你说你更新了 react，但是你更新了 react-dom 依赖吗？我在我的 SPA 上使用了 react-snap，它对我很有用。我写了一篇关于这里的博文：romiem.com/blog/opengraph-single-page-app

标签： reactjs typescript visual-studio-2017 meta-tags social-media

【解决方案1】：

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

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

它对我有用。

【讨论】：

这太棒了..!!唯一的问题是我必须使用 'api.prerender.com/render?token=token&url=MySPA.com' 来呈现元标记。我的水疗中心的 css 和徽标也没有呈现。如果我只想使用 MySPA.com 来呈现这些元标记怎么办？
请注意您必须在初始 html 中设置的变量：window.prerenderReady = false;然后在您的 JS 代码中，当您完全确定 JS 操作已完成时，设置 window.prerenderReady = true。您还应该注意到，您可以下载此服务并在本地与 NodeJS 一起使用，而不是使用他们的公共测试 url。
我使用 npm 命令安装了 prerender，但是每当我使用 window.prerenderReady = false 时，它都会给我一个编译错误，提示 Property prerender does not exist on type window :( 是因为我使用的是打字稿吗？？
Ok.... 这个 window.prerenderReady = false 需要包裹在初始 html 中的中。然后通过 JS 代码将其设置为 true。阅读预渲染文档。
不适用于打字稿。中间件需要 prerender,io 但没有可用的类型定义。此外，我们的应用程序不是快速应用程序，因此 app.use(require('prerender-node')) 不会工作。

【解决方案2】：

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

如果您需要 Open Graph 元数据的内容是动态的（根据 URL、设备、浏览器等显示不同的内容），您需要将 react-meta-tags 之类的内容添加到您的服务器中代码。

没有可用于任何反应元标记库的类型定义，但您可以添加自己的。这可能有点棘手，但请查看official documentation 和the templates they have provided 以开始使用。

如果您不需要它是动态的，您可以将标签添加到 index.html 中 <head>-tag 的静态部分。

【讨论】：

类型定义不适用于 react-meta-tags。我们正在使用使用打字稿的 Visual Studio 2017 React 模板。我们还需要元数据是动态的，没有任何服务器端渲染
如果没有服务器端渲染，您就不能让元数据成为动态的。似乎所有这些反应元数据呈现库都缺少类型定义。也许您可以将自己的添加到其中的任何一个中？
基本上我们正在做的是对组件进行 api 调用并将其分配给状态。然后将状态值分配给元数据的内容部分
我假设 API 调用是在客户端进行的。您需要在客户端和服务器之间的第一次联系时在 HTML 中显示元标记 - 在客户端呈现应用程序之前，以便社交应用程序（Facebook、LinkedIn 等）读取这些标记。
您可以查看声明文件中的official documentation 和the templates they have provided 以开始使用。

【解决方案3】：

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

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

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

我希望这会有所帮助！

【讨论】：