How to Build a Link Preview API in JavaScript (Like Slack & Discord)

Every time you paste a URL into Slack, Discord, or Twitter, it magically shows a rich preview card with a title, description, and image. Ever wondered how that works? In this tutorial, we'll build a link preview API that does exactly that — extract metadata from any URL and generate visual previews. No Puppeteer, no Chrome, no headless browsers on your server. What We're Building A Node.js service that: Takes any URL as input Extracts Open Graph / Twitter Card metadata (title, description, image) Falls back to HTML <title> and <meta> tags when OG tags are missing Generates a screenshot thumbnail as backup Returns structured JSON ready for rendering The Approach Instead of running a full browser locally (expensive, slow, breaks often), we'll use two API endpoints: Web Scraper API — fetches and parses HTML, returns structured content Screenshot API — generates a visual thumbnail of the page Both are free to use with an API key from Frostbyte Gateway . Step 1: Set Up the Project mkdir lin