How Twitter Shows Those Link Cards

How does the story begin?
I was wondering how Twitter creates those cards whenever the user enters the link or pastes the URL. For our website, we take a lot of time to pass the Twitter card validation test cases.

Why and what is metadata?
All the logic that goes behind is concerned with meta tags that every webpage has on its own. The meta tags are so important that not only it help users to grab your website data just from the domain name/URL, but metadata also gives better search engine ranking to the google crawler.

Google crawler iterates over the web pages and fetches the website information such as title, description, images, and tags to give accurate search results to the user.

Understand the logic in the simplest way, if google can easily read all the pages on your website and their corresponding data easily better it can recommend and give it to the users.

How Twitter created the validation cards
Twitter uses the same concept under the hood, once the URL is pasted in the textbox twitter runs the validator API to fetch the corresponding link metadata.

Metadata consists of website basic information such as title, banner image, description, tags, and so on. Using this information Twitter generates those cool cards in a fraction of seconds.

Although twitter uses its own meta tags so if not provided twitter will be able to show the cards of your website. This single concept consumes a lot of my time, so when you are adding metadata for Twitter cards make sure you read the docs for adding Twitter meta tags.

Detect your website metadata
Ive developed an API to detect the metadata of your own custom domain, here is the link to check your website metadata.

If your metadata is not available then make sure you add them to your website thoroughly.

The idea is simple, anyone can create their own custom metadata fetching API or module. In fact, using the in-house metadata fetching API we can also develop the cards just like Twitter on our own website.

How did I do?

• Ive developed an in-house metadata fetching API.
• Once the URL and link are added to any of the logs we fetched the metadata using API from the corresponding link
• Finally, we just need to render the cards using the response from the metadata API.

How to create metadata fetching API?

• Create a metadata fetching route that required the URL in the params
• Use this npm module that helps the server to fetch the metadata from each and every link passed in the parameters.
• Or you can use puppeteer to crawl the corresponding website and fetch the metadata, its not rocket science.
• Return the required metadata in the route response.

Conclusion
This entire logic might seem easy in one go, but it took me a lot of time and reading and research to under the core logic running the hood.

While researching how twitter shows the cards, I copy-paste the link in the textbox and check the chrome network tab at the same time. Once the URL is added to the tweet textbox twitter runs the API immediately to fetch the metadata from the corresponding link.

Thats it for today, hope you like this concept, it's fun and frustrating sometimes to dip deep to understand this concept. These concepts are not published on the internet by a lot of new developers. Its a fun and knowledgeable small project for developers, you can give it a try.

Thats it for today, until next time, have a good day.
Keep developing
Shrey
iHateReading