Now that it's 2014, the question isn't "should I build a mobile site?" It's "how do I build a good mobile site?" Mobile sites are, at their core, just sites; but redesigning your site for very small screens and linking your mobile site to your desktop site gives you a lot more to think about.
I've put together a checklist of a) aspects of mobile sites that are often broken yet overlooked, and b) optimization options that many people miss. Where you need more information, I've included a link rather than a full description, so that people smarter than me can help you with the details.
Connecting your mobile site with your desktop site
- Are redirects set up to get visitors to the specific page they were trying to view, not the homepage?
- Are mobile visitors redirected to the mobile version of the site?
- Are desktop visitors redirected to the desktop version of the site?
- Is that option easy to find?
- Once mobile visitors choose the desktop version of the site, will they remain on that version as they browse the site? Or will your redirects send them back to the mobile version of the site each time they click on a page?
- Have you set up a Vary-HTTP header to tell Google and browsers that you vary the HTML by user agent?
- Are desktop pages set up with a rel="alternate" tag pointing to the mobile version of that page?
- In the header, add: <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.domain.com" />
- Are mobile pages set up with a rel="canonical" tag pointing to the desktop version of that page?
- In the header, add: <link rel="canonical" href="https://www.domain.com" />
Technical issues
-
Check Crawl > Crawl Errors and choose the Smartphone tab. This only shows URLs that are a problem for mobile crawling, but not standard desktops:
- Google will return pages that it's having a hard time crawling.
- Have all mobile pages been submitted to Google via an XML sitemap in Google Webmaster Tools?
- Keep mobile pages separate from desktop pages; Google Webmaster Tools reports on the number of pages indexed by separate sitemap. If you keep the two separate, you'll be able to see if fewer mobile pages are indexed than desktop pages.
- Geoff Kenyon's Technical Site Audit Checklist is a great place to start.
- Google offers an excellent page speed tool that gives a list of recommendations based on its crawl of your site.
- This is a more important step than it is in desktop optimization, since phones have less computing power and heavy coding and/or images will lead to an even slower mobile user experience.
- Server-side redirects are generally faster, since they don't rely on the weaker computing power of a phone.
- On mobile websites, 301 and 302 redirects send the same message to search engines, so you can use either type, though Google recommends 302s whenever possible.
Design
- Does it look good on a number of phones?
- Check the top phones on the market. Good examples are the iPhone (iOS), Samsung Galaxy S4 (Android), Nexus 5 (another Android), and Nokia Lumia 520 (Windows).
- Check the top phones that your visitors use, as reported by your web analytics.
- Does it look good on a number of tablets?
- Check the top tablets on the market. Good examples are the iPad (iOS), Samsung Galaxy Tab in multiple sizes (Android), Kindle Fire (Amazon), and Asus Transformer Book (Windows).
- Check the top tablets that your visitors use, as reported by your web analytics. Pay attention to the top tablet sizes as well.
- Are all links given a 28x28 pixel margin between other links, so they're easy to click with a finger?
- iPhones can't render it at all, and it's slow on Android.
- Look for sneaky uses of Flash, like Flash Player for video.
- Set up a viewport tag to let mobile browsers resize pages so they fit devices perfectly.
Don't use pop-ups
- They're too easy to accidentally click and completely take the visitor away from the page s/he wants to be on.
- They slow down loading time.
Responsive sites: Review where elements end up
- On mobile versions of the site, are the most important elements at the top? Make sure you don't move important right hand elements, like the "add to cart" button, below all other content.
- On tablet versions of the site, does everything still make sense?
Navigation
- Often, navigation will be minimized due to space constraints. Don't let that happen; you just need training in how mobile navigation works.
- Only offering a small portion of your desktop site to mobile visitors is frustrating.
- If visitors aren't interested in that content, including a link won't cause a problem because no one will click on it.
- If visitors are interested in that content, you can use analytics data to show that mobile visitors choose to click on that link.
Content
Map mobile to desktop pages
- There should be an equivalent mobile page for every desktop page.
- There may be more mobile than desktop pages, since it's often easier to navigate mobile sites if you break up the desktop content into multiple pages.
- In some instances, you may have extra mobile pages based on location capabilities, but it's still best to offer them in both versions, so visitors never feel like they can't find something they remembered on your site.
Edit wordy content
- Mobile visitors have to deal with small screens, and are often on the go and have less patience.
- Get the same message across as briefly as possible.
Remove unnecessary images
- They slow down page loading time and aren't needed to fill up extra screen space.
- Ads are particularly annoying on mobile screens, so if ads are a side business and not your primary source of revenue, consider cutting back on them on your mobile site.
Video
- It's lightweight and easy for phones to render.
- If you're using a major hosting platform, you're probably already using an HTML5 video player.
- Necessary if you have a responsive site, but still recommended if you don't. Since phones are different sizes, you want the video to snap to fit the screen width.
- If you're hosting YouTube, Vimeo, or your own videos, you can add a bit of code to make them responsive.
- If you're using a paid platform like Wistia, they may offer code to make videos responsive (Wistia's is Video Foam).
SERP differences
- Google still gives you approximately 70 characters (512 pixels) in your page title, but the width of the screen forces the page title into two lines.
- Google cuts off mobile meta descriptions at approximately 120 characters rather than 150 characters in their SERPs.
- Google displays the mobile URL rather than the desktop URL for mobile searches, as long as redirects have been set up properly.
Final check
Run pages through the W3C's mobileOK checker to make sure you haven't missed any small coding errors. It's fairly finicky, but that makes sure it finds a lot of issues you may have overlooked.
Building Your Mobile-Friendly Site, a Distilled guide by me and Bridget Randolph
How to do a Mobile Site SEO Audit by Aleyda Solis
Wait, I thought Google suggested you do not forward a desktop user back to the desktop if they visit the mobile site. Where do they say this is recommended?
I was not aware of the ~120 character limit for meta descriptions on mobile. I've taken to only using 140 characters because Google shows a date for an article and used up 16 characters there. Should we actually now target 104 characters on mobile? Or does Google never show dates on mobile?
About page speed ... obviously this is important, but I really think Google is going overboard with their suggestion to inline CSS above the fold and move all CSS and JavaScript files bellow the closing html tag. I'd say this is not possible with most sites, unless you inline ALL of the CSS/JS which will delay load. And on a minor note ... their documentation on it is confusing. How are the style and link elements being injected with JavaScript?
Forwarding a desktop user back to the desktop version of the site when they have a mobile URL is a UX recommendation, not an SEO recommendation. But I never heard of Google saying that was a bad idea; where did they say that?
The 120 character limit was an observation, based on my personal tests while writing this. I tested it on my phone (Android) and my coworker's phone (iPhone). It's possible that Google's changing things up, because I couldn't find anyone else out there saying anything about mobile meta descriptions specifically.
As to the page speed issue, I think that Google makes a lot of coding recommendations based on their developers' ideals rather than real world examples. I'd take their recommendations with a grain of salt unless it has to do with your website communicating with their crawler. Just do your best to make your site fast. Google isn't going to penalize you because your coding isn't their exact way. :)
Hi, for the time being I'm creating a duplicate (mobile) website of an existing website so:
domain.nl (deskopt/laptop/tablets)
m.domain.nl (mobile phones)
is it necessary to make a duplicate of EVERY page or can I choose certain (basic but important) pages and set canonicals / alternate for these ones?
Kind regards
If you build ALL the pages in mobile version then it would be much beneficial for SEO &UX respective rather than re-directing most of the pages Home / other pages itself..Always good to build lots of pages on mobiles where conversion%'s are creeping up YOY.
Like Naveen said, it is optimal to have all pages in both desktop and mobile versions, but it's definitely not necessary. Just make sure that all pages are accessible to mobile visitors.
Cant you skip most of this by just having a responsive design out of the gate ? And Manage one site.
Nope, that's why I made sure to include some responsive-specific checks. It's really easy to throw up a responsive site and then assume that it works on mobile devices, but that's not always the case. Even if the template technically works for mobile, it's often too clunky, or you'll include large images or new content will be laid out poorly. So, make sure that you audit your responsive site as well!
Agree with this comment! "But my site is responsive" That's nice - nothing else mobile about it works for SEO at all.
"301 and 302 redirects send the same message to search engines"-- Not sure I agree with that statement
They do when it comes to mobile redirects, nothing else. On https://developers.google.com/webmasters/smartphone-sites/redirects, Google says "[when redirecting to device-specific URLs] it does not matter if the server redirects with an HTTP 301 or a 302 status code, but use of 302 is recommended whenever possible." I'm not sure why they recommend 302 when it apparently doesn't matter, so I just shortened it to "it doesn't matter." :)
no.i am not agree with your statement because 302 is temporary redirect and 301 is parmanent redirect..
hi moz team! I strongly love to read your blogposts but I found in some time it is real pain in the... you know where. Tell me please why don't you make this place mobile friendly? Kristina - I think moz webdevelopers should read this post everyday :)
Hey Kristina, I found this post very useful to me. I think it's amazing to know for others as well. Because of the technology day by day business growing from PC to laptops and now laptops to mobile and tabs. So such kind of info will helps a lot of people who having the problem about mobile sites as well who are thinking to create their another site for mobile.
Wow this is awesome guide for mobile SEO. It cleared my many doubts.
Thank you Kristina for sharing VIMP article at the right moment..because 2014 & coming years would be much more IMP for all companies to have a checklist in had whether ALL best practices are implemented or not..
Great post, thanks a lot! I will try to talk my Wordpress theme supplier into optimizing for mobile...
Awesome list to help my clients with their mobile web efforts. Thank you for this post as it also helps refresh my knowledge.Best Regards
Hi Kristina,
This is a great checklist. I love the way webmaster tools is focusing more on tools for mobile experience, with tools like mobile site speed test and mobile error check.
Yeah, every time I write about mobile, there are more tools to help you out. :)
For the first time I got the Perfect Mobile Site Audit Checklist from Moz.. Now I'm going to explore on all my Social Media Profiles..... Thanks a lot to Kristina...
Good article and very helpful. Its a bit light on RWD so i am going to put together a summary of this with our own views following up on an extensive makeover for a very large tourism destination portal. The RWD report is on SlideShare at https://slideshare.net/irclay/responsivewebdesign-boost-tourism-bookings
I would like to share the checklist update with you before its published - who should i contact. Thanks for sharing!
Great post Kristina!
I wanted just to add that the Typeface is very important. We know that when it comes to mobile a bad typeface could ruin all our efforts with a high bounce rate numbers. So SEOs must be sure that the typeface is good for mobile use. I definately could recommend Petala Pro for this effort.
Decent post, Pingdom also do a really good speed testing tool complete with Gant Visualization: https://tools.pingdom.com/fpt/
I've always think mobile version of my website isn't needed. That's for e-shops, news/gossip/facebook style websites. But then I realized (thanks to Google Analytics) 13% of traffic came from mobile devices. And growing...
So now is a must to have mobile version of Your website. Or not, if 13% (my example) more possible conversions is not enough for You to care about:)
I have one question. My mobile site has already having canonical tag to avoid duplicate pages. Now I am planning to implement rel="canonical" tag pointing to the desktop version of that page. Now my question is do I need to maintain two canonical tags on each mobile page? do you guide me on this, please.
<link rel="canonical" href="https://m.domain.com" />
<link rel="canonical" href="https://www.domain.com" />
There's only one canonical version of a page, never two. So, choose one version (probably the desktop version of the page) and make all pages with the same content canonical to that same page.
In your case, my guess is that you're canonicaling m.domain.com/duplicate-page to m.domain.com/original-page, which canonicals to www.domain.com/original-page. The best way to do this is to canonical m.domain.com/duplicate-page straight to www.domain.com/original-page.
Hope this helps!
Thanks a lot Kristina.
Thanks for the post Kristina Kledzik... Since its regarding to the mobile website checklist, I have a question on this is it fine to use a mobile version website like this for eg; domain.com/mobile/index.html
Please let me know your thoughts it would be really helpful...
Once again Thanks for sharing the tips....
Do you mean, is it okay to use a separate mobile site with the URL domain.com/mobile/index.html? Yes, as long as you properly link that mobile page to domain.com/index.html with rel="canonical" and rel="alternate"
Thanks Kristina for the nice list..Though I am familiar with many things still learned few new things from here.
Very useful checklist Kristina.
Very helpful thnkas. esspecially liked the check boxes.
All praises for checkboxes go to Geoff Kenyon. :)
Very useful checklist. I think the key to mobile site is staying away from clutter and ensuring optimum mobile user experience.
Yep, a lot about optimizing a mobile site is making sure that it's well designed. But that's hard to put in a checklist, because designing is hard. :(
In January we launched m.ticketgoose.com, i did site audit, but i performed 4 or 5 audits on my site, but here you gave me suggestions on best categories. Thanks alot.
Glad to help!
Where usage patterns differ wildly between desktop and mobile usage (say for an airline application, a desktop user might want to buy tickets and a mobile user might want to look up info) I think it makes a lot of sense to create a separate mobile site rather than a responsive site. But for most blogs, they do mobile sites very poorly and end up breaking half of the links and neutering vital functionality.
Creating a responsive site is better in that case.
Great post. Should be called "Mobile Site Audit Checklist & Recommendations".
Love this tip: "Are all links given a 28x28 pixel margin between other links, so they're easy to click with a finger?"
I hate it when you go to a mobile site and can't click the link you want to!
Well, you can find these recommendations in a lot of other places. I had to base the checklist off something. :) I really did mean for this to be an easy checklist.
100% on board with your suggestion for using the Google Page Speed Tool to check the load speed of your mobile site.
This has always been a must for desktop versions of websites, but given that mobile internet connection speeds are not always as fast as a persons' home internet connection it is just as important, perhaps more so.
Thanks for that great blog cum checklist post Kristine. Certain points are really worth notable. When it comes to mobile website optimization, is it that Google has made some changes or updated meta regulations. When it comes to sites loading speed, it's really gonna be a ranking factor as Google too really cares about the end user experience. "Video Foam" is something new to discover in your blog but don't you think that if we host onsite videos directly from our YouTube channel that would also be good for future in terms of SEO. The mobile navigation which as you discussed becomes really cumbersome with screen resolution. I think this really matters when it comes to blog or internal linking metrics on a mobile sites.
I would love to see more posts like this, with actionable items. Very helpful. Oh, and thanks so much for "Check that no elements rely on Flash" recommendation. If only everyone would follow that!
"Allow mobile visitors to see the desktop version of the site"
How often this is missed! :) Thank you.
I have also a website in word press that is not indexing in Google but in Yahoo it index. what is the problem with my web site. Plese suggest me.
I think that's a bigger problem than I can diagnose here! If you have a Moz subscription, you can start by submitting a question to the Q&A section, but you'll probably have to hire an SEO.
Good luck!
you just need to doing SEO on google,so that your website rank willbe automaticallly increase in google & yahoo both.....
Hi Ria
My best suggesition is to ping webmaster or developer he will solve your problem. Thanks Kristina great post on Mobile optimization checklist.
Thanks
Kristina Kledzik for such a good post as mobile searches are getting much more valuable endeavor for business worldwide.Page speed is something which has direct effect on its searches,its no matter whether its desktop or Mobile.
So Google has said. It's also important so visitors don't give up on you while your site takes its sweet time loading!
Good blog on the Mobile SEO..I have one question What is the character limit for meta description for mobile base website.Also which off page task should we perform to get the ranking immediately in mobile browse.
There's no character limit for meta descriptions, but Google will cut you off around 120 characters.
Thanks Kristina.. But what about the off page task ?? which task we should take into account. Please suggest...
for google 150 to 160 character and for yahoo 155 character...
Hey Kristina
Great post, thanks.
Few months ago Matt Cutts said that page speed is not more important in terms of a ranking factor for mobile search than it is for desktop search. So Kristina Kledzik, what you say about it?
But it doesn't mean Google will not consider this factor in future for mobile search as mobile users want fastest result from Google, and Google priorities user experiences. However, it is okey till next announcement of Matt on same.
I think that site speed is going to get more and more important, but it's also going to get easier and easier to have a quick site, just because of our technology. Do you remember 10 years ago when you would happily wait 5 minutes for a picture to download? Today, I hit the "back" button if a webpage takes longer than 15 seconds to load.
But as for right now, I think that Google's going a little lenient on mobile sites because there are still so many large companies with low quality mobile sites. Once they give in to the mobile revolution, though, Google's going to raise the bar a lot for mobile sites. Be prepared!
Absolutely Kristina! Google can raise the quality bar anytime for provide best user experience. We have to be prepared for every aspects. Well said.
I feel always page speed is part of googles algorithm because if the site not renders within stipulated time..surely it will be considered as technical issue from website respective. Even UX respective also not good if the pageloads ample of time
i have a problem with my site https://opakistanidramas.com/ that google is not indexing my pages.. my site is 7 months old. i think the webmaster settings is not good. do you help me to make good setting for indexing. plz