How to Add an H-Card to Your Micro.blog Site
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.