The ultimate guide to mobile SEO

As much as 60% of people do their research on their mobile. So optimizing your SEO for mobile users has become an obvious choice.

Contents

• What is Mobile SEO?
• How to optimize your website for mobile SEO?
• How to improve your page speed on mobile?
• How to know if your site is optimized for mobile SEO?

What is Mobile SEO?

Mobile SEO gathers all the optimization techniques of a site intended to be displayed on smartphones and tablets. This optimization also involves making resources available in mobile format for search engine robots.

The new browsing habits of Internet users have changed considerably in recent years. Today, almost 60% of searches are done from a phone. These new habits have pushed Google (and other search engines) to develop specific algorithms for mobile SEO, to the great displeasure of advertisers who had to quickly modify their sites in great depth.

Google went even further than a simple algorithm by creating the Mobile First Index.

What is the Google Mobile First Index and what are its consequences on mobile SEO?

The concept of the Mobile First Index is very simple: if previously there were 2 types of indexes on Google (the desktop index and the mobile index), today there is only one, the mobile one. In other words, even if you perform a search on your computer, you will see the same results as if you had launched your search on a cell phone. No matter what device you're using, Google will display results from its mobile index.

You may not have noticed anything yet in terms of SEO, for 2 reasons:

Your site was already adapted to smartphone and tablet browsing, so Google had no reason to penalize you or make you significantly better.
Your site is not yet in the Mobile First Index. Indeed, some sites have yet to get on the MFI! Some are considered as "not yet ready" by Google... Which means everything and nothing! Some studies put forward the link between the use of Javascript and the transition to MFI. This theory holds since JS is not liked by Google and even less on mobile! Is it a reprieve that Google grants? Are we going to see some sites falling down after a while? Only time will tell...

To find out if your site has been moved to Mobile First Index, justanalyze the logs. If you don't see any more crawls from the Search Bot, in favor of the Mobile Bot, then your site has been moved to MFI! The Google Search Console also sends a notification when the site has been switched to MFI, which is quite practical for those who are not equipped with a log analyzer.

How to optimize your website for mobile SEO?

There are 3 methods to make your site compatible with mobile browsing: responsive design, mobile version and application. Google tends to prefer the responsive design. In fact there is no better choice. It simply depends on the budget and human resources of your company. It is better to have a good responsive design than a sloppy mobile version.

The responsive design (or adaptive website)

It is a system of "reformatting" images that makes a site easily accessible regardless of the size of the screen. The responsive design offers the best possible user experience. The sites using this technique have, for the vast majority of them, experienced a nice rise in the SERPs.

What are the advantages of responsive design?

As we mentioned earlier, Google tends to prefer responsive sites. We can even say that with the release of its Hummingbird algorithm, the search engine clearly encourages sites to favor this system.

One of the main reasons is that responsive does not touch the URLS, which facilitates their sharing with other sites and protects against duplicate content errors. Moreover, by keeping a single URL we avoid a 301 redirection which also improves loading times.

In the end, maybe Google doesn't really favor responsive, it simply favors sites that technically comply with its requirements, such as the absence of duplicate content or fast loading speed, which are not criteria specific to the Mobile First Index.

In addition, users have become very demanding and want a fast and intuitive mobile experience. According to Google data, 61% of visitors return to search results if the site they arrived at is not mobile-friendly; 71% of mobile users would even leave after waiting five seconds to load a page, which is both very short and very long!

The bounce rate has thus become one of the most important criteria on mobile. A responsive design site allows you to reduce the bounce rate which is directly correlated with the positions of your pages.

What are the drawbacks of responsive design?

Not one technique is perfect, especially for Google which has a tendency to contradict itself on some aspects of SEO.

Responsive design is restrictive and requires a great deal of technical expertise for sites that are not managed with a CMS such as Prestashop, Magento, WordPress, etc. As the pages of a responsive site must take into account all screen sizes, it makes them more complicated to create at the beginning. And to top it all off, Google asks to serve only one dimension for each image, which totally goes against the very principle of responsive design. So Google, we're a little confused on this one?

Moreover, this type of site with "hybrid" navigation must satisfy the needs of users on computer and users on mobile. But the screen formats are so different that it can sometimes be difficult to satisfy everyone. It is therefore not uncommon to come across pages that are supposedly "responsive" and yet not very User Friendly or even ... down right ugly!

Finally, there is also a blur on the different display needs. Let's take the example of a homepage, nicely populated with a big optimized text that sits in the middle of the page. On a computer screen, this text does not hinder the navigation, especially if the site is in full screen. But on mobile, those 500 words become totally indigestible and anti-ergonomic! We could therefore be tempted to truncate the text and display a "see more". However, Google said a long time ago that content hidden in "see more" is not taken into account for SEO. And today, it says that it can be taken into account on mobile if it was hidden for UX reasons. Big deal! How can we be sure that the text will be taken into account? And how do we know from which line onwards we should truncate the text, to be sure we are not anti-UX but within the SEO limits? (That said, this problem is not specific to responsive design).

The mobile version

Mobile sites inevitably work better than responsive sites because they have been specifically designed for small screens. But unlike responsive, the mobile site requires a change of URLS. Generally, we recognize the mobile version thanks to the small "m" before the domain name (example: m.mysite.com) or with a slug /mobile at the end of the url (mysite.com/mobile).

Visitors are automatically redirected to the appropriate version of the site depending on the type of device they are using. A dedicated mobile site is a kind of condensed version of a desktop site. Its content and functionality are streamlined so that visitors can access it as quickly as possible. Elements that are too heavy to load, such as images or videos, are often removed.

What are the benefits of a mobile site?

Mobile sites allow you to create "tailored" browsing experiences for each device. For example, if your various analyses show that your mobile visitors access certain information very frequently, but rarely read your press releases, you can choose not to display them, which is not possible with a responsive design site.

In addition, this type of site is specifically designed for mobile devices, which makes it easier to develop. It is indeed always easier to start from scratch and build a site that meets your needs, rather than adapting the existing one which sometimes poses big technical constraints.

Finally, because of their lightness and the simplicity of their code, mobile sites surpass by far the responsive sites in terms of loading time, which is appreciated for the fluidity of the navigation and for the users who only have a small cell phone data package.

What are the drawbacks of a mobile site?

A "light" version of a site inevitably implies certain shortcomings, especially in terms of content and information. This poses a problem, especially when we know that many Internet users switch from one device to another and expect to find the same content on their computer as on their mobile.

In addition, mobile sites create a risk of redirect errors. Indeed, it can happen that visitors are not redirected to the mobile version, thus accessing a site that is not at all adapted to mobile navigation (and beware of the bounce rate!). Moreover, by having different URLs, you expose yourself to some complications in terms of netlinking. Some people may share the wrong URL.

Finally, having 2 versions of a site means twice as much maintenance and updates. Everything has to be done twice. Some sites are set up so that they are automatically updated when the main site is updated, but this is not always the case. With new devices entering the market every year, the mobile site also involves constant monitoring to make sure it stays relevant to these new smartphones and tablets.

The mobile application

Unlike mobile and responsive design sites, applications must be downloaded from specific portals such as Google Play Market or the App Store. They offer faster access to content and smoother interactions, but are not suitable for all sites. They are best for very specific activities (e.g. GPS or maps) or for platforms that require access to various dynamic content. Applications are also interesting for game sites or service sites (banks, insurance companies, etc.).

What are the advantages of the mobile application?

The N°1 advantage is without any doubt its practicality. It opens immediately from the device, loads instantly and is very intuitive. It also allows you to set up push notifications and specific features that keep the customer's attention. From a business point of view, mobile applications are an excellent support for marketing campaigns.

Another significant advantage is that it can be used offline. Since it is installed on a mobile device, it allows access to the content already loaded even without an Internet connection.

What are the drawbacks of the mobile application?

One of the major problems of the mobile application is that its functioning is conditioned by the operating system used by the device. Some applications are developed for Android and iOS, however, cross-platform application frameworks do not support all modules and features of each operating system. These restrictions can have a direct impact on the functioning of the application.

Moreover, an application available on several platforms requires regular updates, which must be downloaded by the user. And we know that Internet users are sometimes lazy ... Some prefer to uninstall an application rather than bother with updates!

Avoid intrusive interstitials

Pop-ins and pop-ups ads have been in Google's crosshairs for several years because they are considered too intrusive. They also disrupt navigation and can slow down page loading. Google now only allows certain interstitial formats that do not completely hide the content that the user has come to find. That's why, on mobile, you should avoid them as much as possible.

Make the site easier to read on mobile

To make the reading on mobile fluid, there is only one watchword: sobriety and minimalism! You must avoid untimely changes of font, size, color ... Moreover, when you want to add a text on an image, it is important to do it in CSS and not by merging the text directly on the image. Thus, the text will be able to adapt to the size of the screen and will remain readable. In addition, in terms of ergonomics, it is necessary to use negative space to build the page. The negative space is in fact the "white" space found around the elements of a page. It allows the airing of the contents and improves readability.

Configuring the Viewport content tag and using HTML5

The Viewport tag allows you to define the visible area of a web page. Before the arrival of tablets and smartphones, pages were static. Today, the size of the display window varies depending on the device because "static" desktop pages would be too big and their content unreadable.

HTML5 marked a turning point in the page coding system and led to the introduction of the "Viewport" meta tag that gives display instructions to browsers. It is implemented as follows:

The width=device-width part defines the width of the page according to the width of the device screen. The initial scale = 1.0 defines the initial zoom level when the page is first loaded by the browser.

Note that HTML5 should also be used for embedding video and animated content.

Using tab bars

Tab bars, with their intuitive buttons, allow quick access to the various features of a site. They can also be used to encourage users to visit social networks.

Optimize your page titles

Strangely enough, the number of characters displayed on mobile results is more important than on desktop (78 versus 70 on average). You can therefore write longer titles, which will be truncated on desktop but will be more effective on mobile, which, let's not forget, generates most of the traffic today.

Using structured data

Structured data is important both on desktop and mobile. On mobile sites, webmasters tend to neglect them. However, they are an excellent way to get Internet users to click, which will increase your CTR!

How to improve your page speed on mobile?

Page loading time is a key factor on desktop and crucial on mobile. If you want to optimize your site for SEO on mobile, improving the speed of your pages is one of the first tasks you should tackle. This is a technical part that should be entrusted to a developer.

Reduce server response time

While code has an influence on the speed of a page, server response time also plays a key role. Mobile 1st as well as experts from Google and GTMetrix recommend that your server should start transmitting the first byte of resources within 200 milliseconds of a request. If you find that your server is slow, there are several solutions to reduce its response times:

Improve your web server software or configuration.
Ensure adequate CPU and memory resources.
Reduce the resources and requests required for each web page.

Reduce redirects to speed up mobile pages.

301 or 302 redirects consume precious milliseconds on mobile devices that rely on networks with less performance than ADSL or fiber. Google recommends to reduce them as much as possible or even to remove them.

Load contents above the waterline first

A single watchword for content loading: priority to visible content! Indeed, it is not useful to load the whole page before displaying it. By using techniques like lazyloading, you can load only the texts and images that should be displayed first.

Putting JS at the bottom and CSS at the top of HTML files

Generally speaking, you should avoid JavaScript, which is used for the interactivity of the page. But when you have no choice, you should place JS codes at the bottom of your page code, below the waterline because they prevent parallel loading. The CSS (style sheets), on the other hand, condition the correct display of the page, so they must be loaded first. In addition, best practices require that CSS and JS files be minimized to further reduce the weight of a mobile page. It eliminates redundant or simply irrelevant data without affecting the display of a page. There are several tools to detect those codes and clean them up.

The AMP

AMP is not really a method to improve your loading speed, but it has the same effects. The AMP format is in fact a very restrictive ultra-light HTML code (it does not tolerate JS for example). The pages load at high speed and are also kept in the Google cache. They are particularly suitable for blogs and other news sites. However, the AMP format has not yet found its way to e-retailers who need interactivity (if only to put the products in a shopping cart!). Some of them have tried it anyway, like Greenweez or Ebay, who use AMP on their category pages.

How to know if your site is optimized for mobile SEO?

Check the performance and structure of your pages

To ensure that your site is well optimized for mobile, there are several tools, including some developed by Google:

The Google Search Console: alerts you in case of anomalies.
The Google Mobile Optimization Test: highlights usability errors.
GT Metrix and Pagespeed Insights: indicates the state of your site from a loading time and resource usage point of view. It also highlights the various problems of slowness (images too heavy, JS badly positioned, etc.).
The advanced options of Chrome and Firefox allow you to see the rendering of your site on mobile (right click of the mouse or the keyboard shortcut "ctrl + shift + i").

Measuring your CTR and bounce rate

As we mentioned earlier, the click-through rate (CTR) and the bounce rate can be indicators of the relevance of a site on mobile. For that, it is interesting to compare them to the CTR and bounce rate of the same pages on desktop. You can use Google Analytics > Behavior > Site content > Landing pages. If one of your pages shows a higher bounce rate on mobile than on a computer, it is likely that it has display anomalies.

   Article written by Louis Chevant