Category: Maps Optimization

Mobile Friendly Websites Do Well with SEO

This is part 2 of my guide on building a simple and mobile version of a small business website. Part 1 covered that essential considerations you need to take into account before developing your mobile pages. Here we get into the specific of coding the pages. Part 3 will take this into building the mobile pages in WordPress, for those sites that use it as a CMS.

A sample template of an XHTML Basic mobile web-page can be downloaded here. It includes the php coding for HTTP header delivery as discussed below.

And a couple sample mobile sites can be seen here. This car detailing shop in Vancouver, BC is seeing some success with their mobile site while this alarm system installer in Shreveport, Louisiana gets some traffic to their mobile version, the population base is just not pushing as much mobile users as a big metro city, but it’s slowly growing.

Mobile Specific Pages vs. Mobile Friendly Pages

To keep things simple we opted to create a stand alone mobile version that resides on its own URL instead of cloaking pages to provide a mobile version on the same URL’s as the normal website. Those who support the One Web philosophy may not agree with that approach but frankly it is simpler AND in the interest of delivering usable content to different user groups with different user behaviors, the one web idea is pretty flawed (IMHO).

google search results

Location of your Mobile Page URL’s

You’ve got two options. Place them in a sub folder off the root domain or use a sub-domain. The sub-folder is probably the simplest to set-up. Some label the mobile folder or sub-domain as mobile, others mobi and some just use m. In the interest of shorter url’s I like to us the m like this;

domain-name.com/m/

Mobile Page Meta Data

Document Types

There are two major doc types that can be used for mobile web pages. WML (wireless markup language) and XHTML. WML was the standard for older phones but as more phone browsers becom more capable, XHTML BASIC 1.1 is becoming the mobile standard. We’re going to go with the XHTML as its closer to what we as web designers are familiar with, HTML.

So this would be our doc type statement at the top of the file;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

but since XHTML is a sort of XML we also need this above it;

<?xml version="1.0" encoding="utf-8"?>

Note that if your pages are able to execute php script then that the <?xml part of that code may get mistaken as php and the server try to parse it as such, generating an error. If that is the case then deliver that line with a php echo instead, like this;

<?php echo "".'<?xml version="1.0" encoding="utf-8"?>'."\n"; ?>

And we’ll also state in the html tag that this is xhtml and xml;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Character Coding

Character coding absolutely has to be utf-8, so include this;

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Mobile Specific Meta Tags

Modern mobile browsers on larger screened smartphones can browse normal full sized websites, but they will scale the full sized page to fit the small screen, then you would zoom in on a section of it. But because we’re building pages specifically to fit mobile screens we tell the device to not re-scale things. We also let the device know they are indeed on a mobile friendly page.

<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<meta name="HandheldFriendly" content="True" />

Headers and Caching

You need to send some specific HTTP headers to the device. The content type header specifies an xhtml+xml application and that it uses utf-8 character coding. Also, because mobile phones have limited memory and bandwidth restrictions you should set specific caching directives to help the device limit HTTP requests and rely on its cache, where appropriate. You want to set an expiry date, into the future and tell the device to re-validate if content has expired. In other words, as the user hops from page to page, they do not need to load the entire file set again as they revisit a page via the back button.

In php you would add this code to the top of your pages, or page template;

<?php
$offset = 60 * 60 * 24 * 10;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
header("Cache-Control: must-revalidate");
header('Content-type: application/xhtml+xml; charset=utf-8');
?>

The offset variable there is setting the expiry date to 10 days into the future, from the day the user visits it.

If caching leaves you scratching your head there’s a great overview of it here.

website example

The XHTML Markup

XHTML is pretty much exactly like HTML but it gets very strict on a few things. It is case sensitive and all tags and attributes must be in lowercase. All tags need to be closed, including empty ones like the image tag or break tag. For more on the differences between HTML and XML there are good references here and here.

Click to Call Links on Phone Numbers

Some smart phones will automatically turn a phone number into a click to call link, if the number exists in typical text formats for phone numbers. But not all of them do. You can use the tel attribute on an a href tag to make the phone dial that number when the link it clicked via the touch screen. This can bring enormous results to any SEO campaign, especially with Google Maps.

It looks like this;

<a href="tel:555-555-5555">555-555-5555</a>

If you were so inclined you could even add java on-click events to that link for tracking purposes.

Include a Back Button on Internal Pages

Most mobile browsers do not have a built in back button like your desktop browser does but we all know how handy that feature is when browsing the web. You should include a back button or link, or at the very least a home button or link at the top of your internal pages. The home page itself does not need one, of course.

For the simple types of mobile sites I’ve been building for local small businesses a home button is enough as most the mobile site pages are off the home page.

Google Analytics on Mobile Web Pages

Most mobile web browsers in modern smartphones can execute java script. The normal Google Analytics code will work just fine. There is a serverside script you can use that will let you track on phones that do not execute java but it’s really not necessary as the numbers of those are small and shrinking. More information can be found on this SEO Datahub page.

Create a Mobile Sitemap

You can create a separate, mobile specific, site map of your mobile web pages and submit it to Google via the Webmaster Tools interface. Google uses a different crawler the index the mobile web. This should get your pages crawled and indexed as mobile.

Here is an example mobile site map;

<?xml version="1.0" encoding="UTF-8" ?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
   <url>
      <loc>http://www.domain-name.com/m/</loc>
      <mobile:mobile/>
   </url>
   <url>
      <loc>http://www.domain-name.com/m/page-name</loc>
      <mobile:mobile/>
   </url>
</urlset>

More on mobile sitemaps here.

Redirecting Mobile Users to your Mobile Website

Google has more than one version of its search results for mobile users. They get the normal universal results, or they can choose a mobile specific set of results. If they are using the normal results, which probably links to your normal web-pages, you want to employ user agent sniffing to detect that the user is coming from a phone and serve them your mobile specific pages.

I use this great php script by Andy Moore to detect mobile users and set redirects to mobile pages. It’s well worth the $50. You can set which types of mobile devices you want to redirect and which you do not. The iPad for instance may be a mobile device, but its large screen is as big as some laptops, they can use your full site.

I did however customize the call to this script to do a little more. I wanted mobile users to be able to visit the non-mobile pages and I wanted to set specific redirects for certain pages.

Allow Mobile Users to go Back to Main Site

When your mobile pages exist on a separate URL, like the simple mobile sites we are coding up here, you still want your users to be able to switch to the full sized site should they want to. You don’t want them caught in a loop of trying to go to the full version only to be redirected again back to the mobile version. I included a link to the full version of the website down in the footer of the mobile version and before the mobile browser check and redirect script kicks in I run a check on the referral string. If the mobile user came from a link on the same root domain, then there is no re-direct. If they landed on the site via any other referral, be it a search engine or a link from another site, we sniff for a mobile user agent and redirect them.

That code looks like this;

<?php
 if (strpos($_SERVER[HTTP_REFERER],"domain-name.com")==0) {
    require_once('mobile_device_detect.php');
    mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/',false);
 }
?>

The strpos function finds the position of the first occurrence of a string within a larger string. Our string being the server response from the HTTP referrer header. So this will work for referrals from any page of the site, as well as from a sub-domain should you have placed your mobile version in a sub-domain versus a sub-folder of the root domain. We spoke with WitBlade, an SEO company in Philadelphia PA, to get another take. They agreed that mobile friendliness was key to user experience and SEO in general. Google recently announced they will have a separate mobile index for search results.

Redirect the Right Pages

The default set-up for most mobile user redirects is to throw them to your mobile home page, regardless of which page of your website they happened to land on. A better approach would be to redirect them to the relevant page of your mobile site, for those pages that have a similar page on the normal site. Your mobile version is probably a stripped down version of your site with fewer pages, only the most important ones. The rest of your non-mobile website pages can be redirected to the mobile home page.

The above referral check script could be adapted to do a second check for a sting referencing a particular page like this;

<?php
 if (strpos($_SERVER[HTTP_REFERER],"domain-name.com")==0) {
    require_once('mobile_device_detect.php');
    if (strpos($_SERVER[HTTP_REFERER],"page-name.html")==0) {
       mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-name/',false);
    } elseif (strpos($_SERVER[HTTP_REFERER],"other-page.html")==0) {
       mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/other-page/',false);
    } else {
       mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/',false);
    }
 }
?>

The referrer check and redirect script would be placed on your non-mobile pages.

Validate your Code

Once your site is complete you can check to make sure everything validates using the W3C mobileOK Checker. You can view how your mobile pages will render on an iPhone, from your descktop computer, using this iphone emulator.

And there you have it. How to build and code your mobile pages. Part 3 of this series will show how to do it in WordPress.

More about WitBlade, SEO Expert in Philadelphia: