How to verify your WordPress site on Mastodon

Every set up is different so something simple for some maybe tricky for others

An artistic representation of a mastodon walking through a snowy landscape

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:

A screenshot of the WordPress editor tools with the link icon circled in red and the word, "Mastodon" below

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).

A screenshot of the kebab menu options in the WordPress editor. With "Edit and HTML" selected. And the kebab menu icon is circled in red.

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.

A screenshot of the open Screen Options tab with the "Link Relationship (XFN)" option checked and circled in red

Now, you can create a custom link in the menu as usual:

A screenshot of the custom links form for adding custom links to a WordPress menu

Once the link has been added you can expand it and fill in the link rel and don’t forget to save your changes:

A screenshot of editing the custom Mastodon link in the menus page on WordPress. The Link Relationship (XFN) form field is filled in with the word "me"

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.