DEV Community

Cover image for How Twitter Shows Those Link Cards
shrey vijayvargiya
shrey vijayvargiya

Posted on

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
I’ve 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?

  • I’ve 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, it’s 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.

That’s 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. It’s a fun and knowledgeable small project for developers, you can give it a try.

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

Top comments (4)

Collapse
 
techthatconnect profile image
TechThatConnect

While originated by Twitter its my understanding all the social media giants use this type of api system. I believe it's called open graph protocol though I don't really want to call it a protocol as each social media company uses their own meta tags and standards for them.
ogp.me/

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Yes, you are right most of the social media platforms use the same kind of meta tags to fetch website information excluding some of the websites likes Twitter and LinkedIn use their own meta tags so far.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

LinkedIN use Open Graph. There are only two type of meta tags, Twitter cards and the reset of the internet use Open Graph.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

here is the link to check your website metadata

But where is the link:

Or you can use puppeteer to crawl the corresponding website

It doesn't make sense to use puppeteer that I used to view website as real user. What you need to scrapping library that just read HTML of the website. This is how any crawler do this (including Google, Facebook, and Twitter)

You don't need to came up with your own meta data. There is Open Graph that is defacto standard to Cards and most websites (except Twitter) use Open Graph meta tags.