获取网页的开放图形图像？ （Facebook 在您分享它时嵌入缩略图的方式 link）

Question

在我的网页上，我想分享一个 link - 让我们说给 this wikipedia page for Superhero

在该页面的代码中，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">

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

有没有办法检索该图像 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 服务器。

这个parse-open-graph可以在浏览器中运行，如果我理解正确的话。