按请求 URL 改变 SPA index.html 的元数据
在项目模板中，Asp.Net Core 3.1 React SPA 应用程序只有一个由多个路由提供服务的 index.html 文件。这会导致社交共享的问题。社交网络依靠元数据来了解网页的内容。当用户共享链接时，Facebook 会读取网页并生成预览。预览包含标题、一两行描述性文本和一张图像。
Facebook 通过依赖 HTML 标头内的元数据来生成这些预览。 SPA 的单个 index.html 文件提供了 Facebook 构建网站上每个页面的预览所需的信息。 Facebook 按原样读取 HTML 文件，而不是应用可以填充元数据的 JavaScript。对于我的用户来说，这意味着我网站上共享到 Facebook 和其他社交网络的每个链接都会生成完全相同的预览。
如何根据导航的 URL 以编程方式插入元数据？我的逻辑将取决于主机标头和导航路径。
An Asp.Net Core 3.1 React SPA app has, in the project templates, only one index.html file that's served from multiple routes. This leads to an issue with social sharing. Social networks rely on metadata to understand what the web page is about. When a user shares a link, Facebook reads the webpage and generates a preview. The preview has a title, a line or two of descriptive text, and an image.
Facebook generates these previews by relying on metadata inside the HTML header. The SPA's single index.html file provides the information Facebook needs to build a preview of every page on the website. Facebook is reading the HTML file as-is, and not applying JavaScript that could fill in the metadata. What this means for my users is that every link from my website that's shared to Facebook and other social networks is generating the exact same preview.
How can I programmatically insert metadata depending on the navigated URL? My logic will depend on both the host header and the navigated path.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论