Using hCard Microformat with HTML5 Address Tags for Local Search Optimization

In local business search engine optimization the business address is a critical element.

How that address is rendered throughout the website is an easy way to optimize for local search. If you know the code!

When you are the owner or author of a website you work to grow and improve your web equity through producing authoritative content. Google will give you more street cred in the rankings if you become an authority in your industry by being a resource for information online. Having your business address on every page and post you’ve crafted in some way funnels down to displaying your business in local search and Google maps. Each page with traffic is a signal to Google that your local business is the authority in your local area. A citation or vote in your favor.

HTML5 Address Tag

I first learned the importance of the address tag from another local search expert who attributed the success of his local clients to them. During a 6 month period I used html5 address tags in the footer on every page for local business websites and achieved many top local search and places results. This was not the silver bullet for first page Google rankings but we do know it was not hindering results at all. There are, of course, certain exceptions where address tags have to be used more sparingly such as a brand with one website and five locations. I’ve found many errors with using the address tags more than once on a single page. The only exception to that I’ve found is to nest the address tags inside HTML5 article tags.

Here is the code:

<address>PageLadder, Inc.<br />
624 Broadway Ste 304<br />
San Diego, CA, 92101</address>

Here is how it renders:

PageLadder, Inc.
624 Broadway Ste 304
San Diego, CA, 92101

W3Schools tells us:

The text in the address element usually renders in italic. Most browsers will add a line break before and after the address element.

I’ve found this styling to be true in most websites. You can add custom css styling to remove the italics or add whatever style you want to match your brand and design. You can also include website link or e-mail address within the address tags although I’ve chosen to do them a little differently on this site.

Address tags define the owner of the content on that page or document. If you have an article you pulled from another website it might be a good idea to put that in article tags with a address tag nested citation of the sources N.A.P. to give credit to the author of that document. You can read more on what W3Schools has to say about the purpose of address tags here.

hCard Microformat for Local Businesses

There are lots of ways in which local businesses can embrace and benefit from the use of Microformats and structured data. Microformats come in many different forms and serve many different purposes.

You can read all about Microformats here:
http://microformats.org/about

To describe what the hCard Microformat is we will quote the microformats.org wiki on hCard 1.0:

hCard is a simple, open format for publishing people, companies, organizations on the web, using a 1:1 representation of vCard properties and values in HTML. hCard is one of several open microformat standards suitable for embedding data in HTML/HTML5, and Atom/RSS/XHTML or other XML.

Here is the code:

<div class="vcard">
 <div class="fn org">PageLadder, Inc.</div>
<div class="adr"><div class="street-address">624 Broadway Ste 304</div>
<span class="locality">San Diego</span>, <span class="region">CA</span>  <span class="postal-code">92101</span>
 </div>
</div>

Here how it renders:

PageLadder, Inc.
624 Broadway Ste 304

San Diego, CA  92101

So the questions is which do you use for local business website address optimization? Is it one or the other or both?

Answer = Both

When researching this this topic I came across a post here on HTML5 Doctor that reaches a slightly unknown conclusion while pointing out some important wrong uses of address tags. You do not want to use them on any old address you put on your website. This goes back to their purpose as described above. If you read the comments in that post the other experts agree that it is not a matter of address tags or microformats, but instead how to use them both together. That is why I have broken it down and supplied the code for using both of them combined together. To do this you need to replace the container div element with the address element as you can see below.

Both hCard Microformat and HTML5 Address Tags Combined

Here is the code:

<address class="vcard">
 <div class="fn org">PageLadder, Inc.</div>
<div class="adr"><div class="street-address">624 Broadway Ste 304</div>
<span class="locality">San Diego</span>, <span class="region">CA</span>  <span class="postal-code">92101</span>
 </div>
</address>

Here how it renders:

PageLadder, Inc.
624 Broadway Ste 304

San Diego, CA  92101

Lots of opinions on the best way to code and render an address on a website. Please leave any comments below and I will respond with how that relates to the methods I’ve described above. As a disclaimer I know I could always improve what is shown above but it is simplified in order to communicate the general theory, concept and strategy behind the actual code. I am motivated to improve what is above as a guide on the definitive best results from various testing environments and implementations.

Editors note: Writing HTML5 and Microformat code inside of a post for others to copy is a unique challenge.

WordPress Self-Audit Master Checklist Tool
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply