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

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

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

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

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

此外,如果我们使用这些 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 正常运行所必需的

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

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

最佳答案

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

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

它对我有用。

关于reactjs - 在社交媒体上分享,URL 不呈现任何元数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50968603/

相关文章:

.net - 错误 NU1605 检测到软件包降级

javascript - AJAX 调用后无法在 ReactJS 上下文 API 中设置状态

javascript - react 路由器 : Cannot read property 'push' of undefined

typescript - 如何通过 typescript 代码动态注入(inject) Angular2 子组件?

javascript - 使用 TypeScript/ReactJS 的 useContext 的正确类型是什么?

javascript - www 根文件夹之外的 JS 文件

asp.net - Visual Studio 2017 ASP.Net 发布独立的 Dot Net Core 应用程序

javascript - 将 geoJSON 添加到 this.map mapbox-gl-js

reactjs - 我怎样才能让 Jest 静静地测试抛出的错误

visual-studio-2013 - 使用 Visual Studio 使用 TypeScript 构建 HTA(或单页本地 HTML 文件应用程序)