Loading Image

Almost there...

Loading Image


Twitter Card Markup/Meta Tags

Have you ever wondered how you can control the information that is shown on Twitter cards? By making use of Twitter’s Card Markup/Meta Tags you can do just that.
Michael Jacobsen
15 August 2017 - 10:00
Category: Social Media
Twitter Card Markup Meta Tags

Twitter might not be the number one social network but it is still very popular and because of that knowing how to manipulate the information it shows on its Twitter cards is very useful. This is where the Twitter Cards Markup/Meta Tag API comes in.

The Twitter Cards Markup/Meta Tag allows web developers to customise certain information of their website that is carried over to Twitter when a webpage is shared. You can do this by simply adding custom Meta Tags to the source code of the webpage.

Some Key Twitter Card Markup / Meta Tags


The twitter:card Meta Tag tells Twitter how the Card should be displayed.

<meta name="twitter:card" content="summary_large_image">

There are two options, either summary_large_image or summary. Summary_large_image indicates to include a large image as where summary doesn’t. You can find an example of summary_large_image here and summary here.


The twitter:site Meta Tag helps Twitter to identify to which Twitter account this webpage is linked to, usually if you work for a company you would use the Twitter account of that company here.

<meta name="twitter:site" content="@michijacobsen" />

I would advise to only include this should you have a Twitter account.


The twitter:title Meta Tags is used to indicate which exact title should be displayed on the card.

<meta name="twitter:title" content=" Michael Jacobsen Blog ">

In most cases this should be the article or page title.


The twitter:description Meta Tag is used to indicate which exact description should be displayed on the card. The description is allowed to have a maximum amount of 200 characters.

<meta name="twitter:description" content=" This is an example description. ">

This is very useful as it could happen that Twitter gets the wrong description or none at all.


This does basically the same as the twitter:site Meta Tag but in this case you supply the Twitter account of the person who created the article or webpage.

<meta name="twitter:creator" content="@michijacobsen" />


The twitter:image Meta Tag is used to identify the image that should be used on the Twitter Card. This is quite nice since you can specify an image that is not displayed on the website normally.

<meta name="twitter:image: " content=" http://vignette2.wikia.nocookie.net/flightrising/images/a/a2/Twitter_bird.png/revision/latest?cb=20130417003010 ">

The image must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used and SVG is not supported.

More Twitter Cards Markup/Meta Tags

The above shown are only a few example of Meta Tags that are available from Twitter. Here is a complete list of tags that one can use.

Here are also some other resources that I found to be very useful: