Add a verified website to your Mastodon account
Introduction
Want to have a shiny green verified ticked link to your website on your Mastodon profile? Read on and I’ll show you how in a few easy steps.
Same idea but use a <link> link tag without editing templates
If you are capable of editing a header template
or HTML
files, read the Add a verified website to your Mastodon account using link tag article for another approach.
What to look for gallery
Image Index
-
• Image 01
Mastodon Edit Profile – Get LinkBack to Images- • Image 02
Mastodon Edit Profile – Set LinkBack to Images- • Image 03
Mastodon Profile PageStep 1. Get the link from your edit profile section
Head to your Mastodon Edit Profile page and locate the link shown in Image 1 above. It will look like this.
<a rel="me" href="https://mastodon.social/@barrd">Mastodon</a>
There are two parts that are important and must not change.
- The
rel="me"
which is required by Mastodon to verify your site and is scanned for when you submit your request to be verified. - The
href
link itself which is your Mastodon Profile Page to which you would like to add your verified website.
Preparing the link text for inclusion into your website
As long as the two important parts are left “as-is” you may edit the link to meet any other requirements you may need. For example I added an additional
rel
tag ofnopopener
andtarget
to open in a new tab using_blank
. You can also edit the linked text itself, that is not checked or verified in any way.<a rel="me noopener" href="https://mastodon.social/@barrd" target="_blank">@barrd on Mastodon</a>
Step 2. Add the Mastodon link to your website
The Mastodon link you have now prepared must be added to the exact URL (link) you wish to be verified. In most cases this will be the Home Page.
The mechanics of adding the link are beyond the scope of this article but some thought will be required placing the link in the page you wish to link to avoiding a block in flow. I simply added it to the footer of my Home Page with some text explaining what it was for.
If you use WordPress as your Content Management System (CMS) take a look at this article about how to edit pages by WPBeginner.com. Step 3. Configure the link in your edit profile section
Head back to your Mastodon Edit Profile page and locate the
Profile metadata
section (as seen in Image 2 above.) Enter the text you’d like as the identifier, e.g.Website
and then add the URL you wish to link to, e.g.https://barrd.dev
.NOTE: Remember to click the
SAVE CHANGES
button and you’re done!The change on your Profile Page may not happen instantly. Mastodon needs to scan your page and length of time is dependant on how busy their servers are. Have a little patience and you will end up with the green section, including tick verifying the website (as seen in Image 3 above.)
In conclusion
Whether you’re considering giving the bird to the bird by leaving Twitter or just looking to expand your horizons, adding a verified website to your profile seems a popular choice. Whilst I’m sure the docs will improve over time they are currently sparse and a bit vague. I hope this has helped make the process a bit clearer.
// End of Article
Article Information
Category: Technical
Topic: #Tech-StackFurther Reading
- Link types: noopener (developer.mozilla.org)
- Link types: target (developer.mozilla.org)
- • Image 02