Target Audience: You are comfortable writing HTML markup or are able to generate the output described in this entry.
TL;DR: The end result.
Publishing for IndieWeb #
HTML has semantic elements that help machines make sense of content. There are libraries that extend those semantics to provide even more rich detail. Microformats are used by the IndieWeb while search engines and SEO tools tend to focus on Microdata. Using both can make your HTML a little cluttered and noisy but, if you want your content to be parsed well by IndieWeb tools and features, then it is worth understanding how to include microformats.
Common microformats #
Types of content that microformats can extend semantics for include, but are not limited to:
Because there are plenty of options, it is worth visiting the microformats wiki to determine what would be applicable to your site.
These meaningful hooks are incorporated by adding class names to the HTML elements, like so:
<p class="h-card">Bridget Stewart</p>An HTML element can have many class names on it, so any classes you use for styling your site can sit alongside the ones you use for microformats. You might consider basing styles on the microformats class names in order to have a standard appearance for items of a similar type. It will depend on your needs.
Adding an h-card #
When I am writing the HTML I need for a page, I start with the content and make certain I am using the most appropriate elements to give it form and meaning. Once that is done, I go back through the code and add the microformats I need. I do things this way to try to keep the number of HTML elements used as low as. Where I work, I learned the hard way that the number of DOM nodes can have an impact on site performance. I'm in no danger of that for this site, but it is a consideration I like to keep top of mind.
Information on this site suitable for a profile includes things like:
- my name
- the url of this site
- the urls of social sites I frequent
Because this website is a personal one, I am not willing to share more explicit details that can be included in an h-card to minimize spam or online harassment. In the case of a website for a business or organization, there are some additional properties that might be worthwhile to include like:
- email address
- physical address
- latitude and longitude
- telephone number
As I reviewed the HTML of the homepage for bridgestew.com, I saw that the elements I want to include are spread across the entire page. Here's the focused, stripped-down HTML:
<body>
<header>
<a href="https://www.bridgestew.com">Logo</a>
<nav>
...
</nav>
</header>
<main>
...
</main>
<footer>
<p>The musings of Bridget Stewart, a web developer from Northeast Ohio, USA.</p>
<ul>
<li><small>© 2019 Bridget Stewart</small></li>
<li><a href="https://twitter.com/bridgetstewart" rel="me">Twitter</a></li>
<li><a href="https://github.com/bridgestew" rel="me">Github</a></li>
<li><a href="https://www.linkedin.com/in/bridget-stewart-3244767/" rel="me">LinkedIn</a></li>
</ul>
</footer>
</body>If you read my previous entry about Web Sign In, you may recognize the markup used for the social links in the footer. When viewing all the content to include in a profile, I see that the element that wraps them all is the body so I need to put class="h-card" there.
<body class="h-card">
...
</body>The url for this site is located in the link surrounding the logo, so I'll add class="u-url" to it and rel="me" like I did when I was marking up links for Web Sign In.
<body class="h-card">
<header>
<em><a class="u-url" href="https://www.bridgestew.com" rel="me">Logo</a></em>
</body>There was nothing specific about me found in the navigation or main section of the home page that I am including in my profile at this time. The next area where something useful exists is in the footer at the bottom of the page.
My name is found in the "The musings of..." paragraph, but I am not sure I will keep that for the long term. I may feel like updating it from time to time or I might get rid of it completely. I would like to have this profile be in a set-it-and-forget-it mode, so I am going to use the spot where my name sits next to the copyright date. That instance is likely to be permanent, so it is a better candidate to serve as a profile property.
I could put the p-name class on the small element, but I don't want a parser to include the copyright symbol and the year. To play it safe and narrow in on the information I want included, I'm going to wrap my name in a span and add class="p-name" to it.
<footer>
<p>The musings of Bridget Stewart, a web developer from Northeast Ohio, USA.</p>
<ul>
<li><small>© 2019 <span class="p-name">Bridget Stewart</span></small></li>
...
</footer>That additional HTML element adds a little cruft, but I feel that it is worth it in this case. If I found myself adding a lot more elements just to accommodate the microformats, I would stop and rethink my approach to see how to keep the HTML minimal. I feel that this one can't be avoided.
Lastly, I'm going to add class="u-url" to the social links. I already had the rel="me" on them because of the Web Sign In process I followed earlier.
<footer>
<p>The musings of Bridget Stewart, a web developer from Northeast Ohio, USA.</p>
<ul>
<li><small>© 2019 <span class="p-name">Bridget Stewart</span></small></li>
<li><a class="u-url" href="https://twitter.com/bridgetstewart" rel="me">Twitter</a></li>
<li><a class="u-url" href="https://github.com/bridgestew" rel="me authn">Github</a></li>
<li><a class="u-url" href="https://www.linkedin.com/in/bridget-stewart-3244767/" rel="me">LinkedIn</a></li>
</ul>
</footer>That covers everything I want to include in my profile. Below is the full code in all its glory.
The end result #
<body class="h-card">
<header>
<a class="u-url" href="https://www.bridgestew.com" rel="me">Logo</a>
<nav>
...
</nav>
</header>
<main>
...
</main>
<footer>
<p>The musings of Bridget Stewart, a web developer from Northeast Ohio, USA.</p>
<ul>
<li><small>© 2019 <span class="p-name">Bridget Stewart</span></small></li>
<li><a class="u-url" href="https://twitter.com/bridgetstewart" rel="me">Twitter</a></li>
<li><a class="u-url" href="https://github.com/bridgestew" rel="me">Github</a></li>
<li><a class="u-url" href="https://www.linkedin.com/in/bridget-stewart-3244767/" rel="me">LinkedIn</a></li>
</ul>
</footer>
</body>Testing the updates #
Returning to the IndieWebify.me h-card validation page, I drop the link to my home page in the field and click "Validate h-card". As the image shows, the h-card is successfully implemented.
Conclusion #
While I am unlikely to add my email in the future, I might consider adding a photo or a bio at some point. As for this exercise, I consider this another successful implementation of an IndieWeb feature on my website. Huzzah!