Duplicate Content Solution For Mobile Sites

I've been setting up mobile sites for my clients lately and wanted to share my experiences with you. I set up mobile sites on a subdomain using some custom code written for MODx CMS. This works out really well for the client because they only have one place to enter content, and the CMS takes care of serving the right templates to mobile users. This however creates a lot of duplicate content. On top of that, search engines love mobile content IMO because it's faster for for them to download and less info to store. The result is that your mobile pages show up in the SERPs instead of your real pages. This will make your clients mad.

So how do you avoid this? Before I ventured in to mobile site development I did some research and found that a lot of people think you really only need a mobile sitemap. As it turns out this is bad advice. I know because this what I did and ended up getting my mobile pages indexed and showing in the serps where my real pages used to be. What you really need to do is follow the advice of Google and make your pages have the correct mobile content type and use a canonical link tag. The combination of these two things removed my mobile pages from Google's index.

Setting the canonical link tag is easy so I'll start with that. On every mobile page, in your head tag, place a link tag like this:

[html]

[/html]

For example, this tag would be placed in the head tag on the 'http://mobile.devtrench.com/link-to-page' page. This tells Google and other search engines that abide by this standard that the current page is not the real page, and that it should index the page located at the href. Obviously, to do this for your mobile pages, you either need a different template (which is what I suggest), or some custom code to insert it when the user is viewing duplicate content. Keep in mind that the canonical tag can be used for any duplicate content, not just mobile pages.

Changing the content type can be a little more difficult if you're using a CMS that sets it for you (MODx does this). Normally, just changing the content type in the head tag works fine. Here's how to do that:

[html]

[/html]

This, does not work however, if PHP or other programming language has explicitly set the content type in the html header (the part of the html document you can't see). To check what content type the document really is, you need this addon for FireFox called Firebug. Firebug is a must have for web developers anyway since it shows you all of the header information including get and post variables, has a DOM navigator, CSS inspector, etc. This is the tool I used to find out that my meta tag wasn't doing the job because good ol' MODx was setting the content type.

In my situation I had to write a custom plugin for MODx to change the content type when my mobile pages are viewed. I also use the same plugin to serve the mobile site automatically to mobile devices and parse any bad html in good xhtml. I found that if my content was not well formed XML then firefox would choke on it - but my blackberry, which is apparently more forgiving, would not.

So those are the two elements you really need to get mobile content out of, or prevent mobile content from showing up in the SERPs. You can also make a mobile sitemap if you want to, and I would recommend also adding a mobile doctype:

[html]
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
[/html]

The whole process of developing mobile sites and reading about them, got me wondering if the mobile site will die out. Many people think it will (those people have iPhones), but I know my clients really like them (we have BlackBerries). I've never had the chance of using an iPhone but I can't imagine that a few extra inches of screen space make that big of a difference. Plus the bandwidth benefit that you get when you leave out all of the images and extra CSS on your mobile site is huge. What do you think?

[polldaddy poll=1947887]