How to Implement Device Detection Like a Mobile Web Rockstar!

You don’t need to write your own plugin or pay to get a good device detection script working on your website. There are lots of great scripts you can download in a matter of minutes and have working in under an hour.

One script I use is . It’s free, easy to setup and works great on my website.

Let’s move forward with the 3 steps to killer device detection your visitors will love you for:

1. Add Device Detection to Both Sites

Go to and download the latest version.

Now that you have your hands on a killer device detection script, you can start the magic. This is what we want to happen:

• When the original site loads on a mobile phone, it’s redirected to the mobile site.
• When the mobile site accessed by a regular PC, it’s redirected to the original site.

Add this code to your mobile website globally:

<?php
// If not mobile
if (!$detect->isMobile()) {
    header("Location: http://[your desktop website url here]/[your page slug]");
}
?>

Add this code to your desktop website globally:

<?php
// If mobile
if ($detect->isMobile()) {
    header("Location: http://[your mobi website url]/[your page slug]");
}
?>

Now, the page slug is the address of the current page. We want to send the user to the mobile version of that page. Assuming you have corresponding page names on each website, this should redirect to the alternate version.

You will need to consult your CMS docs to learn how to grab the current URL and page name for redirection.

2. Patch Up The SEO

In my post, Quick Fixes for Duplicate Mobile Content Issues, I talk about how avoid getting penalized by Google and other search engines. There are a few small tasks you have to complete before your website is 100% SEO safe. Google recommends you do this:

Let search engines know of your alternate pages using a rel=”alternate” link

In the head-tag of your desktop browser website, specify the alternate mobile URL using rel=”alternate”. This lets search engines know that your duplicate mobile page isn’t a duplicate, but an alternate.

According to Google, this is sufficient:

<link rel="alternate" media="handheld" href="the mobile url of your current page" />

Use canonicals on the corresponding mobile pages

At the same time, when search engines are crawling your mobile website, you want to have a canonical tag to the head element in your mobile pages specifying the original.

<link rel="canonical" href="http://www.example.com/page-1" >

The Vary: User-Agent Header

The Vary: User-Agent header tells search engines and ISPs to consider the user agent when caching. This prevents search engines from serving the incorrect page. It also tells search engines that your website has mobile-optimized content.

Any extra method you can use to let search engines know of your mobile version and prevent duplicate content penalties is worth giving a try.

Other Methods

I’ve heard a few bloggers say that we should block the Google bot in our robots.txt on mobile sites and only allow the Google mobile bot. I think this is a bad idea and personally wouldn’t do it. Any complications with this could do more harm than anything.

Device detection should point the google bot in the right direction. If you have the canonical and alternate links in your head-tag, you should be fine.

Aside from that the robots.txt isn’t always dependable and doesn’t ensure you’re blocking anything.

3. Test, Test and Test Again

Pull out your device and test out your website. How does it work? Does everything redirect? Is there a delay? Does everything redirect cleanly? Are there any problems when visiting a page directly?

You want to nip any device detection errors in the butt before it causes your website harm. Not only can serving the wrong page confuse users, but it can cause search engines to think you’re masking content, resulting in a penalty.

It’s critical to make sure you’re serving the same content to search engines as you are to visitors. Serving two different versions of content to search engines and visitors is considered an SEO-crime.

Just One More Step to Mobile Web Rockstar Fame!

Device detection is only one of the small tasks in your mobile strategy. However, without it, your visitors may not even be aware of your mobile website. Doing all the work ahead of time makes it easy for your visitors and prevents you from being abandoned by your mobile audience.

Author: Clinton Skakun is a mobile web strategist and founder of Moveelo. He has a wealth of insight and experience in coding, designing, online marketing and utilizing social media. Clinton focuses on the mobile web, simple design and marketing strategies for businesses.