Listing my website on the independent Web
Listing my website on the independent Web
Or how to add an IndieWeb Webring to your (Carrd) website.
I have an IndieWeb Webring on my website jatan.space. It allows people to click two little (left and right) arrow links in the site’s footer that lead them to random independent-web-supporting websites that also have the Webring.
Likewise, people visiting other websites part of this Webring can randomly land on my website too. An IndieWeb Webring is a nice way to serendipitously discover little human corners of the Internet, something lost on today’s Web where everything you consume is supposed to be “curated” and in an algorithmic feed.
Quite a few people online have been curious about how I got an IndieWeb Webring working on my Carrd-based website. The reason it’s unusual is because most people seem to have Webrings on their micro.blog or WordPress sites, which make adding the same easier. Nevertheless, here’s how I added an IndieWeb Webring to my Carrd site, and how you can too on your site if it allows you to add simple HTML code.
First, IndieWeb products require that you authenticate ownership of your site using the website itself as a login, which is pretty neat. You can do so in many ways. I simply went with adding my email link on the homepage, as hidden code so that it doesn’t interfere with the site’s design.
Then I added an h-card to my website, which holds basic information about my site required to get the Webring working. The h-card validator at IndieWebify.Me was very helpful in this regard. Here’s what the hidden HTML code in the <head> of my website finally looks like, which you can use and change as per your needs.
<span class="h-card" style="display:none;">
<a class="p-name u-url" rel="me" href="https://jatan.space">My name</a>
<p class="p-note">My short bio</p>
<img class="u-photo" src="linktoimage.png" />
<link href="mailto:myemailid" rel="me" />
</span>Once the h-card was validated, I signed into the IndieWeb Webring website using my email, and then added the Webring HTML code they provided for my website.
<a href="https://xn--sr8hvo.ws/🚀🌗/previous" target="_blank">←</a> <a href="https://xn--sr8hvo.ws" target="_blank"> 🕸🪐 </a> <a href="https://xn--sr8hvo.ws/🚀🌗/next" target="_blank">→</a>That’s it! The ring of like-minded people began working.
Again, this setup will work not just for your Carrd website but any site that allows you to add HTML code. If you do add one to your site, do let me know to make me happy.
Adding the IndieWeb Webring also got my website listed on their directory. It’s a cool place to manually find indie sites, if clicking to visit a random digital place isn’t your thing.
→ Browse the Blog | About | Tip