How to Add a Twitter Card to Your Website
Update your website’s metadata to support preview cards on Twitter
You must have come across people sharing website links with rich preview images, titles, and descriptions on Twitter. But when you tried the same approach with your own website all you got was a bland card with a missing image and minimal description.
This tutorial is gonna walk you through how to add that functionality to your website by just adding a few lines of code.
Metadata
Twitter uses the website’s metadata in order to get relevant information like the title and description for the Twitter card. This metadata also stores the link to preview image for the website.
Head over to the root file of the project and add the following meta tags
The first meta tag specifies the type of Twitter card, as they are of 4 types -
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can display video/audio/media.
For this tutorial, we will be using the Summary Card with Large Image type. The second meta tag corresponds to your Twitter handle. And third and fourth are for the website’s title and description respectively.
Preview Image
At this point, all that is left to do is add a meta tag with a preview image. But before that, we need to host the image on cloud storage in order to generate a downloadable link for the same. You can use services like Google Drive, Dropbox or OneDrive to host the image.
After uploading it to the storage, generate the shareable link and paste it over here. This website will convert the link to a downloadable one. Head back to the code file and add the following meta tag.
<meta name="twitter:image" content="Downloadable link here."/>Card validator
Once you have all the meta tags in place, push your code and wait till the website is live and running. After that, head over to the Card Validator and paste your URL. It will give you a preview of how the card will appear on Twitter.
Wrap Up
And that’s it!! You added a Twitter card to your website by just adding a few lines of code. If your card doesn’t appear as expected in the validator check the validator console for errors and try following the mentioned steps above again.
Want to Connect?As always if you have any further questions, you can always reach out to me on Twitter.
