H-Cards

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

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.

Here is an example based on what is on my site. The key is to define and nest the class values inside the h-card class. 

Notice that 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.

<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>

You can then test your H-Card here.  The test will show the properties you have configured and even provide a list of additional h-card properties you can use.


Date
January 12, 2023
Tags
Notes
Kudos
Buy me a Coffee
Support this site.