Question

我不知道从哪里开始，我网站的默认链接预览如下：我不知道为什么它显示引导程序，而不是我的网站中显示什么。这是我要分享的页面：

所以我期望链接包含图像和标题（涂黑）。

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

感谢您的帮助。

Answer 1

您的问题是您的<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等人的所在地。从中获取Bootstrap元数据。

TL; DR：删除此行。

为将来参考，您可以使用Facebook的Sharing Debugger来解决此类问题。对于给定的URL，这是当前结果：

Facebook Sharing Debugger screenshot

请注意规范URL 和重定向路径字段，这些字段表示我的上述诊断。

Answer 2

您需要使用react-helmet或react-meta-tags之类的东西来正确设置<head>数据。您要设置的数据将是可以在here中找到的openGraph数据。

Answer 3

不确定这是否是您要找的答案，但是我在搜索如何在其他应用程序中预览链接时更新您的react应用程序显示的信息。我尝试过的每个解决方案都无法使用github页面并做出反应（react-helmet，react-meta-tags，react-document-meta）。最终起作用的是，您可以编辑index.html文件夹内的public来更改此信息。将此内容放在头部：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>IMDB</title>
    <meta property="og:audio" content="http://example.com/bond/theme.mp3" />
    <meta property="og:description" 
      content="Sean Connery found fame and fortune as the
               suave, sophisticated British agent, James Bond." />
    <meta property="og:determiner" content="the" />
    <meta property="og:locale" content="en_GB" />
    <meta property="og:locale:alternate" content="fr_FR" />
    <meta property="og:locale:alternate" content="es_ES" />
    <meta property="og:site_name" content="IMDb" />
    <meta property="og:video" content="http://example.com/bond/trailer.swf" />

来自https://ogp.me/

的示例

Answer 4

您还可以使用ogtag.me API，该API允许您动态缩短链接并发送您希望其在社交平台上显示的数据，然后在共享按钮中使用此缩短链接。

ReactJS：如何更改URL的链接预览？

4 个答案: