How Medium, LinkedIn and Twitter show link cards just from a URL

It’s a decent project to develop over a couple of hours and add to your resume.

Under the Hood

This will be a very short story, as we will be discussing a cool feature.

If you reading on Medium, you might have seen the link cards as shown below.

iHateReading

Similarly, I want to render the link card on my website, it provides a good preview of the link and gives clear instructions to the user about the link even before opening the link.

Step One

• Create an endpoint or API that basically gives the data from the link or URL
• Simply render the card showing the data from the API response This is not rocket science, as Express JS or Node JS have tonnes of third-party libraries to scrap the required information from the URL.

I’ve used the Cheerio npm module to extract all the meta tags from the URL and filter only the required properties such as image, description and title.

This endpoint will return the same data as the response and now I only have to make the API call in the frontend to fetch the data and show the link card.

Step Two

This is an advanced approach.

Since I was using Next JS which provides serverless API.

It’s like an API endpoint written in the front end and works will all non-browser modules such as Cheerio.

So I simply create a serverless API and endpoint to fetch the meta tags and filter the data and send back the response.

There is no such difference between serverless API and Node JS API both are just APIs so in the front end we just have to make axios called to these endpoints to get the data.

Website

I choose both options for my website iHateReading.

I’ve created this endpoint to get the metadata from the URL or link of the website.

You can use this endpoint on your own if you want me to add more features then let me know.

I am thinking to make a react npm module for this entire link preview cards but it seems like npm modules created using Next JS will have its downside.

So I need to give thought to whether to use Next JS or just Create React App.

Try this project on your own and add it to your resume, just a small project that requires a little bit of understanding about the website and tags.

That’s it for today

Keep developing
Shrey
iHateReading