grafixgeek.com

data driven graphics made easy

Facebook sharing - how to get the right content to display

Posted on November 03, 2015

When I proudly tried to share my newly created Rugby World Cup leading try scorers D3 chart on Facebook, this is what I got:



So how do you fix this? Enter Facebook's Open Graph meta tags.

<meta property="og:url"content="http://grafixgeek.com/products/samples/rugby-world-cup-leading-try-scorers" /> 
<meta property="og:type" content="article" /> 
<meta property="og:title" content="Rugby World Cup Leading Try Scorers" /> 
<meta property="og:description" content="When Bryan Habana scored a hat-trick against the USA team in the 2015 Rugby World Cup (RWC) tournament he joined the peerless Johan Lomu at the top of the all time leading RWC list. This graphic shows the all-time Rugby World Cup top try scorers. The data, presented using D3.js, includes the country they played for, the total number of tries and breakdown per tournament." />
<meta property="og:image" content="http://grafixgeek.com/images/blog/2015-11-03-rwc-chart-4.png" />

And once I had done this, the result was so much better.


If you find that after adding the meta tags that the data still doesn't come through try using the Facebook Open Graph Debugger. This will refresh the data and you will see what Facebook sees.