Leveraging the Open Graph protocol

Have you noticed how links on some sites, especially social media sites, tend to be more than just blue text? They often include a little “card” with some graphic, the title, and a short summary.

I’ve been aware of ad hoc methods for doing this for a while. Twitter, for example, looks for special meta properties in pages. It appears that there’s some degree of interoperability in this space around the Open Graph protocol.

So, I’ve rolled it out on this site. The ordinary posts will get extra headers like these:

<meta content="en_GB" property="og:locale"/>
<meta content="So…" property="og:site_name"/>
<meta content="https://so.nwalsh.com/img/TitleCard.png"
      property="og:image"/>
<meta content="1675" property="og:image:width"/>
<meta content="1659" property="og:image:height"/>
<meta content="Leveraging the Open Graph protocol"
      property="og:title"/>
<meta content="Using metadata to make linking prettier."
      property="og:description"/>
<meta content="https://so.nwalsh.com/2023/01/14-open-graph"
      property="og:url"/>
<meta content="article" property="og:type"/>

Oh, and a prefix attribute on the html element for the og: prefix. Because it turns out namespaces⊕I am not taking bets on how many OG parsers would recognize a different binding. And I don’t think that the quality of my life would be improved if I knew. are useful in HTML too. Who ever could have guessed?

The home page gets a slightly different set.

Did it work? I guess we’ll see when my tootbot posts this to Mastodon. Was it worth the effort? Well, I dunno. At the very least, it was pretty low effort.