Geeking Out Over Social Meta Data

I shared a Wired article on Facebook last night and noticed that they had a bigger image than normal on the resulting Facebook post:

Instead of something like this:

So I checked out the source on the Wired post and found some social meta data goodness… Bigger og:images and Twitter meta data too!

First, bigger og:images

When you set a larger image, it makes a huge difference when a link is shared on Facebook. Here’s an example of this No Treble article.

After I shared this discovery with Aaron, he sent me the doc for og:image sizes. A minimum of 600×315 is required for the larger image, and it needs to be set to a 1.91:1 ratio for optimal results.

Wired passes two og:image references: a square, cropped thumbnail (first), and a large version (second). I’ve done the same on No Treble. There are cases where I won’t have a big image on older articles, so I wanted to make sure I was passing the thumbnail all the time.

Twitter Cards

From Twitter’s Developer site:

Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers.

Here are the docs:

• Twitter Cards
• Markup Reference
• And a validator

Once you validate, you’ll see a button to submit your site for approval:

Approval for No Treble only took a few minutes, even though the message indicated it could take a few weeks when I first submitted.

Here’s what the card looks like for the same No Treble article:

This matches what you’ll see on Twitter.com when you click the “Show Summary” link under the tweet:

Finally, here’s the embedded card markup result:

Lesson: How to Groove on Bass http://t.co/EpPPR0xjeK

— notreble (@notreble) September 17, 2013

More info

Wired uses the Yoast WordPress SEO plugin to generate their meta data.

Yoast also has a post about Twitter cards.

I’m not using the Yoast plugin, because I set things manually in my templates due to specialized meta data rules I’ve developed for No Treble. Filling in the blanks is easy in the WordPress template if you don’t want to use a plugin.

Here’s what I have set for Open Graph:

And for Twitter:

Here’s Wired’s meta data for the article I shared. Now I just need to figure out what the “go:…” meta data is all about: