首页 > 解决方案 > ReactJS:如何更改 URL 的链接预览?

问题描述

我不知道从哪里开始,我网站的默认链接预览如下所示: 在此处输入图像描述 我不知道为什么它显示引导程序而不是我网站中的内容。这是我要分享的页面:

在此处输入图像描述

所以我期待链接会有图像和标题(涂黑)。

但好的一面是,当您单击引导链接时,它将重定向到我的页面而不是引导但我仍然无法得到的是为什么它显示引导而不是页面上的内容?我在哪里可以更改它?

谢谢您的帮助。

标签: javascriptreactjs

解决方案


你的问题是你的这一行<head>

<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">

这告诉机器人、网络爬虫和一般每个人这个页面与https://getbootstrap.com/docs/4.0/examples/blog/完全相同。它甚至更进一步,表明这是您页面的正确URL。

大多数自动化系统会在看到<link rel="canonical">标签后停止解析您的页面,而是将链接的页面解析为当前页面。这就是 Facebook 等人的地方。正在从中获取引导元数据。

TL;DR:删除此行。


为了将来参考,您可以使用 Facebook 的共享调试器来解决此类问题。对于给定的 URL,这是当前结果:

Facebook 分享调试器截图

请注意Canonical URLRedirect Path字段,它们表明了我的上述诊断。


推荐阅读