在社交媒体上分享，网址不呈现任何元数据 [英] Sharing on social media, the URL does not render any meta data

问题描述

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

We have built a project (Web Application) in React .net core using react in client-side rendering.

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

We've used react-helmet for dynamically assigning meta tags.

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

The issue being when the app renders in the browser. The browser gets only the static HTML on initial load which does not include the dynamic meta tags we have set. However on inspecting you get those meta tags under "Elements".

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

Also, if we use these URL for sharing on any social media, like WhatsApp or Facebook, the URL does not render any metadata as it should.

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

Tried searching for solutions to our problem, the most obvious answer we came across was to try server-side rendering instead. We get that, but it is not a solution to try out at this juncture when we're ready with app to roll it out.

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

Others we came across were "react-snap", "react-snapshot", but no luck with react-snap, it requires to upgrade React's version to 16+, which we did but I guess not all dependencies were upgraded, there was an error saying "

水合物不是函数

(水合物与反应域有关)

(hydrate concerns the react-dom)

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

With react-snapshot, we could not find the necessary type definition, which is required in react .net core to function properly

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

Please guide for the next probable step (except the paid ones like prerender, etc)?

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

Main goal: Social Applications should render the meta data when we paste/share the URL within them.

推荐答案

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

Prerender is the only solution. I used a node dependency called "prerender" -> https://github.com/prerender/prerender

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

It works enabling a web server wich make http requests. Assigning value to a boolean: window.prerenderReady = true; in your website tells your server when the page is ready to "take the photo" and it returns the Html when so. You need to program an easy script that parses all the site urls and save those html contents to files. Upload them to your server and using .htaccess or similar target the crawlers external-hit-facebook,twitterbot,googlebot, etc.. to show them the prerendered version and 'the real site' to the rest of user-agents.

它对我有用.

这篇关于在社交媒体上分享，网址不呈现任何元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！