TL;DR — In case you hyperlink to your Mastodon profile from CodePen, and your CodePen profile from Mastodon, your Mastodon profile will show your CodePen profile as a verified hyperlink, proving possession.
How does that work? It’s simply HTML!
There’s a rel attribute that may go on anchor (<a>) hyperlinks. The values for rel have quite a lot of performance. For instance, you may inform search engines like google and yahoo to not comply with or rank a hyperlink and that it’s user-generated:
<a
href="
rel="nofollow ugc">
Person Hyperlink
</a>There are safety and performance-gaining potentialities for utilizing values like noreferrer and noopener as effectively.
Right here’s one other worth: rel="me" (you may space-separate a number of values). The me value is a rather old-school Microformats thing. It’s fairly neat! The aim is that you put it on hyperlinks that time to different issues that you personal or management. Then, if the hyperlink you’re pointing to factors straight again additionally with a rel="me" hyperlink that may be a verification-of-ownership scenario. Because the wiki places it:
Thus establishing a bi-directional rel-me hyperlink and confirming that the 2 URLs symbolize the identical particular person.
The federated social networking website Mastodon (here’s me!) makes use of this actual setup to confirm private hyperlinks. Right here’s a picture of my Mastodon profile:
Discover there are three hyperlinks, the primary two of that are highlighted with checkmarks and inexperienced:
These “verified” hyperlinks are verified as a result of they comply with the bi-directional rel="me" linking exactly as Mastodon requires.
On CodePen, we’re now including that me worth to all of the hyperlinks you add to your profile. Mastodon does the identical, and thus verification is achieved. On my third hyperlink, that hyperlink to Amazon.com (clearly) doesn’t comprise a hyperlink again to my Mastodon profile, so it doesn’t confirm.
The Different Attainable HTML to Confirm
Whereas CodePen is now correctly placing the me worth on profile URLs — that really didn’t work for Mastodon verification on our first try. There have been truly two issues:
- CodePen profiles are client-side rendered, and the Mastodon crawler can solely see server-side rendered HTML.
- We wanted to make sure the Mastodon crawler didn’t get trapped by the firewall.
With that second one taken care of through DevOps magic, we nonetheless wanted a approach to verify the server-rendered HTML had one thing to confirm towards.
We aren’t but server-rendering most of our React-rendered pages (we’ll get there), so the HTML that comes throughout that first request (and what Mastodon crawls) is basically a shell web page with minimal HTML. We may have tossed the <a rel="me" ...> hyperlinks into the <physique> of that first response, however that appears a little bit awkward to solely have them ripped away by client-side rendering instantly. As an alternative, there may be one other equally legitimate approach to supply rel="me" hyperlinks, and that’s like this:
<head>
<hyperlink rel="me" href="
<hyperlink rel="me" href="So we’re truly doing each the <head> hyperlinks and the <a> hyperlinks now, and excellent news, it really works nice.
Because of Will Boyd for asking about this and Amelia Bellamy-Royds for all of the back-and-forth on Mastodon as we figured all this out.
Associated writings:
#Mastodon #Verification #CodePen #Profiles