获取网页的打开图像？（当您共享其链接时，Facebook嵌入缩略图的方式）

发布于 2025-01-19 09:02:00 字数 496 浏览 4 评论 0原文

在我的网页上，我想共享一个链接对于该页面，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。

原文

On my webpage I want to share a link - let's say to this wikipedia page for Superhero

In the code for that page there is the following code in the head tag:

<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">

This is the thumbnail for that page that is shown if you share the link on social media. (Most pages now have one).

Is there a way to retrieve that image url to embed on my normal webpage page?

I'm using CSS, HTML and Javascript.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

影子是时光的心 2025-01-26 09:02:00

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

向 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}
从 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 服务器

。如果我理解正确的话， /package/parse-open-graph" rel="noreferrer">parse-open-graph 可以在浏览器中工作。

You can use https://www.opengraph.io/, for example:

Make request to 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}
Get image URL from the JSON response, which looks like this:

{
   //...
   "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"
      }
   },
   //...
}

Note, that the free tier only allows 100 requests per month. And I'm not affiliated with it.

Alternatively, you can use something like open-graph-scraper - never tried, but looks promising, will require running NodeJS server as far as I understand.

This one parse-open-graph can work in browser, if I understand correctly.

回复收藏 0 原文

~没有更多了~