Diving into indiewebify.me & microformats, Part II In Part I I covered learning about some tools for the indieweb and incorporating microformats into weblog. I laid out a tentative roadmap for Parts II through IV and then went on to discover I was way off in what I had yet left to do. I'm farther ahead than I thought because past Anne has already done a bunch of work she does not remember doing! We love that! Even though I may have less left to do, I'm actually adding a part in the series. This came about for a couple reasons: I want a more complete h-card representation somewhere in my slew of domain/subdomains; as discovered just before publishing Part I, the microformats FAQ does not suggest using hidden content to fulfill microformat property needs; and, finally, I want to make more use of, and get more traffic on, my domain landing page. This page was set up at the same time as the rest of my subdomains but really only served to fill the space in the case that someone landed there. AFAIK the only place actually linking to it was on the lol.directory created by @adam to showcase dotlol domains after a promotion between omg.lol and getting a dot lol domain. Speaking of the directory, I'm now linking back to it in the footer of the landing page 👍. While the domain landing was already nicely styled to match the theming of weblog and my other omg.lol properties, it wasn't marked up with microformats, and it didn't hold representation across my socials and other web presences. Over the last couple days I spent several hours improving that. The entire page now acts as a representative h-card (validator results) with a more complete set of properties, including: u-photo - a photo of the person or organization p-name - the full/formatted name of the person or organization u-url - home page or other URL representing the person or organization u-email - email address p-note - additional notes u-logo - a logo representing the person or organization (e.g. a face icon) u-uid - universally unique identifier, preferably canonical URL p-locality - city/town/village p-job-title - job title p-role - description of role A screenshot from the indiewebify.me tool showing what is found for an h-card at a specified URL. I admit that the use of p-role to markup my tagline ("I put pixels in their place."), may be controversial or at least questionable. I propose that microformats incorporate a p-tagline property, not necessarily for use by individuals, though I would use it. However, companies and organizations very commonly have a tagline that would benefit from a standard property markup. I still feel like this is complementary to my Profile page and not a straight up replacement. This is the entry point to "my domain" so to speak. The Profile page stands as a more personal and fun place to get a snapshot of me with a slightly different makeup of h-card properties. That is now next in the roadmap, Part III, and I will be marking this up by hand, a complete overhaul of the page. Not only necessary to get the correct microformat on the profile image, but I'd been wanting to remove all traces of IDs used for styling and have more control over the actual markup being used. Now I can do both. But I should shut up and save some of this for the next post! Part I Series Landing Part III Post info NaBloPoMo: 5/30 I'll be keeping tally over on my microblog. Links in this post: Diving into indiewebify.me & microformats, Part I Domain Landing page New domain, new landing! LOL Directory Adam, omg.lol owner Validator results for h-card omg.lol Profile page POSSE copies: Shared on Statuslog Shared on social.lol Shared on micro.blog Discuss on Mastodon