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.