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?
screen-shot-2016-09-09-at-11-52-16-am
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 Schema.org markup.

Thus creating a <header> soup of doom for each and every individual developer who dares to tread this path:
screen-shot-2016-09-09-at-12-30-58-pm
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.
screen-shot-2016-09-09-at-12-30-00-pm
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!

About Dietrich Ayala

Dietrich is a technical evangelist at Mozilla. He's worked on Firefox, Firefox OS and a number of other Mozilla projects for over a decade. He's currently traveling around Asia speaking and writing about Mozilla, Firefox and the Web.

More articles by Dietrich Ayala…


7 comments

  1. Gabriel Finkelstein

    Could some of those tags be merged? Like:

    Into:

    Is that still valid?

    September 12th, 2016 at 09:56

    1. Dietrich Ayala

      Hey Gabriel! Your markup probably didn’t make it through the sanitizer. Can you link to a Gist or something like that?

      September 13th, 2016 at 05:25

  2. Flo

    Also worth reading: https://css-tricks.com/essential-meta-tags-social-media/

    September 12th, 2016 at 10:51

  3. Šime Vidas

    This seems like a great use case for a service worker utility library; it would intercept web page responses and then generate and insert the social media metadata into the HTML source before passing it to the browser.

    September 12th, 2016 at 19:04

    1. Dietrich Ayala

      OHHHHH that’s a fantastic idea, will have to make a code example for it… thanks Šime!

      September 13th, 2016 at 05:26

  4. sole

    Sime, the data that Twitter and others use to decide how to render the links is read and consumed server side. So a Service Worker would not be able to help here as Twitter would still see the HTML result.

    September 13th, 2016 at 05:26

    1. Šime Vidas

      Oh shoot! You’re right. Well, than maybe Express.js middleware (or whatever the most popular type of server module is; I happen to use Express)… In any case, this sort of thing is best automated :-)

      September 13th, 2016 at 18:00

Comments are closed for this article.