Google segments mobile phones into two categories. Feature phones with browsers that can’t render normal desktop webpages and smartphones with browsers that are capable of rendering normal webpages. The search engine has user agents for both categories.
Google’s mobile recommendations
Google recommends responsive web design, which serves the same HTML for all devices and uses CSS to decide the screen specific rendering.
If responsive web design is not the best option for a particular website, then the second best option (for Google) is to serve different HTML for desktop and mobile browsers. The different HTML files can be on the same URL or on different ones, because Googlebot can handle both setups appropriately if the webmaster follows Google’s recommendations.
None of these techniques has a special advantage or preference as long as the URLs are accessible to both Googlebot and Googlebot-mobile.
What is responsive design?
The server sends the same HTML code to all devices and CSS is used to alter the rendering of the page in each browser. The screenshots below show a responsive website in a desktop browser (left) and a mobile browser (right). The content is the same but the design changes according to the browser window size.
Why responsive web design is good.
Using a single URL per page makes it easier to link to and share across Social media sites. Having only one URL also means the page is indexed only once and eliminates any canonicalization issues.
Another advantage of responsive design is that no redirection is needed to serve device optimised views. This greatly reduces loading time on mobile connections. User agent based redirections are error-prone and require careful configuration.
Two other advantages of serving a single URL are:
a) Save on valuable website hosting resources
b) Search engine robots only need to crawl the page once as opposed to multiple times with separate mobile URLs.
Both of which can make a significant reduction on resources.
Possible errors with responsive design
Page load time is crucial for an enhanced user experience; therefore, responsive site developers need to ensure that any large background images, videos, ads and other features are optimised for mobile data connections.
If mobile pages show completely different content from their desktop counterpart, then using separate mobile URLs is probably a better solution as hiding content has a negative impact on search engine optimisation.
On a single URL a server responds with different HTML and CSS, although this is dependent on the user agent requesting the page. This is because it isn’t immediately apparent in this setup that the site serves different HTMLs for mobile browsers, Google recommends using the vary HTTP header.
Separate mobile URLs
A common solution is using the m.example.com for mobile pages. Google recommends separate mobile URLs when mobile content is different from the desktop version.In order to avoid duplicate content issues, it is recommended to add rel=“alternate” to the desktop pages and point to the mobile URLs. This indicates the location of the mobile URL to the search engine robots. For mobile pages, use the canonical tag and point to the desktop URL.
Common mistakes with mobile-friendly websites
Sometimes videos are unplayable on mobile devices.
Faulty redirects loading mobile pages for desktop browsers.
Screen size redirections serving the desktop pages for mobiles with high resolution screens.
Showing a smartphone 404 page for mobiles when mobile content is not available, instead of serving the desktop pages.
Google recommends using simple banners instead of pop-ups to promote apps.