Vaulting Out of Walled Gardens with Fancy Links

Have you ever noticed that in Twitter, Facebook, Google and Pinterest some links are displayed quite fancily, with preview images, descriptive text summaries and other information?
These links are fancy because of metadata in the source code of the web page itself, implemented specifically for the rich display of links inside each of these companies’ content platforms.

Unfortunately for developers, each of these internet industry titans has implemented their own metadata formats for this: Twitter has Cards, Facebook and Pinterest use Open Graph metadata and Google uses markup.

Thus creating a <header> soup of doom for each and every individual developer who dares to tread this path:
Well that looks like a mess. And it’s different for each website. However, it’s worth doing for two reasons:

The first reason is that fancy links increase click-through rates, increasing engagement and driving traffic to your website. This is good for your blog, your business, or whatever reason you’re sharing the link in the first place.

The second reason is that high click-through rates in walled gardens mean people are escaping those walled gardens, spending time on the Wild Wild Web.

So, to make it easier to do this, I created Silo Buster.
Silo Buster is an easy-to-use website where you enter a small amount of information, and all that <header> goop is generated for you. You can then copy and paste it into your web pages or integrate it into your template or content management system.

Take Silo Buster for a spin, and then check your analytics and see if there’s any change. Experiment with it: Tweak the photos, or the summary text and check again.

If you’d like to learn more about how these sites implement their metadata, and how to debug your rich links, check out the links at the bottom of Silo Buster.

If you’ve got other tips and tricks for fancy links, or experiences either good or bad with them, share your thoughts in the comments!

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , , ,

Leave a Reply