Adding Twitter Card Support To Your WordPress Theme 3 minutes to read

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:

General Information

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.

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

I’m really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it is rare to see a nice blog like this one these days..