Meta tags and Open Graph Image Extraction from an Article for better Click Rate

While building https://hn.boxpiper.com/, a re-imagined version of Hacker News for this decade, I stumbled upon the idea to present stories in the card-image layout where a user can see the relevant open graph image of an article. Why? Because a visual representation of an article increases the chance of visiting that link.

To that, I followed a simple process. First I fetch the HTML version of the page using AXIOS, https://www.npmjs.com/package/axios. Once I fetched this successfully, I used https://metascraper.js.org/#/ which has an extensive set of modules that helps in fetching the relevant meta tags from the given HTML.

Once I have the open graph images, I gave preference to the Twitter meta image to the open graph because Twitter has a much stricter rule w.r.t the resolutions. The better the resolutions, the better the thumbnails.

Earlier I was using https://cloudinary.com/ but switched to https://imgbb.com/. For simple image hosting, it's doing a very good job. No issues till now.

Visit https://hn.boxpiper.com/ and enjoy the re-imagined version of Hacker News.

Trending on Indie Hackers
I co-founded Tally — a new type of form builder 1 year ago and bootstrapped it to $30k ARR with a team of 2. AMA! 31 comments How I sold my no-code GPT-3 bubble app: virtual ghost writer 10 comments How we got our first paying user within a week of adding payments 7 comments We Built AppSumo’s Partner Experience Team from Scratch (Here’s How It Happened) 6 comments I’m growing a newsletter on ⚡️ Hotwire dev! 5 comments Dorik 2.0 is live on ProductHunt 1 comment