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.
twitter:card
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.
twitter:site
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.
twitter:title
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.
twitter:description
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.
twitter:creator
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" />
twitter:image
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.
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:
https://moz.com/blog/meta-data-templates-123
http://www.wpmeta.org/plugins/wonderm00ns-simple-facebook-open-graph-tags/
