Today, we’ll look at another widely used form of structured data markup, Microformats.
Microformats is an initiative launched in 2005 by the web development community to give more semantic meaning to HTML. Like subsequent structured data markup conventions, microformats were designed to be human readable first, and machine readable second. Microformats was designed to add more clarity and fidelity to the content of web pages, and to be easy to use by anyone who already knows HTML and CSS.
Common uses for microformats include contact information, calendars, or reviews. Facebook began marking up events and calendars with microformats a couple of years ago, in addition to using their own OpenGraph data.
Testing Your Site For Microformats
Some off-the-shelf WordPress themes and theme frameworks utilize structured data markup already. You can test any page on the web for all forms of metadata and structured markup by using Google’s Structured Data Testing Tool. If you have a Bing Webmaster Tools account, you can test sites you manage for structured data by using their Markup Validator.
Looking At Microformats Markup
Marking Up Contact Info Using Microformats hCard
This is very similar to the markup I am using on this very site for the contact info in the footer. You can create your own contact info using the hCard Creator markup generator on the Microformats site.
<div id="hcard-John-Locke" class="vcard"> <a class="url fn" href="https://www.lockedownseo.com/">John Locke</a> <div class="org">Lockedown Design</div> <a class="email" href="mailto:[email protected]">[email protected]</a> <div class="adr"> <span class="locality">Sacramento</span>, <span class="region">CA</span>, <span class="postal-code">95829</span> <span class="country-name">United States</span> </div> <div class="tel">(916) 747-2198</div> <div>Specializing in <span class="category">web design</span>, <span class="category">web development</span>, <span class="category">WordPress web design</span>, <span class="category">ecommerce web design</span></div> </div>
The hCard generator uses the original microfomats structure. There is a newer structure, microformats2, which uses a very similar format. If search engines detect the original microformats hCard structure, they will parse it as the current format, so there is backwards compatibility.
Marking Up Contact Info Using Microformats hCalendar
This is what a hCalendar entry looks like when marked up in microformats. You can use the online hCalendar generator on the Microformats.org site to create structured data for your own event.
<div id="hcalendar-Sacramento-WordPress-Meetup" class="vevent"> <a href="http://www.meetup.com/Sacramento-WordPress/" class="url"> <time class="dtstart" datetime="2015-04-07T18:15-08:00">April 7, 2015 6:15</time>– <time class="dtend" datetime="2015-04-07T20:15-08:00">April 7, 2015 8:15</time> : <span class="summary">Sacramento WordPress Meetup</span> at <span class="location">Sacramento, CA</span> </a> <div class="description">Monthly meeting at Hacker Lab in Sacramento. We meet on the first Tuesday of each month, usually around 6:15pm for a half-hour of networking, and then the meeting. Sometimes there is a speaker, but every few months we do a hands on workshop, or a set of short lightning talks.</div> <div>Categories: <span class="category">Networking, <span class="category"> Professional development</span></div> </div>
Pay careful attention to how you mark up the time of the event. The Google Structured Data Testing Tool will not parse the exact code that the online generator gives you. The start and end dates must contain the day and time. Also, the online hCalendar generator only goes up to the year 2013, so be sure to change this accordingly.
Marking Up Contact Info Using Microformats hEvent
Finally, here is an example of a hReview, created using the online generator at the Microformats site. This is using the original microformats structure, but this will validate in Google.
<div id="" class="hreview"> <abbr title="2008-03-30T02:38-08:00" class="dtreviewed">Mar 30, 2008</abbr> by <span class="reviewer vcard"> <span class="fn">Jane Doe</span> </span> <span style="display: none;" class="type">business</span> <div class="item vcard"> <span class="fn org">XYZ Business</span> <div class="tel">(602) 555-0123</div> <div class="adr"> <div class="street-address">234 Coyote Street</div> <span class="locality">Phoenix</span> <span class="region"> AZ</span>, <span class="postal-code"> 85001</span> <div class="country-name">United States</div> </div> </div> <blockquote class="description"> <p><abbr class="rating" title="5"></abbr> This business rocks! They anticipated my needs and exceeded them. The staff is friendly. I would definitely do business with them again. </p> </blockquote> </div>
The markup for a hReview will vary, depending on what type of item you are reviewing. The types of things you can mark up a review for are: business, event, person, place, product, URL and website.
Code Generators and Tools
You can find tools and structured data generators on the Code and Tools page on the Microformats.org site.