How To for the Twitter Card

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&#8221; />
<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”&gt;

 

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&#8221; />
<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&#8221; />
<meta name=”twitter:image0″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”&gt;  
<meta name=”twitter:image1″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”&gt;  
<meta name=”twitter:image2″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”&gt;  
<meta name=”twitter:image3″ content=”http://www.purerandom.co.uk/image/pureran/logo.png”&gt;

//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

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s