Skip to: Content or Footer

Add a verified website to your Mastodon account using link tag

Created on
Updated on
Approx ~5 minutes reading time for 955 words.

Introduction

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 HTML file(s).

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?

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

Skip Image Content

Image Index

  • • Image 01
    Mastodon Edit Profile – Get Link
    Back to Images
  • • Image 02
    Mastodon Edit Profile – Set Link
    Back to Images
  • • Image 03
    Mastodon Profile Page
    Back to Images

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.

  1. The rel="me" which is required by Mastodon to verify your site and is scanned for when you submit your request to be verified.
  2. 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

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

Final thoughts

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

Article Information

Category: Technical
Topic: #Tech-Stack

Dave Barr

Bristol based Scottish Expat who has 20+ years experience of Web Development and is continually on the look out to improve his skill sets. Learning new and innovative solutions for current requirements in the world of IT, WebDev and eCommerce.

About Dave Barr

Image for Dave Barr
Bristol based Scottish Expat who has 20+ years experience of Web Development and is continually on the look out to improve his skill sets. Learning new and innovative solutions for current requirements in the world of IT, WebDev and eCommerce.

Read more about Dave

Click to Copy