According to Mastodon it’s possible to verify one’s user page with insertion of rel="me" into a link on one’s site.
I tried inserting that rel="me" code into a link to my Mastodon account in my theme, but when I viewed the source code of the live site the rel="me" was effectively overridden by rel="noopener noreferrer" (as was present in every other link).
Is it therefore not possible to insert that rel="me", or is there perhaps something I’m missing?
I added the following to social-links.hbs of my customized Dashi theme*:
<div class="social flex">
...
<a class="social__item"
href="https://mastodonapp.uk/@martinwebster" target="_blank" title="Mastodon"
aria-label="Mastodon" rel="me">
{{>icon name="mastodon" size="sm"}}
</a>
...
</div>
Then I added this to feather-sprite.svg:
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="mastodon">
<title>Mastodon</title>
<path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"></path>
</symbol>
*This is likely to be theme-specific, but it should point you in the right direction.
Edit:
For Journal theme, these are the required changes to default.hbs.
Add button after search:
<a class="gh-head-btn" href="https://mastodonapp.uk/@martinwebster" target="_blank" title="Mastodon" rel="me">
{{> icons/mastodon}}
</a>
Create ./partials/icons/mastodon.hbs:
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z" fill="#888888"/>
</svg>
My mistake. I actually had a script that was overriding the rel="me" with rel="noopener noreferrer", which has now been fixed.
Otherwise, if anybody out there would like to see the proper Mastodon docs page about link verification you can see it here:
I added my Mastadon profile link in the navigation panel and then used the following script to inject the rel=“me” into the anchor. Alas, while I can see the correct tag when I inspect the page it doesn’t seem to have verified my site in Mastodon.
<script>
let navlink=document.getElementsByClassName("nav-mastodon")[0];
let alink = navlink.getElementsByTagName('a')[0];
alink.setAttribute('rel', 'me');
</script>
Any thoughts on why this wouldn’t work?
Thanks,
James
It’s possible that the Mastodon verification scanner doesn’t run JavaScript to render the page. That takes considerably more resources than just parsing HTML. So, it may only detect links that that exist in the HTML that’s initially served.
For a simple workaround, go into “Settings > Code Injection” and add this style syntax to “Site Header”:
<link rel="me" href="https://urbanists.social/@markstos">
Thanks @markstos, this did the trick and I suspect you’re right about the scanner not running JavaScript.