Mobile-First Indexing: What it Means for Your Website

In recent years most retailers have adapted to the rise of mobile users by tailoring their websites, either utilizing a standalone mobile version or a responsive design.

Looking back to November 2016, Google announced plans to fundamentally change how they crawl and index the web because searches from mobile devices had finally outpaced those made on desktop. It made sense for Google to experience websites in the same way as their largest user group did, and in turn doing so would allow them to provide better search results.

The shift to a mobile-first approach has rolled out gradually ever since and by December 2018 already over half of the websites included in Google Search globally were crawled and assessed using mobile-first indexing. Since 1st July 2019, every new website not previously known to Google has been automatically included in the scheme.

What does mobile-first indexing actually mean?

Google crawls websites to discover new pages that it can include in its index. Based on its last crawl of a page Google will decide if it is relevant to a particular search term, and if so where about in the results it belongs.

There’s a lot of ranking factors which Google use to help them decide where to place a page in search results. A large portion of these are what’s described as ‘on-page’. This includes content that is visible to the user, including any bodies of text, meta data, etc as well as that which is not, like structured data and page speed.

Mobile-first indexing means that Google will load each page it crawls on a website as though it were visiting from a mobile device. If a website is not mobile optimized it doesn’t mean that it will not be included in Google Search results at all, but it could see the website ranking less favourably than competing websites that are, particularly when comparing mobile search results to those on desktop.

The website’s already mobile-friendly, is that enough?

Not necessarily. Imagine a content team has spent a lot of time optimising a website for SEO but they’ve used the desktop version as the basis for laying out that content. During the development of the mobile-site or responsive design, decisions may have been made that omitted that content, reduced it in length or reorganised it in a way that its impact was reduced, all for the purpose of working well on a mobile device.

With Google assessing the mobile offering by default, a website might not be reaching its full ranking potential if SEO ranking factors have been sacrificed or removed completely.

Design with a mobile-first approach

To combat discrepancies between how a website might appear on mobile vs desktop a good approach for developers and SEOs is to design and optimize using a mobile-first approach. This means content, design and UX arranged for mobile, but also considering other factors such a page load speed.

Using this methodology will ensure that users and crawlers alike have access to a truly mobile-optimized version of the website, rather than a desktop site which has been modified to be mobile-friendly. Designing in this direction will make it less likely that content is reduced or removed entirely, which as we know might have an impact on search engine optimisation.

Types of mobile site

There are three different ways of working when it comes to creating a mobile website, the m-dot method, responsive design or an adaptive / dynamic serving method and we’ll take a brief look at each below.

M-dot

An m-dot site as it is known, is a dedicated mobile-friendly version of a website hosted at a different address to the main website. This is usually a sub-domain such as m.domain.com, hence the name.

An m-dot site will allow the creation of an optimized mobile-friendly design which will be triggered when users on devices with screens beneath a certain width access the site.

Some of the drawbacks of this method include the fact that a sub-domain is considered a different website to that of the main domain. Content will need to be the same as on the desktop version and some technical SEO aspects will need to be implemented, such as canonicals and alternative link elements in the source code, amongst other recommendations.

Having the website on a sub-domain also has SEO implications, particularly with regards to external links coming into the website and how the benefits of those links are attributed, because by default they will not count towards the link profile of the main domain.

Having a separate m-dot version of the website can be a lot of work and effort to maintain as it’s essentially a separate website but it will be important that its content reflects that of the desktop version.

Responsive design

A responsive design is one that rearranges itself based on the screen width of the user. The benefits of this type of website include it being low maintenance, as there’s only one version to manage. It will also ensure content is the same on desktop and mobile, so long as modifications have not been put in place to hide content on the smaller screen sizes. This risk is eliminated if the design and optimisation has been carried out with a mobile-first approach as discussed earlier.

This design type uses a single domain, so any links built based on an experience with the mobile or desktop versions will see attribution given to the primary domain.

A drawback of a responsive design is that all elements are downloaded no matter the screen size, so for example a full-size image will still be downloaded and need to be resized using CSS. This is despite the user accessing with a mobile device where the full-size versions of an image will not be necessary. That said, there are ways to mitigate this. Developers can use the Picture element of HTML5 which allows them to supply a range of different sized images. The browser can then choose which image to download based on the user’s screen size. Luckily, modern versions of browsers support the Picture element.

Due to its simplicity and reliability a responsive design is Google’s recommended method.

Dynamic serving

Like the m-dot method, dynamic serving sees different versions of a website created for different audiences depending on their screen size; desktop, tablet or mobile. Unlike the m-dot method, dynamic serving does not use a sub-domain to host a separate website, rather the user-agent of the device is taken into account. That is to say whether the user is accessing via desktop, tablet or mobile, and then the server responds with customised HTML and CSS for that device category.

The benefit of dynamic serving is that user experience can be intricately tailored to each type of device and the server will only require the downloading of elements optimized for that category, potentially paving the way for reduced load times.

Like a responsive design, as dynamic serving uses a single address, and links built will benefit the main domain and not split resources as it does by default for m-dot sites.

Whilst dynamic serving has potential, it’s certainly more complicated to implement than either of the other two options. A dynamic offering will require the maintenance of at least three codebases in order to properly adjust to the demands of the individual device categories. User-agent detection can also sometimes result in an error and the user being served the wrong version of the website, which is bad for user experience.

Takeaway points

Google’s mobile-first indexing means it’s more important than ever to have an optimized mobile version of a website.

Content and on-page optimization should be the same on both mobile and desktop versions of a website. Designing and optimizing with a mobile-first approach will ensure that this is the case.

Choosing which method to use to deploy a mobile site is tricky and will depend on several business factors. That said, Google’s recommended method is a responsive design due to its low maintenance and reliability.