Open Graph and oneboxing

This is a standardized way to present a preview of a URL. Instead of just showing a URL, like this:

It can be presented as a “onebox,” like this:

That’s just a screenshot from a system which is able to do oneboxing. The magic is that when editing, (wherever you are editing,) you simply paste in a raw URL and the oneboxing is done automatically by the system.

What wizardry is this?

It’s based on the Open Graph Protocol (OG). Facebook started this as a way to get sites on the open web to provide software-understandable, summary information. It took off everywhere because it’s just downright awesome.

A web site includes information stuffed out of sight, in the source HTML of the page. Software can fetch the URL, notice the OG information and craft a meaningful summary. This grew into the idea of presenting a single box summary—”one boxing”—of a URL if it has OG information.

Testing it

When something doesn’t onebox as you expect, how would you figure out which end has the problem? (Was it the end serving the URL content that doesn’t have OG data? Or is the end fetching the URL that couldn’t parse the OG data?) So someone wrote a handy tool that lets you see what (if any) OG data there is at any URL you want to type in: