twitter-card

The twitter card is a new way of displaying twitter information that is still subject to approval by twitter, meaning that you have to sign up. However, getting your site ready for twitter cards is a pretty simple matter. Twitter describes it as a three step process:

  • review documentation
  • add meta tags
  • apply

We’ll focus on step #2 in conjunction with WordPress. I love using new mark-up especially when it comes to meta stuff. I recently deleted my D.C (dublin core) meta markup and now will be adding this twitter markup.

Types of Cards

First of all, there are several different types of cards. There is a “Summary Card” which is what we’ll be focusing on. This type of card works akin to Facebook’s extraneous information added when you paste in a link.

There is also a photo card, similar to how instagram’s pictures used to show up, and how twitter pictures show up.

Finally, there is a player card. Youtube uses this type of markup to show inline youtube player

Markup For Blogs

We’ll focus on the “summary” type of card. So what do we need to get that going?

  • card value (“summary”)
  • url (canonical url)
  • title
  • description
  • image (not required)

And that’s it. Basically, it works similarly to how meta description, title, etc. work for Google.

There is some other information that we’re not required to add but will:

  • twitter username for the site
  • twitter username per article

Twitter also allows author attribution PER URL (similar to how Google Plus author attribution works).

All of this information should be readily available via WordPress’s main functions. So let’s add it!

<!-- TWITTER -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@antjanus">
<meta name="twitter:creator" content="@antjanus">
<meta name="twitter:title" content="<?php wp_title(); ?>">

<?php 
if(is_single()): ?>
    <meta name="twitter:url" content="<?php echo get_permalink($post->ID); ?>">
<meta name="twitter:description" content="<?php echo get_the_excerpt($post->ID); ?>">
<?php 
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
 if(isset($imgsrc[0])): ?>
<meta name="twitter:image" content="<?php echo $imgsrc[0];?>">
<?php endif; ?>
<?php endif;?>

These lines should be added to the <head> tag. Let’s take these line by line to understand them better.

General Information

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@antjanus">
<meta name="twitter:creator" content="@antjanus">

This information is pretty static and can be added without any if/else statement. The first line tells twitter we want to use the “summary”-type card, the second and third line tells twitter who wrote it and whose site it is.

Page Specific Info

<meta name="twitter:title" content="<?php wp_title(); ?>">

<?php 
if(is_single()): ?>
    <meta name="twitter:url" content="<?php echo get_permalink($post->ID); ?>">
<meta name="twitter:description" content="<?php echo get_the_excerpt($post->ID); ?>">
<?php 
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
 if(isset($imgsrc[0])): ?>
<meta name="twitter:image" content="<?php echo $imgsrc[0];?>">
<?php endif; ?>
<?php endif;?>

Next up we have per-page stuff. The first line relays the title of the page. Basic. However, for the rest of the stuff, we’ll need to make sure we’re on an article. is_single() will determine that.

Twitter:url helps us get the canonical url by using get_permalink inside the single post page. If you were on a blog roll page, you’d get the permalink of the first article, which is why we’re tagging only single articles.

Next, we’ll get the excerpt for the post as the content of the page. Finally, we check for featured images in the post and if it’s there, we will add the twitter:image meta tag. It’s optional so don’t despair if your posts are text-only.

OpenGraph?

Some of this stuff may look similar to the opengraph spec, and that’s because it is. Twitter allows you to mix and match the tags. Basically, anything you don’t have in OpenGraph that twitter requires, just add that. So, “og:url”, “og:image”, and “og:description” can replace “twitter:url”, “twitter:image”, and “twitter:description”.

This is great news :) Just make sure you include the card type, and your twitter name!

Apply

Apply to participate and hope that twitter allows you to implement this! :)