How Do I Redirect My Visitors to My Mobile Website?
You have three options when it comes to serving mobile users on your website. Option 1 is to use a responsive design and let the dynamic code do all the work. Option 2 is to use a subdomain or subfolder specifically designed for mobile, and redirect mobile users to that URL. Lastly, option 3 is to use a specific app for mobile users, and redirect mobile traffic to the download page for that app.
Option 1 is the typical best option for almost every website. Responsive design is the wave of the future, and it’s something you should get onto when you have the chance. Unfortunately, many businesses either cannot afford the redesign or don’t want to spend the time required to implement it.
Option 3 can be a good idea if a significant portion of your mobile traffic comes for one specific reason, such as checking their e-mail or making reservations to a restaurant. Unfortunately, very few businesses fall into this category, and forcing mobile users to download an app that doesn’t do what they want to do is just going to drive them away.
The best option, as a middle ground, is to create a mobile version of your site on a separate subdomain or subfolder. You see this fairly often, with the www.m.example.com URL format. The m, here, stands for mobile. You might also see www.example.com/mobile/url, though it is much less common.
Mobile Site Duplication Issues
If you’re not new to SEO, the one red flag that comes up when you think of a mobile version of a site, specifically on a subdomain, is the duplicate content issue. After all, chances are you’re posting the same content on both sites; you have to, otherwise they’re different sites. This means all the same product descriptions, all the same navigation, all the same blog posts, all the same calls to action and all the rest.
In that case, when Google indexes the site, wouldn’t they flag it for duplicate content penalties? This would be the case, if Google were not intelligent. Fortunately, there are two protections in place.
The first protection is one of simple common sense. Google might see the same blog post in two locations, and they might compare the two URLs. One is www.example.com and the other is www.m.example.com. Knowing that these are two facets of the same site, you can potentially get away with the duplicate content.
This is not guaranteed protection, however, as Google is still a machine and no machine is perfect. Therefore, you have to implement proper canonicalization.
The way you do this is to add rel tags to each page. On the desktop page, add the rel=”alternate” tag with a link to the mobile version. This does two things. First, it tells Google that the mobile version of the page is an alternate version of the desktop page, not a copied page. Second, it helps Google locate and index the mobile version of the page.
On the mobile version of the page, add rel=”canonical” with a link to the desktop version of the page. This primarily tells Google that the mobile version is a derivative or alternate version of the desktop page, and protects you from copied content penalties. If, somehow, Google has only indexed your mobile site and not your desktop site, this will help it index the desktop site as well.
So that solves the potential duplication issues; what about actual redirection?
Redirecting Traffic
There are two specific ways to redirect users from one page to another. The first is using HTTP redirects. The second is using more dynamic Javascript redirects.
HTTP redirects work because – warning, technical description incoming – when a device, desktop or mobile, polls for a website, it has to send some basic information along. Part of that information, essentially, answers the question “who’s asking?” The HTTP request header specifies that “who” by including device information. The HTTP redirect, then, acts like a gatekeeper.
Picture a person standing in front of three doors. A line of people want to pass through the doors to get at the content on the other side. The gatekeeper’s duty is to determine the color of the person’s shirt and direct them to the appropriate door. There’s a door for warm colors, a door for cool colors, and a door for grayscale colors.
In this example, the gatekeeper is the redirect code. The grayscale colors would be the desktop users, and they all go through the big door in the middle. The warm colors and the cool colors are both mobile devices; say, for example, older devices with small screens and newer devices with larger screens. These each need to go to their own versions of the site, for the best possible user experience.
Google recommends using a 302 redirect in these cases. Many people opt for 301 redirects instead, for the SEO benefits, but the 301 redirect is permanent. If you want to change the redirect later, you will face steep SEO penalties with a 301, but not a 302.
Javascript redirects are a little more fluid, but slower. This is because the user needs to download enough of the desktop page to load the javascript, the script needs to fetch the device user agent, it needs to force the device to load a new URL, and that new URL needs to load. This can be time consuming, but Javascript is easier to implement than HTTP redirects.
There are many ways to redirect users based on Javascript. You can go the user agent route, or you can filter by screen size. In either case, you will need to add script to every page on your site.
Bidirectionality
What happens if a desktop user clicks on a mobile link? Some sites will load the mobile link, while others will use redirects to send that user right back to the desktop site. It’s up to you which method you use; Google has no preferences.
You also may want to allow links to force a user to view the page a specific way. This would work, for example, to post a “view as desktop site” link to the top of your mobile pages. This would allow mobile users to force their view into desktop mode, given the choice.
The post How Do I Redirect My Visitors to My Mobile Website? appeared first on Growtraffic Blog.