Table of Contents Hide
In 2016 Google introduced the Mobile-first index ranking algorithm. First of all, the emergence of this algorithm is due to the fact that more than 52% of all queries in the Google search engine are performed from mobile devices. This affects the indexing of sites, because the user does not just need to see in the search results the answer to his question, but to see that answer in a qualitative representation. Without a mobile version of the site or adaptive design this cannot be done.
After the algorithm came into force, a separate index for mobile devices was not created, but the priorities in the existing one changed. This led to the fact that the priority in the search engine results was given to sites fully optimized for mobile devices.
For this post, I’m going to talk about the base that must be implemented on every site to meet the Mobile-first index.
1. Optimize the display of all elements on the site
One of the biggest differences between desktop and mobile devices is the user experience of interacting with a web resource. On smartphones or tablets, people use gestures and finger taps to interact with content.
Consider all elements of site navigation, as well as the display of images, fonts, and interactive elements. Check the display of content on the site so that it is not wider than the screen of users’ devices. Any errors related to the display of images and fonts can be viewed using Google Search Console in the Mobile Friendliness tab.
Search Console analyzes the site and gives you a list of errors related to the adaptive or mobile version of the site.
Clicking on any tab, such as “Wider Screen Content,” will display a list of URLs that have problems.
Thus, it is necessary to correct all bugs related to the convenience for mobile devices.
It is especially important to check the site for errors, if you change the layout of the site or the entire template, as well as if you use a CMS system.
2. Code and Image Minification
Minification in programming languages – the process aimed at reducing the size of the source code by removing unnecessary characters without changing its functionality.
Minify code on the site allows you to increase the overall loading speed of the site. This is an important indicator, because, based on research Kissmetrics, the user waits no more than 3-5 seconds and just closes the tab, which can be a big loss in traffic.
It is necessary to compress images on the site, as large files greatly increase the weight of the page and site as a whole. You can use the TinyPNG image compressor – it allows you to compress images without loss of quality. Also from the recommendations of Google PageSpeed Insight that it is best to use new image formats, such as:
- JPEG 2000.
- JPEG XR.
Images in these formats require less mobile traffic to download and use more efficient compression algorithms.
The webp image format is now supported by all modern browsers, so you can easily embed it in your site. Check compatibility here – https://caniuse.com/webp.
3. Proper use of fonts
An important factor is the size of the font used on the site. Surely you have come across a site that uses a small font, and you have to scale the screen to read the text. This affects behavioral factors. Even if the user has read the material to the end, they won’t click through to other posts or pages. As a result, the site gets a high bounce rate in Google and fewer sessions.
Colors should also be used readable, no need to make a large color palette in your posts or information pages.
You can read more in the Google PageSpeed Insights “Fundamentals of Responsive Web Design” guide.
4. Appropriate design
- Start developing a Mobile Friendly site by creating a site layout to understand what you’re going for and how the site will look on different types of devices. For example, great programs for creating a layout → Sketch and Adobe Photoshop.
- Use only adaptive templates on your sites, especially if you work with WordPress. At the moment there are a large number of free and premium templates that can help make a site beautiful and lightweight.
- Adaptive and responsive designs are based on creating sites primarily for mobile devices rather than for the desktop. In this way you can avoid incorrect display of elements on the pages of the site.
- Remove all unnecessary functionality that burdens the site. For example, many webmasters leave the functionality of WooCommerce in WordPress templates, even if they know that they will never do an online store on their resource.
- Try to use only SVG (vector) icons and images, at least in key areas of the site, because they do not lose quality when scaled and will look great on any screen diagonal.
- Adjust the Viewport meta tag so that the zoom value is 0.5 on screens of 640px and smaller, and 1 in other cases. This will avoid “Content is wider than screen” errors on smartphones with small resolutions.
5. Implementing AMP
Accelerated Mobile Pages is an open source mobile acceleration technology. It allows fast loading of web pages at low network speeds.
Such pages appear higher in search engines than others, because they meet important requirements: they quickly load and are adapted to mobile devices.
The AMP creation plugin does not solve all problems at once – it is only 20-30% of the total case. Here you need to pay a lot of attention to page design and the display of interactive elements.
6. Technical optimization of the site
The site for mobile devices should be:
- without elements that require Flash Player;
- without drop-down menus or with fully optimized menus for smartphones and tablets.
Not all devices currently support flash elements that can be loaded on the site. For example, when using a smartphone with Google Chrome browsers, most flash elements simply will not be displayed because there is no flash player support. This is where HTML5 comes in, allowing you to replace everything you need to present information to the user, whether it’s interactive elements or audio and video players.
I’ve noticed many times that webmasters fail to properly optimize menus for mobile devices. For example, when clicking on a dropdown menu, the page simply reloads, which prevents the user from getting to the right page, and then he leaves the site.
It’s best to use a one-step menu or anchor (#) in the right menu items. This will not only retain the user, but will also have a qualitative effect on user experience and behavioral factors.
7. Optimizing the mobile version of the site in terms of SEO
If a webmaster decides to create a separate version of the site optimized specifically for mobile devices, he should definitely perform the following steps:
- Place a rel=”alternate” tag on every page of the desktop version of the site that leads to the corresponding page of the mobile version of the site.
- Place a rel=”canonical” tag on every page of the mobile version of the site that leads to the corresponding page of the main site.
Example implementation for site.com:
<link rel="alternate" href="m.site.com" /> - for the desktop version of the site. <link rel="canonical" href="site.com" /> - for sites for mobile devices.
All the necessary information can be found in the official Google help.
- The process of optimizing the site for the Mobile-first index algorithm is long and ongoing.
- You should always check the site for errors, both with Search Console and by tracking user interactions.
- In this reality, the site will not be able to take the first positions in Google search results if there is no mobile or adaptive version of the site, as well as without SEO-optimization of the mobile version.
- Introducing AMP technology will allow your site to load faster at low network speeds.
Is it worth spending time and budget on these changes – definitely yes. Tell us in the comments about how you optimized your site for Mobile-first index 😉