Add a verified website to your Mastodon account using link tag
This is another approach to getting that shiny green verified ticked link to your website on your Mastodon profile. It’s a little more advanced and you need to be comfortable editing your sites
header.php file, or editing static
Same idea but use a <a> link tag without editing templates
If you’d rather just include an anchor link, read the Add a verified website to your Mastodon account article.
What is a <link> tag?
link tag is an
HTML element that specifies relationships between the current document and an external resource. We’ll be using it to verify your website with the
Mastodon network by adding one to the
<head> section where it is required.
What to look for gallery
Step 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.
rel="me"which is required by Mastodon to verify your site and is scanned for when you submit your request to be verified.
hreflink 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
We are going to change the tag type at this point and convert from an
<a> (anchor) to a
<link> type. We also remove the closing tag (
</a>) for the
anchor style link.
<link rel="me" href="https://mastodon.social/@barrd">
Step 2. Add the Mastodon link to your website
Whether adding to a
header template file or within static
HTML documents, locate the
<head> section and add the code you adapted within. Add it somewhere around the middle of the data that is already there.
<head> ... <link rel="me" href="https://mastodon.social/@barrd"> ... </head>
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.
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.)
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. This technique for example is not included within the official documentation.
Props to Christian Tietze who reached out to me on
Mastodon and let me know of this approach.
// End of Article
- Christian Tietze Website (christiantietze.de)
- MDN documentation: link tag (developer.mozilla.org)