When working on a corporate or company web site, you need to put the company’s address on the page, while ensuring that search engines can understand the physical location of the business when they scan the markup. So what do you use?

There are two primary methods for making physical address information clear on a page: microformats and microdata. Microdata is newer, and still building support: thankfully, the two standards are not incompatible, and both can be used on a page simultaneously. To keep things simple, we’ll start with microformats.

Mark Up Street Addresses With Microformats

Microformats uses a system of predefined classes to indicate information. It’s important to understand that these classes do not relate to the CSS used in your stylesheet (although there’s nothing to say that you can’t add hooks to format them for your pages). An example would be the microformat-enhanced address of SAIT, where I currently work and teach:

<div class="vcard">
	<abbr class="fn org" title="Southern Alberta Institute of Technology">SAIT Polytechnic</abbr>
	<address class="adr">
		<span class="street-address">1301 16 Avenue NW</span>
		<span class="locality">Calgary</span>
		<abbr class="region" title="Alberta">AB</abbr>
		<span class="country-name">Canada</span>
		<span class="postal-code">T2M 0L4</span>
	<address>Phone:<a class="tel" href="tel:+14032847248">(403)284-7248</a>
</div>

Note that the microformat schema employs the trick of using multiple classes to define information that falls under two or more categories: fn (for full name) is required in the vcard format, and should be the name of the company if the address is not intended to represent a particular individual. SAIT is also an organisation (a generic term that includes businesses) so that class is used also. The adr class contains the actual address. Microformat classes can be attached to any tag that encloses relevant information: using span, div and p is common, but others are equally applicable.

I would typically link the address to the physical location of the company on Google Maps for easy access, or embed a map on the page, as I have done at the top of this article. I’ve also linked the telephone number to enable the site visitor to click-to-call, as I explained in a previous article.

Because both <span> and <abbr> are displayed inline, you’ll usually want to adjust your CSS to change the appearance of the address:

.adr span, .vcard abbr {
	display: block;
}

You can test how Google will see this information using the Rich Snippets Testing Tool. You can also create correct microdata markup for a company by using the hcard creator.

List The Business with Search Engines

Much like registering your site with search engines, you can also list a company’s address and other identifying information directly with Google. Start by registering your business with Google My Business; the service is free, and provides the opportunity to add information such as hours of operation, phone numbers, and photographs.

Photograph by Joost Markerink, used under a Creative Commons 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.