How To Geocode An Address & Optimize Location Pages

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 […]

Chat with SearchBot

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:

https://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"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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="https://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="https://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="https://www.w3.org/2006/03/hcard "

like this:

<head profile="https://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 this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.


About the author

Chris Silver Smith
Contributor
Chris Smith is President of Argent Media, and serves on advisory boards for Universal Business Listing and FindLaw. Follow him @si1very on Twitter and see more of his writing on reputation management on MarTech.

Get the must-read newsletter for search marketers.