Link Verification

Goal

In this guide we'll learn how to add rel='me' link verification to an entire website, or individual web pages.

What are `rel="me"` links?

The HTML rel attribute defines the relationship between a linked resource and the current document. The rel='me' keyword is used to indicate that the current resource is represented by the linked party.

In other words, rel='me' can be used as a way to verify that two or more resources (e.g. websites, social media accounts, etc) are from the same source. Social media platforms and other services that allow you to add profile links often offer support for displaying a badge next to verified links.

In most cases, these services will scan links for a <link> or <a> element with a rel attribute.

Example

1<link rel='me' href='https://example.com/me' />

Let's see how to add rel='me' link to an entire website or an individual page using HyperTemplates.

Guide

STEP 1: Verify a website

To configure rel="me" links for an entire website, modify the site.links property of your website configuration file.

Example site.yaml

site.yaml

 1title: Herd Works
 2description: Pocket-worthy productivity tools for the human herd.
 3links:
 4  - rel: icon
 5    href: /favicon.ico
 6  - rel: me
 7    href: https://github.com/herdworks
 8  - rel: me
 9    href: https://mastodon.social/@herdworks
10  - rel: me
11    href: https://www.threads.net/@herdworks

Now let's update our layouts to use the site.links property.

layouts/default.html

 1<html lang='en-US'>
 2    <head>
 3        <meta charset='utf-8'>
 4        <title ht-content='title'>My Website</title>
 5        <meta name='description' ht-attrs='content:description'>
 6
 7        <!-- Global Links -->
 8        <link ht-template='link:site.links' ht-attrs='rel:link.rel; href:link.href'>
 9    </head>
10    <body>
11        <header ht-include='partials/header' id='header'></header>
12        <main>
13            <article ht-include='partials/article'></article>
14        </main>
15        <footer ht-include='partials/footer' id='footer'></footer>
16    </body>
17</html>

That's it! Now run hyperctl build or hyperctl server to see your rel='me' links.

STEP 2: Verify a single page

To configure a rel="me" link on a single page, modify the page.links property of a page.

Example index.md

content/about/caleb-hailey/index.md

 1---
 2created_at: 2025-05-19T14:00:00-07:00
 3path: /about/caleb-hailey
 4title: About Caleb
 5links:
 6  - rel: me
 7    href: https://github.com/calebhailey
 8  - rel: me
 9    href: https://mastodon.social/@calebhailey
10  - rel: me
11    href: https://www.threads.net/@calebhailey
12---
13  
14Hello, world. :wave:

Now let's update our layout to use the page.links property.

layouts/default.html

 1<html lang='en-US'>
 2    <head>
 3        <meta charset='utf-8'>
 4        <title ht-content='title'>My Website</title>
 5        <meta name='description' ht-attrs='content:description'>
 6
 7        <!-- Global Links -->
 8        <link ht-template='link:site.links' ht-attrs='rel:link.rel; href:link.href'>
 9
10        <!-- Page Links -->
11        <link ht-template='link:page.links' ht-attrs='rel:link.rel; href:link.href'>
12    </head>
13    <body>
14        <header ht-include='partials/header' id='header'></header>
15        <main>
16            <article ht-include='partials/article'></article>
17        </main>
18        <footer ht-include='partials/footer' id='footer'></footer>
19    </body>
20</html>

That's it. Now run hyperctl build or hyperctl server to see your rel='me' links.

Discussion

Do you have any questions and/or feedback about this guide? Join the @hypertexting.community and visit the "Guides" category 💬