WordPress Redirect to Mobile Site

In a very short time Google will start to emphasize sites that are specifically designed to be viewed on mobile. In many cases that will be by the inclusion of a mobile style sheet, so that the user will see the same content, but in a design that fits with their user experience.

But what do you do if you have a mobile specific site?

Google does have some directs on https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls?hl=en, but if you have a read through these, they seem to be more based around static sites, or sites with only a very few pages. So what happens if you have several hundred pages that need to be redirected to the same page but on a different url, eg https://www.example.com needs to be redirected to http://example.mobi AND https://www.example.com/page1.htm needs to redirect to http://example.mobi/page1.htm.

It’s actually easier than it looks, but weirdly there doesn’t seem to be any published code for it, so here goes!

First I should add that in my particular case the mobile site (http://example.mobi) was a static site, and already had the canonical tags added. Each page referred to it’s parent page as follows: –

<link rel="canonical" href="http://www.example.com/page1.htm" >

So on that side of things I didn’t need to do anything. Also the page url (by which I mean page1.htm, page2.htm etc), were also exact equivalents. If one site had something like page1/ or page1.html though, you could apply the same technique.

If you mobile site is also wordpress based, again the same code can be used as long as page names are the same.

Adding the link rel=”alternative”

Google recommends that: –

On the desktop page (http://www.example.com/page-1), add:

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

One a larger site, or in wordpress that mean that you need either something to manually add in the mobile url, or you need to generate it automatically. I chose to do the latter as the site has over 250 pages! To do this you will need to edit your header.php file.

1. Before you start, whatever you are doing take a backup of your header.php.
2. I would recommend editing this file using an external editor like Dreamweaver or Coda and uploading it. That way if anything does go wrong, you can just upload the previous version. However, this is amazingly simple, so I didn’t follow my own advise and I actually edited it in Appearance >> Editor, then chose my theme and header.php
3. Scroll down in the code to a place where you want to add your line in, add a few spaces so you have room and paste the following: –

<?php
$urlDesktop = array(“https://www.”, “com”);
$urlMobile = array(“http://”, “mobi”);
?>
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”<?php echo str_replace($urlDesktop, $urlMobile, get_site_url() . $_SERVER[‘REQUEST_URI’]); ?>” >

In this case what we are doing is: –

1. Creating 2 arrays. These are basically 2 places to store the elements in the url you want to swap out. So in my case urlDesktop contains the sections of the desktop url I wanted to swap, and urlMobile contains the sections I want to swap in. NOTE that the positions must be exactly the same ie the first item in one array swaps with the first in the other etc. You can make as may changes as you want in here as long as each array has the same number of elements. Also note that the Desktop array includes the “.” after “www”. If you leave that off, you will get “http://.example” in your final result. Not what you want.
2. Add in the code as per Googles advise, but the link includes some php. This
   1. Requests the URL of the page that the code is on
   2. Then swaps out sections you built in your arrays, swapping the urlDesktop sections with the urlMobile sections.

That’s it! Just save your header.php file and you will now get the required Google code on each of your pages, pointing to the mobile site.

What to do if your urls don’t match

So if you have a site as large as the one I’m working on, there are a few pages where the urls don’t exactly align. Typically that might be when you get something like: –

• Desktop site – http://www.example.com/page-1.htm
• Mobile site – http://www.example.com/page1.htm

The easy way to handle this, if there are only a few of them is to rename the pages! However, for whatever reason you may decide not to do this. You could use your same arrays and just add the pages in there. eg

$urlDesktop = array(“https://www.”, “com”, “page-1”);
$urlMobile = array(“http://”, “mobi”, “page1”);

If you do this, make sure there are no page-10’s though as these would then be swapped to page10’s.