How to be 100% mobile-friendly in the search results
Regardless of the industry we work in, we are seeing rapid growth in traffic from mobile platforms such as cell phones, tablets and phablets. As a result, there is an ever-increasing need to develop sites for mobile devices, especially when we see a growing number of optimized search results that include the words “mobile site.”
How does Google analyze these sites, and what factors make a site 100% mobile-friendly?
How does Google see the pages of a site?
Before beginning a task that could be major, you need to know how Google perceives a site.
To analyze a site, you can use Google’s Mobile-Friendly Test. This tool provides detailed information on a web page and the various actions you can take to make it mobile-friendly.
How do you make a site mobile-friendly?
To make a site 100% mobile-friendly, there are three solutions, which are not always very clear for the digital marketing industry:
- Responsive design
- Dynamic serving
- Distinct URLs
The following table will help you understand, from an SEO perspective, the basic principles of each solution vis-à-vis two important elements:
- The URL
- The code
Clearly, the solution that requires the least change is a responsive design, whereas dynamic serving and distinct URLs involve creating a second version of your site.
A site using responsive design
A site using responsive design adapts to any web browser and screen size. The action takes place at the HTML level, specifically in the cascading style sheets (CSS), code that generates pages adapted to the user’s screen.
On the technical side, you need to allow Googlebot user-agents to analyze all the elements of your site. This process involves detecting the “viewport” tag, which tells the browser what screen size to display.
In the Ben&Jerry’s example, we find this tag in the header of each page on their site:
A responsive website has many benefits. In addition to greatly simplifying the user experience, it allows Google to do a faster and more thorough analysis of all your site’s pages, thereby making it easier to index these pages.
Dynamic serving is a different way to manage Googlebot user-agents. When the user-agent fails to find in the HTML code an indicator that redirects to a mobile version, the server sends Googlebot the information found in the “Vary” HTTP header.
This response from the server indicates that there are other versions of the site in “pre-defined” formats for mobile devices. In short, if you are using an iPhone, the device’s user-agent will receive from the server a response indicating that a mobile version is available.
Example of a response provided by the “Vary” HTTP header:
However, there is not always a version for every mobile device…
If we take the example of Air Canada, we see that the site is not optimized for mobile devices of any screen size.
Aircanada.com displayed on an iPhone 5S and a Galaxy Note2:
Response from the Air Canada server:
As we can see with these examples, unlike responsive design, which offers a version adapted to the mobile browser, dynamic serving delivers a predefined page that fits the screen but is not always perfectly optimized.
This solution is much simpler to implement as it involves creating a new site with the subdomain “m.” One example is the Canadian Michelin site.
Search results on a mobile device vs. a desktop computer:
Googlebot user-agents directly detect the device on which the search is done and can display the ideal site format in the search results.
Mobile-optimized site vs. desktop version:
However, since the mobile version is most often a copy of the desktop version, it is essential that you avoid duplicating the content and do the following:
- For the desktop version, use the rel= “alternate” tag, which redirects to the mobile version.
- For the mobile version, use the rel= “canonical” tag, which redirects to the desktop version.
To summarize, the canonical tag tells Google that it is a duplicate of the desktop version and the alternate tag tells the Googlebot where to find the mobile version of the page.
Regardless of the solution you choose, errors can frequently occur. To verify the compatibility of a site, you can use Google Webmaster Tools to identify potential errors.
Under “Mobile Compatibility” in the “Search Traffic” menu, Google Webmaster Tools clearly explain the elements needing to be corrected, such as the space between buttons, font size, etc.
To sum it up, no single solution is better than the others, because each solution has its advantages and disadvantages for your website and your digital strategy. The important thing is to fully understand and know how to use the solution you chose. However, the loading time could be longer for a responsive site, which may have an indirect impact on SEO.
In conclusion, a mobile-friendly site should display text that is readable without having to zoom in, along with buttons and links that are easily clickable and pages that are adapted to the screen size. In addition, we recommend that you avoid using file formats (such as Flash) that are not readable on mobile platforms.