At the end of March 2018, Google informed on its official blog about gradual migration of websites to mobile-first indexing. This means that organic search results will eventually be standardized for all devices based on a mobile-first index. Therefore, it is getting more popular to design websites tailored first and foremost to mobile devices and only then to scale them for desktop.
It is worth knowing how to mobile-optimize your website. Mobile optimization makes websites light, quick and intuitive, just like Google recommends and mobile-first indexing requires.
How to mobile-optimize a website?
Google's official guidelines in this respect are as follows:
1. Avoid the mobile version at a different address: m.website.com
It is advisable to use responsive web design which allows websites to adapt their layout and the width of website elements to the display resolution of a device used. It makes it easier to change the website in the future because there is only one website version to edit.
2. Structural data and metadata should be visible on both website versions
Having structural data is extremely important – by putting relevant markers beside pieces of content, Schema.org directly influences the learning process of Google crawlers. It helps them better understand website content and gather network information. Such information allows them to show relevant elements in search results, e.g. addresses, prices, reviews or opening hours.
3. Make sure that rel=canonical and rel=alternate are used correctly
Google crawlers will be able to more easily find canonical pages and relevant language versions on various devices. This way you will avoid duplicates on the website.
In addition, it is worth using rel="next" and rel="prev" attributes for pagination pages to be considered as a logical sequence. This way, we explain to crawlers that each and every following page is a continuation of what is on the previous page.
4. Make sure that your website loads quickly
Fast loading websites are ranked much higher. The longer it takesfor your website to load, the more probable it is that the user will give up browsing it in the end.
According to studies by Kissmetrics.com, as many as 47% of people expect a website to load in less than 2 seconds, and 40% of them will give up using a website if it takes more than 3 seconds to load it.
The loading speed of a page can be easily verified using Google Page Speed Insights. A PageSpeedresult can be within a range from 0 to 100 points. The higher the result, the better. A result of at least 85 points means that a given page works well.
An example of a website layout that uses Responsive Web Design.
Free-of-charge website optimization tools for mobile-first indexing
Obviously, owners of websites focused on desktop users do not have to worry too much for the time being. However, mobile-first indexing efforts have not been undertaken by Google to make our lives difficult. On the contrary – it is supposed to improve user experienceand we should think of it this way. You do not need any sophisticated and expensive tools to optimize a website. There are free-of-charge Google developers tools:
Mobile-Friendly Test Tool
The Mobile-Friendly Test allows to inspect each and every page of a website in terms of mobile-first indexing. You will learn whether the website is mobile friendly, and if there are any issues or if any resources are blocked, a transparent list will be generated:
The Chrome DevTool is one of my favorite tools I use every day for various purposes. Just enter Ctrl+Shift+I on a given website in Chrome browser to open DevTools.
By clicking the highlighted red icon, you go to the website layout on any mobile device. You can choose a resolution and a device model. You do not need to go through pages of a website on a smartphone to verify whether all the elements display correctly.
What is more, since it is possible to make changes to the source code (without actually affecting the website, all such changes are done only to a preview displayed), we can verify individual elements, move them, delete them or add new ones.
Google Search Console
Prior to designing any page, it is worth accessing Google Search Console. In the search traffic tab, there is the mobile usability function. GSC can generate an extensive report on all the indexed elements that may affect user perception and experience. Below are example reports on mobile usability issues:
Based on the foregoing data, it is easy to find problematic resources that hinder the use of a website on a mobile device in some way and subsequently to fix them.
Structured Data Testing
As I have already noted, structural data are an essential element that needs to be implemented properly. Naturally, they have to be the same for the desktop version and the mobile one. Google rose to the occasion and made available another simple tool for structured data testing. Just enter a URL of a page and a piece of the code to be verified.
How to mobile-optimize a website? Summary
You already know how to tackle optimization in terms of mobile-first indexing, but do not forget that algorithms are updated on a regular basis. Any information we are now receiving is a suggestion to make websites more mobile friendly. No one is 100% sure yet whether mobile usability will become the main ranking determinant in the distant or even near future and whether mobile-first indexing will be a requirement to be ranked high in restricted search results. Google likes testing various solutions, just like it was the case with the length of meta descriptions; you can read about it on Yoast.