Open Graph: Facebook and Twitter Cards metadata

Posted on 24/05/2016. Estimated read time: under a minute (210 words)

One of the motivators for going "back to basics" on my blog was to focus on the markup semantics and laying a solid foundation.

Given one of the main powers of the Open Web is the ability to link and share content, I wanted to get my metadata in a workable state.

I've known about Open Graph for a few years, professionally I make sure that my client's websites leverage it - but the funny part is that I never implemented it on my own blog.... until now!

I followed the various implementation guides for the various "standards", ala Open Graph Protocal and Twitter Cards, etc. But I ended up with a whole lot of metadata in my <head>, (or as it is more affectionately known, metacrap).

Luckily I'd spotted a post by Jeremy Keith that tackles the Metadata markup bloat, by merging and combining the <meta> tags with the various "standards" using different attributes.

Here's an example of this post...

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@leekelleher">
<meta name="twitter:url" property="og:url" content="http://leekelleher.com/2016/05/open-graph-facebook-twitter-metadata/">
<meta name="twitter:title" property="og:title" content="Open Graph: Facebook and Twitter Cards metadata">
<meta name="twitter:description" property="og:description" content="One of the motivators for going ...">
<meta name="twitter:image" property="og:image" content="http://leekelleher.com/assets/img/northbynorthwest_300x300.jpg">

Whoah, metadata about a post about metadata!