Mobile Compatible and Mobile Optimization process
Mobile Compatible and Mobile Optimization process gives site more beauty.
Choose your mobile configuration
Understand different devices
- Mobile: In this document, “mobile” or “mobile devices” refers to smartphones, such as devices running Android, iPhone, Blackberry or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specification, although their screen size is smaller and in almost all cases their default orientation is vertical.
- Tablets: We consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.
- Multimedia phones: These are phones with browsers that are able to render pages coded to meet XHTML standards, support HTML5 Markup, JavaScript/ECMAscript but might not support some of the extension APIs in the HTML5 standard. This generally describes the browser in most 3G-ready phones that are not smartphones.
- Feature phones: On these phones, browsers lack the capability to render normal desktop webpages coded using standard HTML. This includes browsers that render only cHTML (iMode), WML, XHTML-MP, etc.
Understand key points in going mobile
- Signal to Google when a page is formatted for mobile (or has an equivalent page that’s formatted for mobile). This helps Google accurately serve mobile searchers your content in search results. More information in Signal your mobile configuration to Google Search.
- Keep resources crawlable. Do not use robots.txt to block search engines from accessing critical files on your site that help render the page (including ads). If Googlebot doesn’t have access to a page’s resources, such as CSS, JavaScript, or images, we may not detect that it’s built to display and work well on a mobile browser. In other words, we may not detect that the page is “mobile-friendly,” and therefore not properly serve it to mobile searchers.
- Avoid common mistakes that frustrate mobile visitors, such as featuring unplayable videos (e.g., Flash video as the page’s significant content). Mobile pages that provide a poor searcher experience can be demoted in rankings or displayed with a warning in mobile search results. More information in Common mistakes section.
Select your mobile configuration
- Responsive web design: Serves the same HTML span on the same URL regardless of the users’ device (desktop, tablet, mobile, non-visual browser), but can render the display differently (i.e., “respond”) based on the screen size. Responsive design is Google’s recommended design pattern.
- Dynamic serving: Uses the same URL regardless of device, but generates a different version of HTML for different device types based on what the server knows about the user’s browser.
- Separate URLs: Serves different span to each device, and on separate URLs. This configuration tries to detect the users’ device, then redirects to the appropriate page using HTTP redirects] along with the Vary HTTP header.
Signal your configuration to search engines
Responsive Web Design
Responsive web design (RWD) is a setup where the server always sends the same HTML span to all devices and CSS is used to alter the rendering of the page on the device.
Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).
Dynamic Serving
Dynamic serving is a setup where the server responds with different HTML (and CSS) on the same URL depending on the user agent requesting the page.
As it is not immediately apparent in this setup that the site alters the HTML for mobile user agents (the mobile content is “hidden” when crawled with a desktop user agent), we recommend that the server send a hint to request that Googlebot for smartphones also crawl the page, and thus discover the mobile content. This hint is implemented using the Vary HTTP header.
Separate URLs
In this configuration, each desktop URL has an equivalent different URL serving mobile-optimized content.
A common setup would be pages on www.example.com serving desktop users with corresponding pages served on m.example.com for mobile users. Google does not favor any particular URL format as long as they are all accessible for all Googlebot user-agents.
Avoid common mistakes
Blocked JavaScript, CSS and image files
For optimal rendering and indexing, always allow Googlebot access to the JavaScript, CSS, and image files used by your website so that Googlebot can see your site like an average user. If your site’s robots.txt file disallows crawling of these assets, it directly harms how well our algorithms render and index your content. This can result in suboptimal rankings.
Recommended actions:
- Make sure that Googlebot can crawl your JavaScript, CSS and image files by using the “Fetch as Google” feature in Google Webmaster Tools. It will allow you to see exactly how Googlebot sees and renders your content, and it will help you identify and fix a number of indexing issues on your site.
- Check and test your robots.txt in Google Webmaster Tools.
- Test your mobile pages with the Mobile-Friendly Test to see if our systems detect your website as compatible for mobile users.
- If you use separate URLs for your mobile pages, make sure to test both the mobile and the desktop URLs, so you can confirm that the redirect is recognized and crawlable.
Unplayable content
Some types of videos or content are not playable on mobile devices, such as license-constrained media or experiences that require Flash or other players that are not broadly supported on mobile devices. Unplayable content, when featured on a page of any website can be very frustrating for users.
When users visit a page with content not supported on a mobile device, they will see an error message similar to the one below:
This provides users with a poor mobile experience!
Instead of using a proprietary video player or putting content in unsupported formats, we recommend using HTML5 standard tags to include videos or animations.
For animated content rendered using Flash or other multimedia players, consider using HTML5 animations that work across all web browsers. Google Web Designer makes it easy to create these animations in HTML5.
Recommended actions:
- Use HTML5 standards for animations to provide a good experience to all your users.
- Use video-embedding that’s playable on all devices.
- Consider having the transcript of the video available. This will make your site accessible to people who use assistive browsing technologies or who have browsers that cannot play a proprietary video format.
Faulty redirects
If you have separate mobile URLs, you must redirect mobile users on each desktop URL to the appropriate mobile URL. Redirecting to other pages (such as always to the homepage) would be incorrect.
Examples:
- Your desktop site’s server is configured to redirect mobile users to the mobile site’s homepage, regardless of which URL they originally requested, even if the mobile site has the equivalent page to the redirecting desktop page.
- Your desktop site’s URLs are dynamically generated with URL parameters that don’t map well to the equivalent mobile URL. For example, a user who is looking for a train timetable on a specific date on the desktop site will be frustrated if they are redirected to the general timetable search page on the mobile site. We recommend that you configure the redirection correctly if you do have an equivalent mobile URL so that users end up on the page they were looking for.
- Your desktop site redirects some mobile devices but not others. For example, a site may redirect only Android users to the mobile site and not redirect iPhone or Windows Phone users.
Recommended actions:
Use Webmaster Tools. If you’re a verified user, we’ll send you a message if we detect that any of your site’s pages are redirecting smartphone users to the homepage. We’ll also show you any faulty redirects we detect in the Smartphone Crawl Errors section of Webmaster Tools. Use the example URLs we provide in Webmaster Tools as a starting point to debug exactly where the problem is with your server configuration.
Set up your server so that it redirects smartphone users to the equivalent URL on your smartphone site.
If a page on your site doesn’t have a smartphone equivalent, keep users on the desktop page, rather than redirecting them to the smartphone site’s homepage. Doing nothing is better than doing something wrong in this case.
Try using responsive web design, which serves the same content for desktop and smartphone users.
Mobile-only 404s
Some sites serve content to desktop users accessing a URL but show an error page to mobile users.
To ensure the best user experience, if you recognize a user is visiting a desktop page from a mobile device and you have an equivalent mobile page at a different URL, redirect them to that URL instead of serving a 404 or a soft 404 page. Also make sure that the mobile-friendly page itself is not an error page.
Recommended actions:
- Use Webmaster Tools. If you’re a verified user for the site, we’ll send you a notification in the Message Center.
- If you have a smartphone site on a separate URL, set up your server so that it redirects smartphone users to the equivalent URL on your smartphone site.
- If you use Dynamic serving, Ensure your user-agent detection is correctly configured.
- If a page on your site doesn’t have a smartphone equivalent, keep users on the desktop page. Showing the content the user was looking for is a much better experience than showing an error page.
- Use responsive web design when possible.This configuration allows you to serve the same content to users, whatever the device they use.
- Check the Crawl Errors report in Webmaster Tools; the Smartphone tab will show a list of detected URLs that return smartphone-only 404 errors.
App download interstitials
Many webmasters promote their business’ native apps to their mobile website visitors. If not done with care, this can cause indexing issues, and disrupt the visitor’s usage of the site.
Recommended actions:
Use a simple banner to promote your app inline with the page’s content. This banner can be implemented using:
- The native browser and operating system support such as Smart App Banners for Safari.
- An HTML banner or image, similar to a typical small advert, that links to the correct app store for download.
Irrelevant cross-links
A common practice when a website serves users on separate mobile URLs is to have links to the desktop-optimized version, and likewise a link from the desktop page to the mobile page. A common error is to have links point to an irrelevant page such as having the mobile pages link to the desktop site’s homepage.
Slow mobile pages
It is very important to make sure your mobile site loads quickly. Users can become very frustrated if they have to wait a long time to see your content.
References
- M. Satyanarayanan, “Mobile computing: the next decade, ” in Proceedings of the 1st ACM Workshop on Mobile Cloud Computing & Services: Social Networks and Beyond (MCS), June 2010.
- M. Satyanarayanan, “Fundamental challenges in mobile computing, ” in Proceedings of the 5th annual ACM symposium on Principles of distributed computing, pp. 1-7, May 1996.
- M. Cooney. (2011, Oct) Gartner: The top 10 strategic technology trends for 2012. [Online]. Available:http://www.networkworld.com/news/2011/101811- gartner-technology-trends-252100.html
- G. H. Forman and J. Zahorjan, “The Challenges of Mobile Computing, ” IEEE Computer Society Magazine, April 1994.
- R. Kakerow, “Low power design methodologies for mobile communication, ” in proceedings of IEEE International Conference on Computer Design: VLSI in Computers and Processors, pp. 8, January 2003.
- R. N. Mayo and P. Ranganathan, “Energy Consumption in Mobile Devices: Why Future systems Need Requirements Aware Energy Scale-Down, ” in Proceedings of the Workshop on Power-Aware Computing Systems, October 2003.
- A. Rudenko, P. Reiher, G. J. Popek, and G. H. Kuenning, “Saving portable computer battery power through remote process execution, ” Journal of ACM SIGMOBILE on Mobile Computing and Communications Review, vol. 2, no. 1, January 1998.
- E. Cuervo, A. Balasubramanian, Dae-ki Cho, A. Wolman, S. Saroiu, R. Chandra, and P. Bahl, “MAUI: Making Smartphones Last Longer with span offload, ” in Proceedings of the 8th International Conference on Mobile systems, applications, and services, pp. 49-62, June 2010.
- P. Zou, C. Wang, Z. Liu, and D. Bao, “Phosphor: A Cloud Based DRM Scheme with Sim Card,” in Proceedings of the 12th International Asia-Pacific on Web Conference (APWEB), pp. 459, June 2010.
- P. Zou, C. Wang, Z. Liu, and D. Bao, “Phosphor: A Cloud Based DRM Scheme with Sim Card, ” in Proceedings of the 12th International Asia-Pacific on Web Conference (APWEB), pp. 459, June 2010.
- J. Oberheide, K. Veeraraghavan, E. Cooke, J. Flinn, and F. Jahanian. “Virtualized in-cloud security services for mobile devices, ” in Proceedings of the 1st Workshop on virtualization in Mobile Computing (MobiVirt), pp. 31-35, June 2008.
