Optimizing meta tags for social sharing
I’ve spent the past few hours attempting to figure out exactly which meta tags I should include for my blog, and what the content should be. Ideally, I’d like my blog’s links to show up with fancy cards on Twitter, Facebook, LinkedIn and G+, and I’ve accomplished that. Here’s a breakdown of what I’ve added.
Twitter has a handy-dandy card validator tool which allows you to put in the URL for whichever page should generate the interactive card and it’ll bring it up for you without caching the result. This is nice, as G+ and Facebook both cache the generation of the widget, so if you make a mistake or need to change something, you’ll have to wait until their respective caches expire. Annoying.
The Twitter meta tags all have their name attributes prefixed with “twitter:”, as such:
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://dapperdeveloper.com/2015/01/21/optimizing-meta-tags-for-social-sharing/">
<meta name="twitter:title" content="Optimizing meta tags for social sharing">
<meta name="twitter:description" content="A guide to adding the appropriate meta tags to the head element for optimal social sharing.">
<meta name="twitter:image" content="...">The first meta tag indicates the content of the generated Twitter card. There’s a bunch of different types, but “summary” is the one I’m using, which shows a small thumbnail image along with the title and a brief description of the article.
Facebook/LinkedIn
Both Facebook and LinkedIn use the Open Graph protocol in its meta tags to provide interaction with various status updates. I’ve added type, title, description, url, and image to my blog, and it works like a charm. Here’s the syntax.
<meta name="og:title" content="Optimizing meta tags for social sharing">
<meta name="og:type" content="article">
<meta name="og:url" content="http://dapperdeveloper.com/2015/01/21/optimizing-meta-tags-for-social-sharing/">
<meta name="og:description" content="A guide to adding the appropriate meta tags to the head element for optimal social sharing.">
<meta name="og:image" content="..." />The only real difference between the meta tags of Facebook/LinkedIn and Twitter is the “type” field, which in this case is “article”. Again, there’s a lot of different values to choose from, and “article” is the choice that fits best for what will be shared.
Google Plus
Google Plus uses a slightly different format for tags and, in fact, the meta tags themselves aren’t even necessary. It uses various attributes defined at Schema.org to annotate HTML tags with information. That said, though, there’s nothing stopping us from using meta tags with these new attributes, which is what I’ve done, as I like to keep all of this information clustered in one area.
<meta itemprop="name" content="Optimizing meta tags for social sharing">
<meta itemprop="description" content="A guide to adding the appropriate meta tags to the head element for optimal social sharing.">
<meta itemprop="author" content="Chris Harrington">
<meta itemprop="datePublished" content="January 21, 2015">
<meta itemprop="image" content="...">Here, the itemprop attribute has replaced the name attribute from Twitter and Facebook/LinkedIn, but the content remains the same. I’ve added author and datePublished entries in addition to the usual suspects.
Conclusion
That’s all there is to it. I put this together on my WordPress blog, so if you’d like to see how it all ties together with the PHP, you can check out the raw index.php file here. Thanks for reading!
