获取网页的开放图形图像？（当你分享链接时，Facebook 嵌入缩略图的方式）

Question

在我的网页上，我想分享一个链接 - 比如说超级英雄的维基百科页面

在该页面的代码中，head 标签中有以下代码：

<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg/640px-Connecticut_ComiCONN_Superhero_Mascot..jpg">

这是您在社交媒体上共享链接时显示的该页面的缩略图。（现在大多数页面都有一个）。

有没有办法检索该图像 url 以嵌入到我的普通网页页面上？

我正在使用 CSS、HTML 和 Javascript。

Answer 1

您可以使用https://www.opengraph.io/，例如：

1. 向https://opengraph.io/api/1.1/site/https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSuperhero?app_id=f6ef4e6b-4162-40d7-8404-b80736d4bd55发出请求（https://opengraph.io/api/1.1/site/${url_encoded_link}?app_id=${your_api_key}
2. 从 JSON 响应中获取图像 URL，如下所示：

{
   //...
   "openGraph":{
      "title":"Superhero - Wikipedia",
      "type":"website",
      "image":{
         "url":"https://upload.wikimedia.org/wikipedia/commons/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg",
         "width":"1200",
         "height":"1005"
      }
   },
   //...
}

请注意，免费套餐每月仅允许 100 个请求。而且我与它无关。

或者，您可以使用类似open-graph-scraper 的东西- 从未尝试过，但看起来很有前途，据我所知，需要运行 NodeJS 服务器。

如果我理解正确的话，这个解析开放图可以在浏览器中工作。