TL;DR — Connecting your Mastodon and CodePen profiles through bi-directional linking with the rel="me" attribute verifies your ownership and displays your CodePen profile as a verified link on your Mastodon profile.
Confused about how HTML could possibly achieve this? Let me break it down for you.
The rel attribute in HTML can be used in anchor (<a>) tags to specify the relationship between the current document and the linked document. By using values like nofollow or noopener, you can control how search engines interact with the link. But there’s another valuable use case, the rel="me" value.
What does rel="me" do? This value indicates that the link points to content controlled or owned by the current author. When two links point to each other with rel="me", it creates a verification of ownership. Mastodon, a federated social networking platform, uses this setup to verify personal links, as shown on my Mastodon profile below.
The key is to ensure that both your Mastodon and CodePen profiles have bi-directional rel="me" links, establishing ownership verification. This is represented by the green checkmarks next to the verified links on my Mastodon profile.
CodePen now automatically adds the me value to all profile links, making the verification process seamless. However, we encountered initial difficulties due to the server-side rendering of HTML and firewall restrictions. To address this, we included rel="me" links in both the <head> of the HTML and the profile links.
Thanks to community members like Will Boyd and Amelia Bellamy-Royds, we were able to overcome these challenges. Connecting your profiles in this way not only verifies ownership but also enhances your online presence.
Troubleshooting Verification
While adding the me value to profile URLs helps verify ownership, technical challenges may arise, such as server-side rendering issues. By incorporating rel="me" links in the <head> of the HTML, we can ensure successful verification.
If you’re curious about the technical aspects of this process or want to learn more, check out the related writings below.
Related Articles:
- The Markup / Dan Phiffer: How We Verified Ourselves on Mastodon — and How You Can Too
- Eric Meyer: How to Verify Site Ownership on Mastodon Profiles