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.
You can use https://www.opengraph.io/, for example:
https://opengraph.io/api/1.1/site/${url_encoded_link}?app_id=${your_api_key}{
//...
"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.