Are you ready for Mobile-First SEO Indexing?

In a recent post, we wrote about Google’s new bots that crawl the internet and examine content the way mobile (smartphones primarily) devices would consume content. Back in our post from July 2019, (Page Speed and Mobile-First Development DO Improve SEO Rankings), we shared important data about how Google uses mobile-first data to determine SEO standings. While that data was pivotal for many clients sitting on the fence about updating their SEO strategies, the latest statement from Google to re-index the entire web with mobile-first indexing represents a seismic shift in search engine rankings. This shift is a crucial factor for your company website.

Before we get into the actual results, we should share what mobile-first means and why it is so important. Our previous post will help anyone see why mobile-first is critical for any website. Mobile-first is not just about grabbing the latest bootstrap build and creating a responsive website. It is the methodology that determines how you build websites. For example, let’s consider the HTML5 <picture> element along with CSS media queries.

The HTML5 <picture> element allows website authors to include multiple media sources, including one fallback, for browsers to select when displaying the web page. During the process of rendering a webpage, the browser sends a request to the webserver, then subsequently receives a response. The response is the HTML file that acts as the entry point for the website. The browser then parses (reads) this document and sends additional requests for any other image files and data the browser requires to render the site.

The HTML <picture> tag allows authors to create statements for conditional loading of subsequent resources based on the types of media they require. The code looks something like this:

<picture>
<!-- For large screens.  This can be further optimized by creating more min-width steps and media sizes-->
     <source media="(min-width: 1200px)" srcset="img/logo_2772X1401.webp" type="image/webp">
     <source media="(min-width: 1200px)" srcset="img/logoogo_2772X1401.jpf" type="image/jp2">
     <source media="(min-width: 1200px)" srcset="img/logo_2772X1401.webp" type="image/jpg">

<!-- for screens between 768 px and 1199px wide -->
     <source media="(min-width: 768px)" srcset="img/logo_1200X606.webp" type="image/webp">
     <source media="(min-width: 768px)" srcset="img/logo_1200X606.jpf" type="image/jp2">
     <source media="(min-width: 768px)" srcset="img/logo_1200X606.webp" type="image/jpg">

<!-- screens under 767 px wide -->
     <source media="(max-width: 767px)" srcset="img/logo_768X338.jpf" type="image/jp2">
     <source media="(max-width: 767px)" srcset="img/logo_768X338.webp" type="image/webp">
                
     <!-- fallback. Mobile first! -->
     <img src="img/logo_768X338.jpg"
                     class="img-responsive ws-img-res"
                     alt="Webstation Global Business Solutions - mobile apps, web apps and IoT">
            </picture>

This code illustrates a few critical elements. First, the requests can be optimized based upon the specific size and MIME-type of media required. 

Google’s mobile-first audit tools like Pagespeed and Lighthouse, when used to audit a website, will often complain when websites serve images in non-optimized, next-generation formats like webp and jpg2000. Since web browsers do not universally support these next-generation formats, website authors have to approach this problem differently than in the past when you just declared an image tag with a static source. You can configure the webserver to serve different assets based upon the types of clients and devices requesting the data. 

Note in this file that the fallback size for the image is the mobile one, and we use incrementally larger min-width conditions to allow larger device screens to select alternative results. This approach is part of mobile-first development.

Now consider CSS media queries. There are two ways to write these (mobile-first and not optimized for mobile). The first approach is to design for desktop devices, and then make a series of declarations for smaller sizes. This approach is the anti-pattern of mobile-first development, as shown below:


The code above shows the two (rather verbosely-named CSS classes) are configured for desktop screens first, but then we can find special rules for smaller screens. A better way to accomplish the same behaviour for mobile-first development is to write your code as shown, using the base CSS rules for mobile, then to scale up for larger screen devices. Note the mobile rules are the default, and the larger screen sizes are the alternatives.


Why is this a better mobile-first development approach? The exact mechanism is rather complex; however, when algorithms execute using conditional logic, most languages do not keep items in memory once the browser encounters a positive programmatic condition. Sometimes, the code is ignored in the remaining blocks once the browser establishes a decisive match for the user’s device. There are many more aspects of this approach that we use every single time we write code at Webstation. Minifications, screen-optimized media and a host of other items all make a significant improvement for mobile-first experiences, which are today the primary SEO ranking experience.

Google’s analysis is that approximately 70% of indexed websites are on the path to mobile-first optimizations. Many of the search results you see today already reflect this. Now for the kicker! 

Google’s announcement included this nugget of information:

“To simplify, we’ll be switching to mobile-first indexing for all websites starting September 2020.”

When Google switches to mobile-first indexing, domains will see an increase in Google bots crawling websites. Subsequently, Google will use that analysis to update the Google Search engine ranking index and your position in search engine rankings based primarily upon the quality of your website’s mobile experience.

Google’s guidance is highly relevant for new and existing sites. After studying Google’s work, we highly recommend optimizing your content and web code for the types of devices your users are using to visit your website. It would be best if you optimized all text, alt-text, metadata, meta tags, titles, descriptions, images, and video code references.

This update in Google’s search indexing strategy reaffirms Webstation’s recommend that companies adopt a mobile-first development methodology first for your website.

If you would like a free site audit or you have questions about how this might affect your website, please do not hesitate to reach out and ask us questions. Our experience on these matters spans decades, and we’re here to help your business succeed.


Leave a Reply

Your email address will not be published. Required fields are marked *