Twitter Cards: Toying with Metadata

This post is about getting nifty Twitter Summary cards and similar OpenGraph summary cards for Facebook, Google+, and LinkedIn on a single-author copy of WordPress.  It’s not too difficult, except for the misinformation that makes it impossible.

Several hours of woe and tribulation later, I have added the following to my possibly-unnecessary header-article.php (which is called from single.php as get_header("article")):

<?php if(is_single() || is_page()) { ?>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Lexwerks">
<meta name="twitter:creator" content="@Lexwerks">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:description" content="<?php the_field( "summary" ); ?>">
<?php if (has_post_thumbnail()) {
$thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id() ); ?>
<meta property="og:image" content="<?php echo $thumb_src[0] ?>">
<?php } ?>
<meta property="og:type" content="article">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php } ?>

I installed Elliot Condon’s Advanced Custom Fields plug-in as the easiest way to add a single piece of metadata to an article (I called it “summary”) and fetch it back out again because adding a summary slug should be simple, and not necessarily an excerpt.  And now it is; thanks Elliot! I also added a custom functions.php to my -child theme’s folder to enable “Featured Images” nee “Thumbnails” — it is simply <?php add_theme_support( 'post-thumbnails' ); ?> and now I can attach images to my posts that aren’t currently showing up in my posts because I haven’t asked them to, but they will show up on my cards. I may add a condition in the future to default in my favorite thumbnail if I don’t attach a specific featured image to a post.

I could probably augment this further by including heights and widths for the image in use, picking up my Twitter ID from my WordPress User Profile (under “Users” if you, like me, haven’t seen it before), or gone with my numeric twitter:site:id instead of my changeable user name.

My testing shows that Google+ picks right up on this stuff with only a little bit of caching, which is great.  Facebook tends to cache the card for rather longer, so it does work but it’s difficult to test revisions with.  Twitter wants you to grovel for their approval — or at least click a button and wait a couple of weeks after you have implemented Twitter Cards to their algorithmic satisfaction — before you can see the results showing up in tweets. For a company that forces people to abandon grammar and spelling to get ideas out faster, this seems like a particularly backwards maneuver. The up-side to Twitter is that you can feed your card into their validator until you’re happy with it — though that’s not the same as it actually working and adding value in the wild.

I haven’t tested with LinkedIn because I’m not particularly linked in to… yeah.  I’ll get around to it later.

It is worth noting that Twitter seems to have the staunchest restrictions on the way they read the card. They want:

  1. The title to max out at 70 characters.
  2. The description to max out at 200 characters (though I’ve also heard 160).
  3. The image to be under 1mb (reasonable) at least 60px in each direction (really?) and if they go more than 120px in either direction then they’re going to get cropped.
  4. The site to load in under 3 seconds for their validating algorithm.

If you follow those rules, your summary should show up fine for Facebook and Google+ as well, assuming FB and/or G+ didn’t cache an earlier copy of your pre-successful metadata.