Mobile SEO is critical because it helps us get to our customers at the right time and place and give them what they want.
When we know that 60% of people do their search on their mobile, it is a no-brainer to optimize your mobile SEO.
What is Mobile SEO?
Mobile SEO brings together all the optimization techniques of a website intended to be displayed on smartphones and tablets. This optimization also involves making resources available to search engine robots in a mobile format.
The new browsing habits of Internet users have changed considerably in recent years. Today, nearly 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 referencing, much to the chagrin of advertisers who have had to quickly and profoundly modify their sites.
Google went beyond a simple algorithm when creating the Mobile-First Index.
What is the Google Mobile-First index, and what are its consequences for mobile SEO?
The concept of the Mobile-First index is very simple: if before there were two types of indexes in Google (the desktop index and the mobile index), today there is only one, the mobile index. In other words, even if you search from your computer, you will see the same results as if you had searched on a mobile 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 reference for 2 reasons:
Already adapted your site for smartphone and tablet browsing, so Google had no reason to penalize you or move you up significantly.
His site has not yet been moved to the Mobile-First index. Not all sites have gone through the mill yet! Some are judged as “not ready yet” by Google… Which means everything and nothing! Some studies point to the link between too heavy use of Javascript and the transition to MFI. This theory holds as JS doesn’t like Google and even less on mobile SEO. Is it a pardon granted by Google? Are we going to see sites suddenly go down after a while? Only time will tell…
Look at the logs to determine if your site has been moved to the Mobile-First index. If you no longer see any crawls from the Search Button, to the benefit of the Mobile Button, then your site has moved to Mobile-First index! Google’s search console has also recently started sending notifications when the site has been switched to Mobile-First index, which is quite handy for those without a log analyzer.
How to optimize your site for mobile SEO?
There are 3 methods to make your site mobile-friendly: responsive design, mobile version for mobile SEO, and app. While Google would prefer a responsive design, there is no better option. It simply depends on the budget and human resources of each company. A good, responsive design is better than a shoddy mobile version.
Responsive Design (or mobile SEO friendly Website)
It is a system of “reformatting” images that makes a site easily accessible regardless of screen size. The responsive design thus offers the best possible user experience. The sites that use this technique have experienced a good increase in the SERPs (Search Engine Results Page) for the vast majority.
What are the advantages of responsive design?
As mentioned above, Google tends to prefer responsive sites. It is said that with the release of its Hummingbird algorithm, the search engine encourages sites to choose this system.
One of the main reasons is that the controller does not touch the URLs, making it easy to share them with other sites and avoiding duplicate content errors. Also, by keeping only one URL, a 301 redirect is avoided, improving load times.
Perhaps Google doesn’t promote responsiveness but favors sites that technically meet its requirements, such as no duplicate content or loading speed, which are not specific Mobile-First Index criteria.
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 landed on is not mobile; 71% of mobile users would even leave after waiting five seconds to load a page, too short and too long!
The bounce rate has thus become one of the most important criteria for mobile phones. A site with a responsive design allows you to reduce the bounce rate, which directly correlates with the ranking of your pages.
What are the disadvantages of responsive design?
No technique is perfect, especially for Google, which has an unfortunate tendency to contradict itself on certain aspects of mobile search engine optimization (SEO).
Responsive design is restrictive and requires a lot of technical knowledge for sites not managed with a CMS like Prestashop, Magento, WordPress, etc. Since pages on a responsive site must consider all screen sizes, they are more complicated to create initially. And to top it off, Google asks to serve only one dimension for each image, which goes against the very principle of responsive design. So, Google, are we a little wrong here?
In addition, this type of site with “hybrid” navigation should meet the needs of both desktop and mobile users. But the screen formats are so different that sometimes it can be difficult to satisfy everyone. Therefore, it is not uncommon to come across supposedly “responsive” pages that are not very user-friendly or even… ugly!
Lastly, there is also a lack of clarity on the different display needs.
Take the example of a home page, well-populated with great optimized text in the middle of the page.
This text does not impede good navigation on a computer screen, especially if the site is on full screen.
But on a mobile phone, our 500 words become indigestible and anti-ergonomic! Therefore, we might be tempted to truncate the text and display a “see more.”
However, Google said a long time ago that the hidden content in the “see more” is not considered for SEO. And today, it says that it can be taken into account on mobile if it has been hidden for UX reasons. Big Deal!
How can we ensure we will take it into account? And how can we know from which line we should truncate the text to be sure not to be anti-UX but on SEO level stallions? (That said, this issue is not specific to responsive design.)
The site in the mobile version
Mobile sites inevitably perform better than responsive sites because they have been designed specifically for small screens. But unlike the response, the mobile site requires a change of URLs. In general, the mobile version can be recognized by the small “m” that precedes the domain name (example: m.rankinggoal.com) or with a /mobile SEO slug at the end of the URL (rankinggoal.com/mobile).
Visitors are automatically redirected to the appropriate site version based on the type of device they are using. A dedicated mobile site is a condensed version of a desktop site. Its contents and functionalities have been streamlined so that visitors can access them as quickly as possible. Articles that are too heavy to upload, such as certain images or videos, are often removed.
What are the advantages of a mobile SEO site?
Mobile sites allow you to create “personalized” browsing experiences tailored to each device. For example, suppose your various analytics show that your mobile visitors frequently access certain information but rarely read your press releases. In that case, you can choose not to display them, which is not possible with a responsive site design.
Also, as this type of site is also designed specifically for mobile SEO, it is easier to develop. Indeed, it is always easier to start from scratch and build a site that meets our needs instead of adapting the existing one, which sometimes poses significant technical limitations.
Finally, due to their lightness and the simplicity of their code, mobile sites far outperform responsive sites in terms of loading time, which is noticeable by the fluidity of navigation and users who only have a small mobile package.
What are the disadvantages of a mobile SEO site?
A “light” version of a site inevitably implies certain deficiencies, particularly regarding certain content and information. It poses a problem, especially as many Internet users switch from one device to another, expecting to find the same content on their computer as they do on their mobile phones.
Additionally, mobile sites create a risk of redirect errors. Indeed, visitors maybe not be redirected to the mobile version, thus accessing a site that is not adapted to mobile browsing (and watch out for the bounce rate!). Also, having different URLs exposes you to certain complications in terms of net linking. Some people may share the wrong URL.
Finally, which says 2 versions of the site, double maintenance, and updates, everything has to be done twice. Some sites are configured to update automatically when the main site is updated, but this is not always the case. With new devices coming out every year, the mobile site also involves constant vigilance to ensure it remains relevant to these new smartphones and tablets.
The mobile app
Unlike responsive and mobile design sites, you Must download apps from specific portals like Google Play Market or the App Store. While they offer faster access to content and smoother interaction, they are not suitable for all sites. They are preferred for specific activities (for example, GPS or maps) or platforms that require dynamic content. Applications are also relevant to game sites and service sites (banks, insurance companies, etc.).
What are the advantages of the mobile application?
The No. 1 advantage is undoubtedly its practicality. It opens immediately from the desktop, loads instantly, and is very intuitive. It also allows you to configure push notifications and specific features that keep the customer engaged. From a business point of view, mobile applications are excellent support for marketing campaigns.
Another important advantage is that. I can use it offline. Being installed on a mobile device allows access to loaded content even without an Internet connection.
What are the disadvantages of mobile applications?
One of the main problems of the mobile application is that its operation 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. Therefore, these restrictions can directly impact the operation of the application.
Also, an application available on multiple platforms requires regular updates, which the user must download. And we know that internet users are sometimes lazy. Some people sometimes prefer to uninstall an app rather than bother with updates!
Avoid crevices that are too intrusive
Pop-ins and pop-ups have been on Google’s radar for several years because they are intrusive. They also interrupt navigation and can slow down page loading. Google now only allows certain gap formats that don’t completely hide the content the user came for. Therefore, mobile phones Should avoid as much as possible.
Make the site easier to read on mobile phones
For reading on a mobile phone to be smooth, there is only one watchword: sobriety and minimalism! It is important to avoid sudden font, size, and color changes. Also, when you want to integrate text into an image, it is important to do it in CSS and not by merging the text directly into the image. In this way, the text will be able to adapt to the size of the screen and will still be readable. Also, you should use negative space to build your page in terms of ergonomics. Negative space is the “white” space around elements on a page. It allows to ventilate the content and improve readability.
We are setting the View-port content tag and using HTML 5.
The Viewport tag is used to define the viewable area of a web page. Before the advent of tablets and smartphones, pages were static. Today, the size of the viewing window varies by the device because “static” desktop pages would be too large and their content unreadable.
HTML 5 marked a turning point in the page coding system and led to introduction of the “View-port” meta tag, which provides display instructions to browsers. It is applied as follows:
The width=device width part defines the width of the page based on the width of the device screen. Initial Scale = 1.0 represents the initial zoom level when the browser first loads the page.
Please note that. Should also use HTML5 for embedding video and animated content.
Using the tab bars
Tab bars, with their intuitive buttons, allow you to accept the different functionalities of a site quickly. You can also use them to encourage users to visit social networks.
Optimize your page titles
The number of characters displayed in mobile results is higher than on desktop (70 vs. 78 on average). So you can write longer titles, which will be truncated on desktop but more effective on mobile, which, let’s remember, is now the one that collects the most traffic.
Using structured data
Structured data is important on both desktop and mobile devices. On mobile sites, web admins tend to neglect them. However, they are great ways to grab the attention of internet users and push them to click, which will improve CTR!
How to improve the speed of your mobile pages?
The time it takes to load a page is an important factor on a computer and crucial on a mobile phone. If you want to optimize your site for natural mobile referencing, improving your page speed is one of the first projects you’ll need to tackle. It is a technical part that must be entrusted to a developer.
Reduce server response time
If the code influences the speed of a page, the server’s response time also plays a decisive role. The experts at Mobile 1st and those at Google and GTMetrix recommend that your server start transmitting the first resource byte within 200 milliseconds of a request. If you find that your server is slow, there are several solutions to reduce your 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 page speed
- 301 or 302 redirects consume precious milliseconds on mobile devices that rely on less efficient networks than ADSL or fiber. Google recommends that they be minimized or even removed.
Load content above the waterline first.
Just a word to upload content: priority to visible content! It is not useful to load the entire page before displaying it. Using techniques like lazy loading, you will be able to load only the texts and images that need to be shown first.
Put the JS at the bottom and the CSS at the top of the HTML files.
JavaScript, which is used for page interactivity, should be avoided. But when you have no choice, they should be placed in the background of the code, below the waterline, because they prevent parallel loading. On the other hand, CSS style sheets condition a good page display, so they must be loaded first. Also, best practice requires CSS and JS files to be minified to reduce the moving page’s weight further. “Minimizing” removes redundant or simply irrelevant data without affecting the display of a page. There are several tools available to detect this data and sanitize your code.
THE MPA
AMP is not a method to improve your loading speed, but it does have the same effects. The AMP format is, in fact, a very restrictive ultralight HTML code (it does not tolerate JS, for example). Therefore, the pages are loaded at high speed and cached by Google. They are particularly suitable for blogs and other news sites. E-merchants who need interactivity have struggled (even just adding it to the shopping cart) despite AMP’s increasing integration!). However, some have tried it, like eBay, who use AMP for their category pages.
How do I know if my site is optimized for mobile SEO?
Check performance and page layout.
To make sure your site is mobile-friendly, there are several tools, including some developed by Google:
The Google search console: alerts you in case of anomalies.
Google’s mobile optimization test: highlights usability errors.
GT Metrix and Pagespeed Insights: Indicates the status of your site in terms of load time and resource usage. It also highlights the various slowness issues (overly heavy images, poorly positioned JS, etc.).
Chrome and Firefox advanced options that allow you to see the rendering of your site on mobile (right mouse click or the keyboard shortcut “Ctrl + shift + i”).
Measuring your CTR and bounce rate
As we mentioned earlier, click-through rate and bounce rate can be indicators of the relevance of a mobile site. It is interesting to compare them with the CTR and the bounce rate of the same pages on the computer. Using Google Analytics > Behavior > Site Content > Landing Pages, you can do this. If one of your pages shows a higher bounce rate on mobile than on desktop, you likely have display anomalies.