Как переход к Mobile First влияет на традиционный процесс создания веб-сайтов.

Google has two main indexing bots (actually there are more, but you will find the full list below in the article, and for now let’s focus on these two): for desktop and mobile devices. These bots visit your site, scan it, analyze the content, and upload pages to their servers. Then, based on the data they receive, they decide whether your site’s pages participate in ranking for user queries.

Previously, the relevance assessment of URL content was based on data obtained from desktop Google User-agent. Now, the mobile Google bot will first visit the mobile version of your site, and the quality of this version will determine the ranking of the document.

The placement of CTA elements, a clear offer on the first screen, loading speed, clear and convenient navigation for a smartphone — these and other nuances of user experience should be considered first.

Here is the question: how to view your site from the perspective of Google’s mobile bot? To do this, you need to use the Webmaster panel. Select «URL Testing» and submit the selected page for testing.

As we can see, our test subject is available for indexing. Here we will click on «View Tested Page».

In addition to the screenshot, you can also view and download the HTML code, as well as find out data on JS loading

By the way, to view any site page from the perspective of Google’s mobile bot, simply use the «Rich Results Test».

This is not the only way to view a web resource from the search engine’s perspective. If you don’t have access to Search Console, you can use the Chrome extension — SEO All Stars tools.

Here you can quickly see the difference in the HTML code of the page for search and users

Conclusion: Mobile First indexing means that Google prioritizes the indexing of the mobile version of your site. And this is very important for SEO. If you expect to get traffic from organic Google search results, you need to ensure the maximum efficiency of your site’s mobile version.

What does the interaction of our URL look like with other Internet participants:

Request structure:

• HTTP request method;
• URL address;
• protocol version — either HTTP/1.1 or HTTP/2.

Example of a request

The request header will already contain the familiar User-agent element. And now, the main Google crawler addresses sites with the Google Smartphone value.

All Google bots include:

1. Googlebot Smartphone.
2. Googlebot Desktop.
3. Googlebot Image: examines images for Google Images and related products.
4. Googlebot-News: indexes news articles.
5. Googlebot Video: processes video content for Google Video and related products.
6. Google StoreBot: browses product pages, shopping carts, payments, and similar pages.
7. Google-InspectionTool: used in Search Console testing tools to check rich results and URLs. In addition to user-agent and token, it simulates a Google bot’s work.
8. GoogleOther: a universal search bot used by teams to obtain publicly available content from sites.
9. Google-Extended: a new token that allows web publishers to specify optimization support using Gemini and Vertex (API for generating content using AI), as well as subsequent generations of these neural networks.

If you used Screaming Frog to parse the site, you may have noticed that it can simulate requests from various user-agents.

Screenshot from Screaming Frog

So, we’ve covered the first part. But where there is a request, there will be a response.

Example of a server response

In the server response, the status code will be reported: 1xx, 2xx, 3xx, 4xx, 5xx. And the status: Ok, Found, Bad Request, Forbidden, Not Found, Internal Error.

Next comes the response header. It contains information about the web server that processed the request (nginx or apache), a unique value for client cookies, and authentication type.

And then comes the response body, which will contain the HTML code of the document.

Response code of the main page of a well-known site

The content scanned by the Google bot Smartphone user-agent is either included (or not included) in the search index, and then participates in ranking for queries.

Despite the fact that Google announced the completion of the transition to prioritizing mobile content indexing on October 31, 2023, in the Google Search Console, you can still see that Google Desktop is interested in the site.

This is how Google Desktop explores your site

What problems could be waiting for you? Most problems are related to adaptation features. Let’s start with the types of mobile page versions.

Responsive Web Design (RWD) or adaptive design. The most popular and convenient option. It is an approach where the website dynamically changes its layout and sizes depending on the device’s screen size it is viewed on. This allows the site to display optimally on both desktops and smartphones without the need to create separate mobile versions.

HTML management is done through the «@media» rule in the CSS file. It will specify how the page layout should change depending on the device’s screen.

Google recommends using this approach.

Desktop version VC

Mobile version VC. As we can see, the menu moved down for the user’s convenience, and magically, an advertising banner appeared

Dynamic serving. A more complex mobile version model. Here, programmers prepare HTML and CSS files in advance, which can be served to the appropriate User-agents.

Dynamic serving scheme

Where to get information about Google bots? Here is a collection of all search robots. In your robots.txt file (and in the meta tag), simply allow access for scanning by Googlebot. Thus, the Googlebot Smartphone scanning the site will be given a certain Mobile-version.css and Mobile-version.html, and it is this version that the robot will use to evaluate the page’s content.

Different resource addresses. Separate mobile websites are versions of websites designed specifically for smartphones or tablets. They usually have their own URL (for example, m.site.ru) and may have different content and layout compared to the main desktop site version.

As with dynamic serving, the server evaluates the client’s request based on the User-agent and HTTP header. In this case, instead of replacing CSS with mobile versions, it redirects to a separate site on a subdomain. If done correctly, you will see a link to it in mobile search results. The method with different URLs is the most labor-intensive and fraught with indexing and ranking issues.

During the creation of the mobile version of the site, errors may occur that will hinder the site from ranking in search.

Closing the mobile version from indexing. The error is more likely accidental but possible. Open your m.site.ru/robots.txt and make sure the site is accessible to the robot. You can also check accessibility using the «Google» tool — URL check.

Google’s URL checking tool

Similarly with the Meta tag with the Robots attribute. Check that there are no and values on the selected pages.

Closing CSS files from the robot. A bit more complex. The necessary CSS and HTML files ended up in another folder that was accidentally closed. And now the robot will not receive your mobile version.

Hiding part of the desktop content in the mobile version. Suppose you decided to remove some text or an image gallery for user convenience. Quoting Google’s help: «Google doesn’t always find content that requires user action to load. For example, flipping through a page, clicking a button, or entering text.»

The problem here is that different user-agents will receive slightly different versions of the same document. And since the mobile version is prioritized for assessment, hiding content in this way will affect the ranking of the URL.

Systematized data. Check if the data in the structured data markup matches between different page versions. Study the breadcrumblist, product, and videoobject data and check the correctness of the URLs in the markup. You can conduct a test here. Choosing the Inspection Tool allows you to separately check both the mobile and desktop bots.

Checking a page for support for rich results

Most often, when developing a website or implementing updates, all participants start from the desktop version and adapt it for smartphones. But what if we take a different path and first approve the design of the mobile version? After all, most visitors are likely to interact with it.

Think about user convenience. Suppose your page has a video, which is the main reason most users come to it from search. The video is on the first screen of the desktop version, and the user sees it right away.

Now imagine that you also place advertising blocks on your site. In the desktop version, they do not cover the useful content area, but in the mobile version, the user may have to scroll down several times to reach the desired video. This is an example of poor user experience, and thanks to Mobile First indexing, it will lower such pages in search ranking.

Optimize images. Images can take up a significant portion of traffic, so pay special attention to them. For example, modern image formats, such as WebP (try downloading product images from major marketplace sites, and you will see that they have already switched to this format).

And to get information about the «lab» values of your page load speed, use Pagespeed:

1. Use clear images, but compress them with minimal loss of quality to reduce loading time.
2. Create a special sitemap with images and videos (if any).
3. Implement Lazy Load for images (defer image loading until the user reaches them) to increase site speed and save traffic.

Information about site loading from «Zen»

These results are due to the high LCP (Largest Contentful Paint) value — the time it takes for the browser to display the largest visible element on the screen.

The countdown begins from the moment the user requests the URL. The largest content element is usually an image or video, but it can also be a large text block

Without going into the technical details of the metric, LCP is mainly influenced by:

• server response speed;
• JS and CSS optimization;
• image optimization.

By working on these points, you will significantly improve the LCP value.

Mobile First Indexing is a reality that reflects technological progress. The mass transition to smartphones has predetermined a change in the approach of the largest search engine to indexing sites. Who needs to take this fact into account? Everyone who wants to get organic traffic from Google.

Today, it is difficult to find a site without an adaptive version. This applies not only to business sites aimed at lead generation and sales but also to the public sector. Mobile versions of sites like «Nalog.ru» or the Ministry of Health are fully adapted for smartphones.

The key question is: is it enough to simply create a simplified adaptive version of the desktop, or should the website creation process start with Mobile First? There is no definitive answer. It all depends on your product and niche.

For example, if you work in B2B, then most likely, your clients are company managers who will interact with the site during business hours on a PC. In this case, it is better to focus on the desktop version to get a request. But if you provide services for urgent lock repairs or tow broken cars, the quality of the mobile version will directly affect conversions.

But regardless of the type of business, we recommend considering the features of responsive design at the layout design stage, taking into account the technical implementation nuances, and ensuring fast loading speed. Then you can count on good site ranking and high traffic conversion.

Photo on the cover: Freepik

Поделиться ссылкой: