Mobile Readiness in 10 Minutes and 10 Steps

JOSourcing

Regular Member
Joined
May 19, 2011
Messages
229
Reaction score
87
Copied with permission from myself. (It's my own damn blog post!)

Here's a temporary fix that will pass Google's mobile test no matter how small or large your website is. Use it until you can enable a proper mobile solution.

1. Open the index.html or default.html page in your server's root directory.


2. Add the following between the <head></head> tags. (Replace YOUR-WEBSITE.com with your domain name first!)

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.YOUR-WEBSITE.com/mobile/index.html">


3. Add this javascript code between the <head></head> tags as well. It redirects mobile users to your mobile site:

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "/mobile/index.html";
}
//-->
</script>


4. Save the file and then create a new folder on your server's root directory. Name the new folder, "mobile".


5. Open the following link in your browser. (Replace YOUR-WEBSITE.com with your domain name first.)

6. Save the resulting page (a mobile representation of your site's home page) to your hard drive as "index.html" and then open it in a plain text editor.


7. Add the following between the <head></head> tags. (Again, replace YOUR-WEBSITE.com with your domain name first.)

<link rel="canonical" href="http://www.YOUR-WEBSITE.com/index.html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">


8. Search for and replace every instance of "<a href='/gwt/x?" with "<a href='http://www.google.com/gwt/x?"


9. Save the index.html page that you just edited and upload it to the "mobile" directory.


10. Run your website through Google's mobile tester here:
Success!
 
Last edited:
Top