so

Leveraging the Open Graph protocol

Volume 7, Issue 9; 14 Jan 2023

Using metadata to make linking prettier.

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 namespacesI 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.

#SelfReference#Mastodon

Please provide your name and email address. Your email address will not be displayed and I won’t spam you, I promise. Your name and a link to your web address, if you provide one, will be displayed.

Your name:

Your email:

Homepage:

Do you comprehend the words on this page? (Please demonstrate that you aren't a mindless, screen-scraping robot.)

What is two times one?   (e.g. six plus two is 8)

Enter your comment in the box below. You may style your comment with the CommonMark flavor of Markdown.

All comments are moderated. I don’t promise to preserve all of your formatting and I reserve the right to remove comments for any reason.