Pra*_*til 10 social-media meta-tags typescript reactjs visual-studio-2017
我们在React .net核心中使用客户端渲染中的react构建了一个项目(Web Application).
我们使用react-helmet动态分配元标记.
问题是当应用程序在浏览器中呈现时.浏览器在初始加载时只获取静态HTML,不包括我们设置的动态元标记.但是在检查时,您会在"Elements"下获得这些元标记.
此外,如果我们使用这些URL在任何社交媒体上进行共享,例如WhatsApp或Facebook,则URL不会呈现任何元数据.
试图寻找我们问题的解决方案,我们遇到的最明显的答案是尝试服务器端渲染.我们明白了,但是当我们准备好将应用程序推出时,它不是在这个时刻试用的解决方案.
我们碰上了另一些人"反应快动","反应快照",但反应-SNAP没有运气,它需要升级版本阵营对16+,这是我们没有,但我想不是所有的依赖进行了升级改造,有一个错误说"
水合物不是一种功能
(水合物涉及反应)
使用react-snapshot,我们找不到必要的类型定义,这在react .net core中需要正常运行
请指导下一个可能的步骤(除了付费的那些,如预渲染等)？
主要目标:社交应用程序应在我们粘贴/共享其中的URL时呈现元数据.
预渲染是唯一的解决方案。 我使用了一个称为“ prerender”的节点依赖项-> https://github.com/prerender/prerender
它可以启用发出http请求的Web服务器。将值分配给布尔值：window.prerenderReady = true; 您的网站中的告诉您的服务器页面何时可以“拍照”，并在返回时返回HTML。您需要编写一个简单的脚本来解析所有站点url，并将这些html内容保存到文件中。将它们上传到您的服务器，并使用.htaccess或类似的目标将抓取工具external-hit-facebook，twitterbot，googlebot等作为目标。以向其他用户代理显示预渲染的版本和“真实网站”。
它为我工作。
Open Graph的元标记需要出现在获取 URL 时发送回客户端的 HTML 中。浏览器或机器人不会等到应用程序在客户端呈现后才确定元标记是什么 - 它们只会查看最初加载的 HTML。
如果您需要开放图谱元数据的内容是动态的（根据 URL、设备、浏览器等显示不同的内容），您需要在服务器代码中添加诸如React-meta-tags之类的内容。
任何 React 元标记库都没有可用的类型定义，但您可以添加自己的类型定义。这可能有点棘手，但请查看官方文档和他们提供的模板以开始使用。
如果您不需要它是动态的，您可以将标签添加到<head>index.html 中-tag 的静态部分中。
| 归档时间： |
|
| 查看次数： |
2557 次 |
| 最近记录： |