Get the open graph image for a webpage? (The way facebook embeds a thumbnail image when you share its link)

Question

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.

Answer 1

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

1. 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}
2. 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.