使用 Rich Preview 元标记作为图像 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。如果他们看到相关标签，他们将自动生成各自的“预览”。

实际上，您需要做的就是在头部添加正确的

<meta>

标签。您已经在上面的示例中演示了 OpenGraph 协议，大多数网站都使用该协议。

根据 OpenGraph，基本标签是：

og:title

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

og:type

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

og:image

- 图像 URL，应代表图形中的对象。

og:url

- 对象的规范 URL，将用作图中的永久 ID，例如

http://www.imdb.com/title/tt0117500/

。

还有很多其他的，但这些是您需要的主要的。

站点通常会定义自己的前缀。例如，Twitter 还使用自定义

twitter:

前缀来允许 一些扩展功能。

Facebook 有一个 调试工具，你可以通过它提交你的 URL，让他们强制更新预览，而 Twitter 有自己的 卡片验证器，它也会强制抓取网站。

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

希望这有帮助！

Answer 2

您需要的是网页抓取。

在nodeJs中，有使用Axios + Cheerio的模块

使用axios获取链接的完整HTML代码

使用Cheerio获取property属性中包含“og:image”的meta标签的content属性值。

const axios = require('axios');
const cheerio = require('cheerio');

async function extractImageUrl(url) {
  try {
    // Fetch the HTML content using axios
    const { data } = await axios.get(url);

    // Load the HTML content into cheerio
    const $ = cheerio.load(data);

    // Extract the image URL from meta tags (og:image)
    const ogImage = $('meta[property="og:image"]').attr('content');

    // Return the found image URL
    const imageUrl = ogImage;

    if (imageUrl) {
      return imageUrl;
    } else {
      return 'No rich preview image found';
    }

  } catch (error) {
    console.error('Error fetching the URL:', error.message);
    return 'Error fetching the URL';
  }
}

// Example usage:
extractImageUrl('https://example.com').then(console.log);