Add Twitter Cards To Your Website

When you share a post on a social network like Facebook it will scan the URL that you are sharing and return certain information to display the page in your feed. Facebook will get the page title, page description and a thumbnail image for the page. You can change the information that Facebook gets by using the open graph meta tags.

These are simply meta tags you can add to the head tag of your page, when Facebook scans your page to get the title, description and images it will search for these tags, if they are there then it will use the contents of these tags instead of the page title. These means you can fully customise the page titles just for Facebook.

Twitter also has meta tags which you can use to customise the message on Twitter. These are called Twitter cards, it allows website owners to add more descriptive text on their links when they are shared on Twitter.

When a link is shared on Twitter it is limited to the 140 character limit on all tweets, but on all tweets you can expand the tweet to find out more about it. This section is where you find information on how many people have replied to the tweet, re-tweeted it and added it to their favourites. But if you have the Twitter meta tags added to your head tag then instead of just seeing the information about re-tweets and favourites you will also see a snippet of the page by showing you the title, description and an image.

Because you can post different types of links to Twitter like images and videos there are different types of Twitter cards you can have, one will give you a snippet of the page, another will display an image, the last one is a media play to play music or video.

Which type of card that is displayed can also be defined by a meta tag.

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

To display a snippet of the page the value of the content attribute will need to be summary. For an image the value will need to be changed to photo. To change this to display the media player for a video or music set the value to be player.

Twitter Card Meta Tags

There are different meta tags you can use depending on the type of Twitter card you are using.

Summary Card

• twitter:card - The card type, which will be one of "summary", "photo", or "player".
• twitter:url - Canonical URL of the card content.
• twitter:title - The title of your content as it should appear in the card.
• twitter:description - A description of the content in a maximum of 200 characters.
• twitter:image - A URL to the image representing the content.

  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@paulund_">
  <meta name="twitter:creator" content="@paulund_">
  <meta name="twitter:url" content="http://www.paulund.co.uk">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Page Description">
  <meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Photo Card

• twitter:card - Set this value to photo
• twitter:url - Canonical URL of the card content.
• twitter:title - The title of your content as it should appear in the card.
• twitter:description - A description of the content in a maximum of 200 characters.
• twitter:image - A URL to the image representing the content.
• twitter:image:width - Define the original width of the image, this may not be the size Twitter use to display it but it will help twitter keep the aspect ratio of the image if it needs to resize the image.
• twitter:image:height - Define the original height of the image.

  <meta name="twitter:card" content="photo">
  <meta name="twitter:site" content="@paulund_">
  <meta name="twitter:creator" content="@paulund_">
  <meta name="twitter:url" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
  <meta name="twitter:title" content="Image Title">
  <meta name="twitter:description" content="Image Description">
  <meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
  <meta name="twitter:image:width" content="500">
  <meta name="twitter:image:height" content="500">

Player Card

• twitter:card - Set this value to player
• twitter:url - Canonical URL of the card content.
• twitter:title - The title of your content as it should appear in the card.
• twitter:description - A description of the content in a maximum of 200 characters.
• twitter:image - A URL to the image to be used as the thumbnail of the video
• twitter:player - The URL of the player
• twitter:player:stream - The URL of the video to stream on the player
• twitter:player:width - The width of the IFRAME to display the player
• twitter:player:height - The height of the IFRAME to display the player

  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@paulund_">
  <meta name="twitter:url" content="http://www.paulund.co.uk/example-video.mp4">
  <meta name="twitter:title" content="Title Of Video">
  <meta name="twitter:description" content="Description of the video">
  <meta name="twitter:image" content="http://example.com/example-video-thumbnail-image.jpg">
  <meta name="twitter:player" content="https://www.paulund.co.uk/example-player">
  <meta name="twitter:player:stream" content="http://www.paulund.co.uk/example-video.mp4">
  <meta name="twitter:player:width" content="500">
  <meta name="twitter:player:height" content="250">

Facebook Open Graph Tags

If you are already using the Facebook open graph tags then you will have something like this in the head of your HTML.

<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Because the Twitter cards meta tags were based on the open graph tags, Twitter will actually use these as a fall back. It will first search for the Twitter card tags, if they are not there then it will search for the open graph tags and use them for the title, description and images. This is so you don't need to duplicate the tags with the same information as the open graph tags.

This means that you can have this in the head of your website and it will search work perfectly fine.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

To view updated information about the Twitter card visit the Twitter documentation.

Twitter Cards