September 8, 2016
You've implemented social sharing buttons for content pages on your site and set up all the required meta data so Facebook gets the right image, title and description. Everything is great, right? Unfortunately, this isn’t always the case.
Our client DestinationBC uses a lot of great imagery to get people excited about British Columbia. So it makes sense to engage readers with a specific photo that you know will resonate. Take The Wild Within for example: though they may enjoy the story, what really stops your audience in your tracks is a great photo of Emerald Lake. How do you share that image connected to the context you found it in?
Here’s what that looks like for the Moved By Giants story:
Unfortunately, implementing this is not as straightforward as it sounds. While some social networks allow you to define some information attached to a shared URL through their APIs, most of them don't. The way Facebook and other social networks work is this: you tell them the URL you want to share and then they send their bot over to that URL to look at the meta data on that page and use it to determine how to present the link.
Here's the outcome of the example from above on Facebook:
If you’re sharing a URL, the only way to change the image displayed is to change the meta data for it. So for Open Graph, that’d be the og:image property and the twitter:image if you’re targeting Twitter to produce a Twitter Card. We achieved this by adding an additional parameter to the shared URL, which is interpreted by our server and leads to a changed meta tag. So instead of sharing http://blog.com/blog/article123 you’d share http://blog.com/blog/article123?metaImage=12345678. Your backend system looks up the image with the id 12345678 and overrides the value of the meta tag for the og:image property (and equivalents for other networks) with the right URL for the image.
By only passing along the image id versus the image URL you gain more control over what images can be associated with your content. So for example, you could check whether your image shows up on that page - or any other rule you might think of. Depending on the system, it also lets you serve a different size from how the image shows up on that page. And then in addition to the image parameter you could also add a hash to the URL to immediately jump to that image on the page or even adjust title and description like we did in the example above.
If you’re interested in displaying a count for shares of that particular page, you’ll need to consider whether you'd like to show an aggregate count or just count shares from your specific image separately. You can use meta tags (og:url property for Open Graph) to inform the crawlers of the canonical URL of your page. They’ll use that URL to identify your page and map share counts towards it.
As we’ve shown, it’s possible to fully customize the way your content is shared and to draw attention to specific parts of a page. Once you take control of how your meta tags are populated, you can do a lot of things. It's always exciting to find new ways users can interact with - and discover - new content.
Posted in social, web development