Opening up Open Graph with Bookmarklets

As you well know, Open Graph is part of Facebook’s (World Domination) Platform and is one of the more successful semantic markup languages recently strewn about your local internet.  The tags look like this:

 <meta property="og:title" content="&quot;Good Jobs Not Giveaways&quot; To Protest Downtown Brooklyn&#039;s Chase Bank" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://fort-greene.thelocal.nytimes.com/2011/11/09/activists-to-protest-downtown-brooklyns-chase-bank/" />
<meta property="og:site_name" content="The Local - Fort-Greene Blog" />

They give Facebook and other data aggregators extra meta data so that they can better represent, distribute (and profit from) your data.  And though I am sure Google is parsing og tags, they do of course have their own languages which also have all sorts of SEO and info-topology implications (c.f. Food52′s article on the recipe markup and search).  I predict there will be anti-trust suits but for now we have our mercantile Babel. I could go on about disruptive technologies and the inevitable economic repercussions of oft-ensuing regulatory bureaucracy but I’ll spare you,  mainly because I want to talk about the issue at hand.

Some of our Open Graph tags were getting kicked out of the <pre><head></pre> of our pages by a 3rd party analytics script that was ever so naively rewriting the end of our head within itself.  And as important as I’m sure their analytics service is, we have like 5 others on that site and not all of them can be at the bottom, know what I’m saying? So  I used Facebook’s debugging utility to see which og tags it’s scraper was grabbing from our site and sure enough the image tag and a few others were getting skipped.

I did a quick search for a bookmarklet that would deliver whatever website I am viewing to Facebook’s debugger but one did not exist … until now:

DRAG THIS TO YOUR BOOKMARKS -> OG Debug

Here’s the code:

javascript:void(location.href='http://developers.facebook.com/tools/debug/og/object?q='+escape(location.href));

A WordPress developer made a pretty nice little bookmarklet for viewing the og tags of a page without having to view source (n.b. this one will only work on pages that have jQuery):

Pretty nifty.   Please let me know if you have any trouble with either of those.  As of this writing, this page doesn’t have og tags (the default scrape of the meta title and description suits us fine) but feel free to test it out.  And if you care, maybe I’ll share some of my other favorite bookmarklets.

Chris

blog comments powered by Disqus
Careers | Copyright 2011

Chapel Hill

1506 E Franklin St.
Suite 300
Chapel Hill, NC 27514

Brooklyn

99 North 10th Street
The Terrordome
Brooklyn, NY 11211