Unraveling Twitter's Link Cards: A Developer's Guide
Written on
Understanding Twitter's Link Cards
Have you ever wondered how Twitter generates those link cards every time someone pastes a URL? For our website, we invest significant effort into passing the Twitter card validation tests.
Why is Metadata Important?
The underlying mechanism involves meta tags that each webpage contains. These tags are crucial because they not only enable users to gather information from your website based on its URL but also improve search engine rankings for Google crawlers.
Google crawls through web pages, extracting essential information such as titles, descriptions, images, and tags to deliver precise search results. In simple terms, if Google can easily comprehend the content on your site, it can better recommend it to users.
How Twitter Validates Links
Twitter employs a similar approach. When a URL is pasted into the tweet box, it utilizes a validator API to retrieve the associated link metadata. This metadata includes fundamental details about the website, such as the title, banner image, description, and tags. Twitter then uses this information to generate those appealing cards in mere seconds.
It's worth noting that Twitter has its own meta tags. If your website lacks these, Twitter can still generate cards based on its internal tags. This aspect consumed a considerable amount of my time, so when you're adding metadata for Twitter cards, make sure to consult the documentation for including Twitter meta tags.
Detecting Your Website’s Metadata
I've created an API to help detect the metadata for your custom domain. You can check your website's metadata through this link. If your metadata is missing, ensure you thoroughly add it to your site.
The concept is straightforward: anyone can build their own custom metadata-fetching API or module. Using an in-house metadata-fetching API, we can also create cards similar to Twitter's on our own website.
My Development Journey
I developed an in-house metadata-fetching API. Once a URL is logged, we fetch the metadata using this API. Finally, we render the cards based on the API's response.
Creating a Metadata Fetching API
To develop a metadata-fetching route, you need to:
- Require the URL in the parameters.
- Use an npm module that fetches metadata from each link provided.
- Alternatively, you can utilize Puppeteer to crawl the respective website and gather the metadata. It’s quite manageable.
- Return the required metadata in the route response.
Final Thoughts
At first glance, this entire process may seem straightforward, but it took considerable time, research, and effort to grasp the core logic behind it. During my exploration of how Twitter displays these cards, I would paste links into the tweet box while simultaneously monitoring the Chrome network tab. Once a URL is entered, Twitter promptly runs the API to fetch the relevant metadata.
That's all for today! I hope you find this concept intriguing. It can be both enjoyable and challenging to delve deep into understanding these mechanisms. Many new developers might not publish such insights online, so this presents a valuable learning opportunity for anyone interested in the topic. Give it a try!
You can find all my articles for free at iHateReading. For more content, visit PlainEnglish.io. Consider signing up for our free weekly newsletter, and follow us on Twitter and LinkedIn. Join our Community Discord and become part of our Talent Collective.
Chapter 1: Introduction to Twitter Cards
Twitter Link Cards Explained
Section 1.1: The Role of Metadata
Metadata and Its Impact
The first video discusses a quick tip on making Twitter links disappear in a tweet.
Section 1.2: Twitter Card Functionality
Understanding Twitter Cards
The second video explains what a Twitter Card is and how it works.