Local businesses often display maps of their locations on their sites, but not a lot has been said about how to best create those pages for good usability and search engine optimization. This article will describe how to geocode addresses, use them to create dynamic maps for a local website while simultaneously optimizing those map/location pages.

Many small-to-medium local businesses will set up a page on their site with a map that shows where their shop is located. Typically, these pages will be called “Locations” or “Contact Us”, and most of them will consist of a brief bit of text for the address, a few written directions, and a static map image. Some have thoughtfully provided a hyperlink over to one of the top mapping services to enable users to get specific driving directions or to pan and zoom the maps.

Now, how great would it be if all of these locations pages were set up with dynamic maps, allowing potential customers to easily interact with the maps while on the SMB site?

For the sake of good usability, there’s really no reason not to include a dynamic map on your site! Google Maps has provided a free API to enable webmasters to take and use their maps.

Although the Google Maps API is pretty easy to use, many do-it-yourself webmasters may find the instructions and steps involved to be daunting. So, I’m providing some easy steps below to enable one to place a Google Map with a simple location marker on a webpage.

As an example, I’m going to use Montparnasse, a favorite French bistro of mine in New York City. They’re a great example, since their location page sports a static map they copied from Mapquest.

Step 1: Sign up with Google Maps API in order to obtain an API key. This coded number will enable your Google Maps to be delivered from your domain name.

Step 2: Time to “geocode” the address. Geocoding is the process of converting a street address to equivalent geographic coordinates on a worldwide grid, much like one you may have done in primary school, plotting X-Y coordinates on a graph. Mapping coordinates are referred to as “longitude” and “latitude” values, and in online mapping systems are passed in decimal degrees.

You’ll need to convert your location street address into longitude and latitude coordinates, and there’s a number of ways to accomplish this. You may have a GPS device which shows you these coordinates, and you could just take a reading from the GPS while at the address and note down the coordinates. There are also a number of software packages out there which provide this conversion, but you don’t particularly need to buy one of those geocoders unless you need to geocode a large number of addresses. (Google Maps API also provides geocoding of this sort, although it may not be as user-friendly to those unfamiliar with programming, and the service limits you to a certain number of requests per time period.)

One free geocoding service I like is geocoder.us, and their conversion can be used just by typing the address into the field and hitting the submit button. They return GEO coordinates in a number of flavors, including degrees/minutes/seconds as well as in decimal degrees. When I enter Montparnasse’s street address, “230 East 51st Street, New York, NY” into geocoder.us, it returns GEO coordinates for a 51st Street in Manhattan, and a 51st Street in Brooklyn. The coordinates I’m wanting are for Manhattan, the first map, and I want the decimal version which is: Latitude of 40.756390, Longitude of -73.969789.

Using geocoder.us to geocode an address

Another way to get free geocodes which isn’t quite as easy is to sort of hack it out of Google Maps itself. To do this, I enter the same street address into Google Maps, and it displays the map location I’m wanting (Google Maps typically defaults to the more-popular address in situations like this, or else it provides a list of options to allow the user to disambiguate from options available).

Google Map of Parnasse Restaurant location, NYC

Now, click to close the little balloon info window that is automatically opened with the mapped location, and move the map to make sure that the location pinpoint is centered within the map window rectangle (the balloon info window frequently causes the map to move a little off-center from the location pinpoint). You can eyeball it when you re-center the map, but you may want to click the zooming controls to zoom in as closely as possible to insure you get the center point of the map in the very center of the display rectangle.

Then, click the “link” link at the upper right of the map, and copy the first map link out and take a look at it in your browser address box or in a text editor. Here’s the link Google Maps gave me when I did this:

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode= &q=230+East+51st+St.,New+York,NY&sll=37.0625,-95.677068&sspn= 33.29802,56.601563&ie=UTF8&ll=40.755937,-73.969139&spn= 0.000937,0.001365&z=19

In the query string of the above URL, one of the name/value parameters is: “&ll=40.755937,-73.969139″. This “ll” parameter and value is the longitude and latitude of the address we originally typed in.

Note that the latitude and longitude values returned by geocoder.us are a little bit different from those we extracted from the Google Maps URL. It’s not at all unusual for different geocoding software to return slightly different values for the same address, because they all use different data sources, and different calculations or algorithms for arriving at geocodes. And, there’s not necessarily a standard for what location should be returned for a street address — should it be the spot along the street, or the address doorway, or should it be centered over the building (aka “rooftop” or “housetop”)?

With whatever geocoder you use, always check the map it produces before you finish. You can type the longitude and latitude directly into Google Maps and hit return to see what the mapped pinpoint will produce. When I do it for the geocoder.us pinpoint coordinates in this case, it’s too far off — some distance down the street and on the wrong side. You could manually tweak the coordinates by adding or subtracting a few hundredths, thousandths, ten-thousandths, etc., and seeing how it changes the resulting map. However, I’ll just use the Google coordinates I derived in this case, since they’re already good.

Using those GEO coordinates, I can put them into the following HTML code to produce the Google Map on another webpage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Montparnasse Map Code</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp; key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var zoomlevel = 13;
var coordinates = new GLatLng(40.755937,-73.969139);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(coordinates, zoomlevel);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

var marker = new GMarker(coordinates);
map.addOverlay(marker);
}
}
</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 440px; height: 300px">
<img src="http://farm4.static.flickr.com/3426/3254572288_4b054d8e63_o.gif" width="440" height="300" border="0" alt="Montparnasse Restaurant Map, Manhattan, New York, NY" />
Map of Parnassus, New York City (viewed best with Javascript enabled)</div>
</body>
</html>

Anyone could use this same code for their webpage, so long as they were to replace the “key=” value in the <script> SRC URL with the one assigned to them when they register with Google Maps API. And, the latitude and longitude coordinates in the GLatLng parenthesis must be replaced with the ones specific to the address being mapped.

For the sake of anyone who might be browsing with Javascript disabled, you’ll see that I placed an image of the map inside the “map_canvas” DIV tags. This is a form of progressive enhancement wherein those with more sophisticated browsing capability get more functionality from the map, while the interface fails silently for those with lesser capability.  If Javascript is enabled, this static image isn’t displayed, but if Javascript is disabled, the dynamic map code gracefully degrades to display the static map image.

This approach is good for both usability and SEO. The image, with its optimal ALT text content, “Parnasse Restaurant Map, Manhattan, New York, NY”, and associated caption text, provides good additional “keyword signal” on the page for search engines. Pages which only supply the AJAX map code miss out on this keyword ranking signal and do not support those with Javascript disabled.

Finally, the most straightforward piece of location pages is the address in text. The location’s name, address and phone number should be displayed on the page in text for both usability and for search engines. Business addresses and phone numbers are used by local search engines to help in associating the website with its business listings, and the text further supports the page’s keyword weighting.

I’ve written previously about the benefits of using hCard Microformat. The address and other contact information listed on your location page is an opportunity for embedding the hCard semantic data, allowing individuals who make use of hCards to easily copy the business’s contact info and map location. Including the geocoded coordinates in the hCard effectively geotags the page as well, increasing the local “signal” of the page as well as helping provide greater accuracy for the address location.

Here’s an example of the Montparnasse address and phone numbers, formatted in hCard Microformat.

Add this attribute into the webpage document HEAD tag:

profile="http://www.w3.org/2006/03/hcard "

like this:

<head profile="http://www.w3.org/2006/03/hcard ">

Add this into the BODY of the webpage, where the address info should appear:

<div class="vcard">
<abbr class="geo" title="40.755937;-73.969139">
<strong class="fn org">Montparnasse</strong></abbr><br />
<span class="adr">
<span class="street-address">230 East 51st Street</span><br />
<span class="locality">New York</span>,
<span class="region">NY</span>
<span class="postal-code">10022-6501</span>
<span class="country-name">USA</span><br />
</span>
<span class="phone">
<span class="tel">
<abbr class="type" title="voice">Telephone: </abbr>
<span class="value">(212) 758-6633</span>
</span><br />
<span class="tel">
<abbr class="type" title="fax">Fax: </abbr>
<span class="value">(212) 758-6644</span>
</span><br />
</span>
Business Categories:
<span class="category">Restaurants</span>,
<span class="category">French Restaurants</span>,
<span class="category">Bars</span>
</div>

By using these methods, you can create a highly optimal location page for a business’s website — one with an accurately pinpointed map that functions well dynamically and fails silently — one which provides increased functionality for power users while simultaneously providing good local search optimization.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: SEO | How To: SEO | Local Search Column

Sponsored


About The Author: is President of Argent Media, and serves on advisory boards for Universal Business Listing and FindLaw. Follow him @si1very on Twitter.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • zuko105

    Hey Silver,
    I’d add, if you’re going to use Google Maps as your client side mapping, to go ahead and only use the google geocoding api. They limit it at 15k (free) requests per 24 hour period, which ain’t bad.

    Also, when using the microformat to mark up location information, be sure to include the profile attribute in the head tag:

    -zuko

  • zuko105

    Looks like the comment monitor took out my code.

    Head tag –
    Let’s try this again:

  • http://silvery.com Chris Smith

    Zuko, most tagging is suppressed in these comments — maybe you could provide a link to a page that describes the profile attribute in the head?

    Also, what’s the reason for using that? I’ve used Microformat software to read out the hCard info from webpages without using this profile attribute tag.

    Thanx!

  • http://silvery.com Chris Smith

    Also, I didn’t recommend using the Google geocoding API because I believe it’s less user-friendly for inexperienced webmasters.

    Most small business webmasters only have one website with one address, so requiring them to write software to submit addresses and receive back geocodes to cache into their map webpage seems too heavy.

    Certainly, doing geocoding for dozens and hundreds of addresses would demand use of the API or a batch geocoder.

  • zuko105

    Sure thing. I know you’re a fan of w3c validation. This is the equivalent for microformats.

    Here’s links to a couple of examples:
    http://microformats.org/wiki/hcard-profile

    http://www.ibm.com/developerworks/xml/library/x-tipproflink.html

    Live example:
    http://www.dallasfamilyhomes.com/dallas-homes/

    Point taken on the google geocode api.

  • http://silvery.com Chris Smith

    Zuko – you’re right – my bad!

    The Head Profile attribute is not necessarily required for adding meta data to a webpage, but it’s apparent that inclusion of this is ideal to insure that the program which interprets the webpage will know with higher confidence that it’s marked up with hCard microformats.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide