How to verify your WordPress site on Mastodon
As part of the mass migration away from Twitter, I joined Mastodon about 10 days ago. I still have a lot to learn about the culture over there.
When I first created my profile, one of the options I noticed was a place to add a link back to my website. If I add a bit of extra code to the Mastodon link, I can verify that the site actually belongs to me.
Here is the explanation that Mastodon provides about the verification code:
You can verify yourself as the owner of the links in your profile metadata. For that, the linked website must contain a link back to your Mastodon profile. The link back must have a
rel="me"attribute. The text content of the link does not matter. Here is an example:
<a rel="me" href="https://fosstodon.org/@treadlightly">Mastodon</a>
As simple as this sounds, WordPress can add some barriers that might make this trickier than you think. Here are some ways you can accomplish this.
Add a link to a post or page
One way is simply to add a link to the front page somewhere using a link block. I heard that support for the rel attribute is coming soon to WordPress blocks but for now, create a link to your Mastodon profile as usual by either clicking on the icon or typing Ctrl+K:
Now you can edit your link as HTML by clicking on the Options menu (three vertical dots icon on the end of the tools pop-up).
When you do that, your link will look like the HTML code shown below and you can then paste or type in the missing attribute within the a tag. If you are only able to use keyboard navigation, I’m not sure if this is something you can easily accomplish. A bug report has been filed years ago and developers are still working on this as far as I know.
Here’s what the code looks like:
Once that’s done, you can edit the block visually again and do remember to save your changes by clicking the Save draft link or Publish button on the top right side of the editor screen.
Use the classic WordPress menu system
This is probably the most straight-forward way to add the rel attribute, as long as your chosen theme supports this.
If you are not using Full Site Editing, in the left hand side menu of the WordPress admin area under Appearance, you’ll find “Menus”.
If you have a menu with Social Media links, that can be a great place to add a verify link for Mastodon.
When you arrive on the Menus screen, you’ll need to find a small tab on the top right, that says “Screen Options” and then make sure that the Link Relationship (XFN) option is checked.
Now, you can create a custom link in the menu as usual:
Once the link has been added you can expand it and fill in the link rel and don’t forget to save your changes:
Okay, well, now, your theme may or may not support this additional attribute you’ve just added to the menu. If it does then, great! Everything should be set now for your site to get verified.
If not, then, full disclosure, I was in the same boat. My theme didn’t support this method but I built the theme myself so it was on me to fix! I’m currently writing a part 2 to this post where I’ll explain how I supported this attribute in my own theme and how to add a JS snippet to your footer to add the rel attribute in, as a last resort.