Bing bing, twitter email… it’s twitter card. Twitter has developed a new feature called twitter card, but how do you use it? when I was setting up the PureRandom twitter card, I followed all the instructions, but still got a bit confused. This could be just me, though it never hurts to help others.
I will show you below how step by step how you can create your own twitter card, but first what is a twitter card? A twitter card is a new feature for tweeters to add more content to their posts. It is mostly aimed at the company or blogger tweeters as you have to have a running website that you have access to the header tag.
When you have a twitter card and you or anyone else tweets with the website URL, you used in the set up, then the twitter card will show below the tweet. This can give you options to show more images about your website, more information or a bit of both, so you’re not just limited by 140 character anymore. This would be great for you to pass the standard information about your website, so not only does the twitter user see what you are posting about , but see’s what you or your company is about as well.
//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
(adsbygoogle = window.adsbygoogle || []).push({});
This first step is to make sure you have access to the <head> tag, as this is where you have to put the meta information for twitter to read. If you have this then you can start with choosing the type of card you want to feature on your tweet. From the below you can choose the card and then use the meta information below for the chosen card.
If you use the imformation below as an example and replace the information where needed to for your content. With the meta information you simply place it in the <head> tag on your website. Once the content is in you can go to the Titter Card Validation. Here you enter you website URL of where you place the meta information. If you press the validation button you will be given a message or a sucess and it will be reviewed before going live. If you don’t get this message then you may have an error. You can us this link to find out what is wrong to correct your meta data – Twitter Card Errors
Summary Card
This is a default twitter card and has the best of all the Twitter Cards. You can get the image of you post across plus give a little information about your content.
Code Example:
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@pateman90″ />
<meta name=”twitter:title” content=”Pure Random Blog” />
<meta name=”twitter:description” content=”Pure Random is a place for programmers, technology lovers and everything else that is technical, plus some other subjects that interest the blogger.”>
<meta name=”twitter:image” content=”http://www.purerandom.co.uk/image/pureran/logo.png” />
<meta name=”twitter:url” content=”http:www.purerandom.co.uk” />
Summary Card with Large Image
If your content is more about the images, then you can use this card to promote an amazing graphic and then a smaller bit of information.
Code Example:
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@pateman90″>
<meta name=”twitter:creator” content=”@pateman90″>
<meta name=”twitter:title” content=”Pure Random Blog”>
<meta name=”twitter:description” content=”Pure Random is a place for programmers, technology lovers and everything else that is technical, plus some other subjects that interest the blogger.”>
<meta name=”twitter:image:src” content=”http://www.purerandom.co.uk/image/pureran/logo.png”>
Photo Card
One of the best card to show off that image you have on your website, but saves you having to write a paragraph. This can help if you want to draw your audiance through graphics.
Code Example:
<meta name=”twitter:card” content=”photo” />
<meta name=”twitter:site” content=”@pateman90″ />
<meta name=”twitter:title” content=”Pure Random Blog” />
<meta name=”twitter:description” content=”Pure Random is a place for programmers, technology lovers and everything else that is technical, plus some other subjects that interest the blogger.”>
<meta name=”twitter:image” content=”http://www.purerandom.co.uk/image/pureran/logo.png” />
<meta name=”twitter:url” content=”http:www.purerandom.co.uk” />
Gallery Card
Though the best one of all for your images is the Gallery Card. This will show off as many of your graphics so you make a statement and stand out.
Code Example:
<meta name=”twitter:card” content=”gallery” />
<meta name=”twitter:site” content=”@pateman90″ />
<meta name=”twitter:title” content=”Pure Random Blog” />
<meta name=”twitter:description” content=”Pure Random is a place for programmers, technology lovers and everything else that is technical, plus some other subjects that interest the blogger.”>
<meta name=”twitter:url” content=”http://www.purerandom.co.uk” />
<meta name=”twitter:image0″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”>
<meta name=”twitter:image1″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”>
<meta name=”twitter:image2″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”>
<meta name=”twitter:image3″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”>
//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
(adsbygoogle = window.adsbygoogle || []).push({});
I don’t have the content to preview these cards, but for more information you can visit their respective links.
App Card
If you have a downloadable app you may want to try this card out to help increase your download rate and reach more protential customers.
https://dev.twitter.com/cards/types/app
Player Card
If you are a video company or even a YouTuber, you can give people a teaser video with the Player card to catch their attention to you website.
https://dev.twitter.com/cards/types/player
Product Card
Got an item you want to sell especially? Then embed this Twittter Card to get the word and image out now.
https://dev.twitter.com/cards/types/product
For a full breakdown of all the meta tags and what they do you can refer to the below:
|
Property |
OpenGraph |
|---|---|
|
twitter:card The card type Used with all cards |
n/a |
|
twitter:site @username of website Used with summary, summary_large_image, photo, gallery, product, app, player cards |
n/a |
|
twitter:site:id Same as twitter:site, but the user’s Twitter ID Used with summary, summary_large_image, photo, gallery, product, player cards |
n/a |
|
twitter:creator @username of content creator Used with summary_large_image, photo, gallery, product cards |
n/a |
|
twitter:creator:id Twitter user ID of content creator Used with summary, summary_large_image, photo, gallery, product cards |
n/a |
|
twitter:description Description of content (maximum 200 characters) Used with summary, summary_large_image, gallery, product, player cards |
og:description |
|
twitter:title Title of content (max 70 characters) Used with summary, summary_large_image, photo, gallery, product, player cards |
og:title |
|
twitter:image:src URL of image to use in the card. Image must be less than 1MB in size Used with summary, summary_large_image, photo, product, player cards |
og:image |
|
twitter:image:width Width of image in pixels Used with summary, photo, product, player cards |
og:image:width |
|
twitter:image:height Height of image in pixels Used with summary, photo, product, player cards |
og:image:height |
|
twitter:image0, twitter:image1, twitter:image2, twitter:image3 1st, 2nd, 3rd, and 4th image in the gallery, respectively. Images must be less than 1MB in size Used with gallery card |
n/a |
|
twitter:player HTTPS URL of player iframe Used with player card |
n/a |
|
twitter:player:width Width of iframe in pixels Used with player card |
n/a |
|
twitter:player:height Height of iframe in pixels Used with player card |
n/a |
|
twitter:player:stream URL to raw video or audio stream Used with player card |
n/a |
|
twitter:data1 Top customizable data field, can be a relatively short string (ie “$3.99”) Used with product card |
n/a |
|
twitter:label1 Customizable label or units for the information in twitter:data1 (best practice: use all caps) Used with product card |
n/a |
|
twitter:data2 Bottom customizable data field, can be a relatively short string (ie “Seattle, WA”) Used with product card |
n/a |
|
twitter:label2 Customizable label or units for the information in twitter:data1 (best practice: use all caps) Used with product card |
n/a |
|
twitter:app:name:iphone Name of your iPhone app Used with app card |
n/a |
|
twitter:app:id:iphone Your app ID in the iTunes App Store (Note: NOT your bundle ID) Used with app card |
n/a |
|
twitter:app:url:iphone Your app’s custom URL scheme (you must include “://” after your scheme name) Used with app card |
n/a |
|
twitter:app:name:ipad Name of your iPad optimized app Used with app card |
n/a |
|
twitter:app:id:ipad Your app ID in the iTunes App Store Used with app card |
n/a |
|
twitter:app:url:ipad Your app’s custom URL scheme Used with app card |
n/a |
|
twitter:app:name:googleplay Name of your Android app Used with app card |
n/a |
|
twitter:app:id:googleplay Your app ID in the Google Play Store Used with app card |
n/a |
|
twitter:app:url:googleplay Your app’s custom URL scheme Used with app card |
n/a |
