Atproto markup for HTML

Today it's likely just us #atprotodevs who want to see the at:// uris behind the interesting or useful parts of the atproto-powered sites we visit, but I think we need an agreed way to markup HTML so browser extensions can hook in.

I want your feedback in determining if this suits, and if it does, implementing it on your sites, so the convention spreads!

Using RDFa

A short while back I prototyped this with RDFa tags , and built a browser extension to show off that data. It was as simple as adding two attributes to an HTML element representing atproto data:


Some element showing data derived from atproto data


I added these to my Slay the Spire 2 atproto site , and built the Where it's AT browser extension ( Firefox , Chrome , Safari ) to highlight & expose the at:// uris, as something of a demo.

Rationale

I think there are a number of ways you could use metadata like this:

Enabling "review anything atproto" type functionality (I'm already thinking about this here )

Letting people deep-link to the original of that record, via the canonical or platform of their choice

Letting devs see how atproto apps are put together (I was looking for how Popfeed & Bookhive store reviews recently, it took me a moment to realise Bookhive stores reviews on the book record — this would have shown me immediately!)

Annotating the HTML so Agents can see where the data has come from too

…and I'm sure much more

Going further

If we really like this, I'd propose that the fine folks at @atproto.com ship an RDFa schema specifically for atproto (which could extend later to include permissioned spaces 😉) so that the syntax could provide clearer indications than the default schema:Thing I've used above.

An illustrative (but not well thought through) example:



<article
typeof="at:Record"
resource="at://did:plc:abc123/app.bsky.feed.post/3kxy..."
>



by
Abc123



It could also support in the to indicate that the whole page is a rendering of the provided at:// uri.

This needs you!

If you like this & build atproto apps then please write here with feedback of what you'd use it for, what's missing, or what you'd change (and why!) — and you can just implement it on your site.