使用丰富的预览元标记作为图像 html css

Question

当您通过文本、Facebook 消息或任何主流消息传递客户端发送链接时，您会注意到它会生成“丰富的预览”。这基本上是您要链接的网站弹出的图像。

我了解如何设置这个属性，例如

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">

但我想知道如何使用它。

我要做的是设置一个带有链接表的网站，我希望每个链接不仅仅是一个文本链接，而是一个方形图像。我希望这些图像基于链接生成为丰富的预览，就像在消息传递客户端中一样。

（如果有帮助，我正试图从谷歌相册中提取，所以我希望丰富的预览将是专辑封面，标题将是专辑的名称）

例如：我想从 https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1

我也想使用标题和描述，但我确定过程是一样的。

Answer 1

像 Facebook 和 Twitter 这样的大公司都有自己的蜘蛛，它们会定期爬网并查看网站的 DOM。如果他们看到相关标签，他们会自动生成各自的“预览”。

实际上，您需要做的就是在您的 head 部分中添加正确的 <meta> 标签。您在上面的示例中演示了 OpenGraph 协议，大多数网站都在使用该协议。

根据 OpenGraph 的基本标签是：

og:title - 应出现在图表中的对象的标题，例如“The Rock”。

og:type - 对象的类型，例如“video.movi​​e”。根据您指定的类型，可能还需要其他属性。

og:image - 一个图像 URL，应该在图中代表您的对象。

og:url - 对象的规范 URL，将在图中用作其永久 ID，例如 http://www.imdb.com/title/tt0117500/。

还有很多其他的，虽然这些是您需要的主要部分。

不过，网站通常会定义自己的前缀。例如，Twitter 额外使用自定义 twitter: 前缀来允许 some extended functionality。

Facebook有一个debug tool，你可以通过它提交你的URL让他们强制更新预览，Twitter有自己的card validator，它也会强制抓取网站。

只需等待相关网站抓取您自己的网站，或通过相应工具手动提交您的网站，您的预览就会制作完成。此预览将适用于尝试热链接到您的网站的任何人，而不仅仅是使用该工具的您。

希望这会有所帮助！