An h-card is an open microformat standard for embedding data in HTML that is often used to establish identity online.

However, you can easily add your own H-Card to your Micro.blog site by editing your site footer from your account. Log into your Micro.blog account and click Design > Edit Footer. Add the below html snippet, and customize it as much as you like.

You can add many additional custom h-card properties.

Once configured and saved, you can test your h-card from the indiewebify.me site.

Here is an example based on what is on my site. Obviously, you’ll want to add your own content.

<div class="h-card vcard" style="display:none"> 
    <span class="p-name">Your full name</span>
    <span class="p-given-name">Your given name</span>
    <abbr class="p-additional-name">Your additional name</abbr>
    <span class="p-family-name">Your family. name</span>
    <img class="u-photo" src="url to your profile picture"/>
    <a class="u-url" href="url to your website">Website</a>,
    <a class="u-email" href="mailto:your email address">Email</a>
    <div class="p-country-name">Your country</div>
    <div class="p-note">A brief bio about you.</div>
</div>

The key is to define the class values and nest them inside the h-card class. Notice the display: none means my h-card is hidden on the page. You can remove this if you want to display it and change the HTML and CSS to your liking.

✴️ Also on Micro.blog ✍️ Email 🐘 Reply on Mastodon