将 Rich Preview 元标记用作图像 html css
Using Rich Preview meta tags as images html css
当您通过文本、Facebook 消息或任何主流消息客户端发送 link 时，您会注意到它会生成一个 "rich preview"。这基本上是您正在 link 访问的网站的弹出图像。
我明白如何设置这个属性，例如
<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">
但我想知道如何使用它。
我想做的是建立一个网站，其中 table 个 link，我希望每个 link 不只是一个文本 link ，而是一个正方形图像。我希望这些图像基于 links 生成，就像在消息传递客户端中一样作为丰富的预览。
（如果有帮助，我正在尝试从 google 相册中提取，所以我希望丰富的预览是专辑封面，标题是专辑名称）
例：我想从
https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
我也想使用标题和描述，但我确定过程是一样的。
像 Facebook 和 Twitter 这样的大公司都有自己的蜘蛛程序，它们会定期抓取网络并查看 DOM 网站。如果他们看到相关标签，他们将自动生成各自的 'preview'。
从字面上看，您需要做的就是在头部部分添加正确的 <meta> 标签。您已经在上面的示例中演示了 OpenGraph 协议，该协议被大多数网站使用。
根据 OpenGraph 的基本标签是：
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
还有很多其他的，不过这些是您需要的主要内容。
不过，网站通常会定义自己的前缀。例如，Twitter 还使用自定义 twitter: 前缀来允许 some extended functionality.
Facebook有一个debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator也会强制抓取网站
只需等待相关网站抓取您自己的网站，或通过相应工具手动提交您的网站，您的预览就会制作完成。此预览将适用于任何试图盗链到您网站的人，而不仅仅是您作为使用该工具的人。
希望对您有所帮助！
当您通过文本、Facebook 消息或任何主流消息客户端发送 link 时，您会注意到它会生成一个 "rich preview"。这基本上是您正在 link 访问的网站的弹出图像。
我明白如何设置这个属性，例如
<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">
但我想知道如何使用它。
我想做的是建立一个网站，其中 table 个 link，我希望每个 link 不只是一个文本 link ，而是一个正方形图像。我希望这些图像基于 links 生成，就像在消息传递客户端中一样作为丰富的预览。
（如果有帮助，我正在尝试从 google 相册中提取，所以我希望丰富的预览是专辑封面，标题是专辑名称）
例：我想从 https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
我也想使用标题和描述，但我确定过程是一样的。
像 Facebook 和 Twitter 这样的大公司都有自己的蜘蛛程序，它们会定期抓取网络并查看 DOM 网站。如果他们看到相关标签，他们将自动生成各自的 'preview'。
从字面上看，您需要做的就是在头部部分添加正确的 <meta> 标签。您已经在上面的示例中演示了 OpenGraph 协议，该协议被大多数网站使用。
根据 OpenGraph 的基本标签是：
og:title- The title of your object as it should appear within the graph, e.g., "The Rock".
og:type- The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image- An image URL which should represent your object within the graph.
og:url- The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,http://www.imdb.com/title/tt0117500/.
还有很多其他的，不过这些是您需要的主要内容。
不过，网站通常会定义自己的前缀。例如，Twitter 还使用自定义 twitter: 前缀来允许 some extended functionality.
Facebook有一个debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator也会强制抓取网站
只需等待相关网站抓取您自己的网站，或通过相应工具手动提交您的网站，您的预览就会制作完成。此预览将适用于任何试图盗链到您网站的人，而不仅仅是您作为使用该工具的人。
希望对您有所帮助！