Introducing opengraph-mf2 a library, and service opengraph-mf2.tanna.dev, for converting OpenGraph metadata to Microformats2

Featured image for sharing metadata for article

I've recently been looking at improving the way that posts on my site are presented on my site, to produce a little more metadata about the interaction I'm having.

This isn't just to improve the context for things like replies, but also for other interactions with posts, like when I'm posting a listen of a podcast, or bookmarking someone's post. Although I currently do this for i.e. interactions with Twitter, I wanted to increase support for other sites so both human and non-human readers of the site get the context they need.

As part of this, I wanted to implement the ability to consume metadata for other sites, and found that OpenGraph metadata is a fairly widely used metadata format to be a catch-all for most posts, as well as the more specific means of retrieving metadata that I've currently got.

While starting to look at implementing this for my Micropub server, which is written in Java, I realised that I'd need to write my own HTML-to-OpenGraph metadata parser which was a little bit more work than I'd planned on doing.

Before I started doing it, though, I remembered that this was a solved problem by Barry Frost with his Micropub server Vibrancy.

Instead of looking to solve this as a single Java-specific problem, I thought about how this is a common issue across the IndieWeb, and most likely further than that. I'm a big fan of producing Pipe services where possible, so started with that as the goal, which I could then consume from my Micropub service.

I proposed this on Vibrancy, but ended up making a start on it anyway as a means to unblock my own work.

I also noted that this is a useful piece of code that would likely be usable elsewhere, and for instance Vibrancy wouldn't want to consume an external service for this, when it could do it all itself, so I've also wrapped this into an NPM package, @jamietanna/opengraph-mf2.

An example of using this can be seen below, using the hosted version at opengraph-mf2.tanna.dev:

// curl 'https://opengraph-mf2.tanna.dev/url?url=https%3A%2F%2Fchangelog.com%2Fpodcast%2F482' -H 'Accept: application/mf2+json'
{
  "items": [
    {
      "type": [
        "h-entry"
      ],
      "properties": {
        "featured": [
          "https://cdn.changelog.com/static/images/share/twitter-podcast-0fed02e920a2ff887b9c8ccac88925e1.png"
        ],
        "name": [
          "Securing the open source supply chain with Feross Aboukhadijeh on the launch of Socket (The Changelog #482)"
        ],
        "photo": [
          "https://cdn.changelog.com/static/images/share/twitter-podcast-0fed02e920a2ff887b9c8ccac88925e1.png"
        ],
        "summary": [
          "This week we’re joined by the “mad scientist” himself, Feross Aboukhadijeh…and we’re talking about the launch of Socket — the next big thing in the fight to secure and protect the open source supply chain. While working on the frontlines of open source, Feross and team have witnessed firsthand how supply chain attacks ..."
        ],
        "url": [
          "https://changelog.com/podcast/482"
        ]
      }
    }
  ]
}

The source code for the library and the service can be found on GitLab, and big thanks for the basis of the code, Barry!

Written by Jamie Tanna's profile image Jamie Tanna on , and last updated on .

Content for this article is shared under the terms of the Creative Commons Attribution Non Commercial Share Alike 4.0 International, and code is shared under the Apache License 2.0.

#opengraph #opengraph-mf2 #indieweb #microformats2.

Also on: IndieWebCamp logo IndieWeb.xyz logo

This post was filed under articles.

Interactions with this post

Interactions with this post

Below you can find the interactions that this page has had using WebMention.

Have you written a response to this post? Let me know the URL:

Do you not have a website set up with WebMention capabilities? You can use Comment Parade.