atproto

Atproto markup for HTML

A call to use trivial RDFa markup in our HTML to indicate which records produced the elements on our pages.

May 24, 2026 · 2 min read

oday 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:

<div typeof="schema:Thing" resource="at://uri">
  Some element showing data derived from atproto data
</div>

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.

A screen recording showing the functionality of Where it's AT — highlighting at:// uris on the Slay the Spire 2 site, clicking through to PDSls, then altering the settings to use aturi instead, and demoing clicking through to there as well.

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:

<html prefix="at: https://atproto.com/ns#">
<body>
  <article
    typeof="at:Record"
    resource="at://did:plc:abc123/app.bsky.feed.post/3kxy..."
  >
    <!-- Something derived from that post -->
  </article>
  <cite>
    by
    <span typeof="at:Identity" resource="did:plc:abc123">Abc123</span>
  </cite>
</html>

It could also support <link typeof="at:Renders" resource="at://did/collection/rkey"> in the <head> 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.

Did this enjoy this document?

Give it a heart — Standard Reader surfaces well-loved writing to more readers across the network.

byJP

@byjp.me