How to Optimize Your Website for Google’s Mobile-First Index

Date:

Understanding Google’s mobile-first index is cited as the most significant change. The new index will look first to the mobile version of your website for its ranking signals and fall back on the desktop version when there is no mobile version. This has huge implications for SEO and is a large reason why every website should be implementing responsive web design. With a responsive site, there will be no need to make changes to your SEO or worry about maintaining the mobile and desktop versions of your site. A responsive site is the easiest way to adapt to the new index. Any company that has taken the time to optimize its mobile site has also found that it has improved their desktop site. The reason being is that the changes made to increase the site speed and usability also improved upon the desktop site. Any site that has not yet gone through the mobile optimization process has a new project on its hands. The first step is testing to see if the mobile and desktop site have parity. Below are some tools to test your mobile site. If there is disparity between the two, it’s time to act. It’s important to remember that the new index will not have a separate mobile index. The lack of a mobile index is a reason to simply have a responsive site and not a mobile and desktop site. Having separate mobile and desktop sites is also a thing of the past. Any site on that configuration needs to migrate to a single responsive site.

Mobile optimization is the process of ensuring that visitors who access your site from mobile devices have an experience optimized for their device. Before, companies had one site for desktop and another for mobile. Today, responsive web design is the best way to create an optimal viewing experience for users. It makes your site easier to view and navigate, can increase the number of visitors who return to your site, and can help you improve your rankings in search engine. An important reason to make your website responsive is because mobile usage is continually on the rise. In fact, a study shows that in 2014, mobile usage surpassed desktop usage for the first time. With mobile constantly increasing in usage, and being a high priority for Google, it’s now more important than ever to have a responsive, mobile-friendly site. Mobile optimization rethinks site design, site structure, page speed, and more to make sure visitors from mobile devices have a fast, enjoyable experience.

Importance of Mobile Optimization

If you do not have a mobile site or if your responsive design is consistent across both mobile and desktop, you are unlikely to encounter any problems. For everybody else, this change is a reflection of a swift kick into 2017 where it’s no longer enough to have a semi-functional mobile website with limited resources. In conjunction with this, Google has also started to experiment with the mobile-first index, which is going to be rolled out sometime in the next year. This can be accessed to see if your site has been moved across to the new index.

Mobile optimization is the practice of ensuring that your website is perfectly tailored to meet the expectations of the growing mobile market. As you may already know, mobile search has now overtaken desktop search, and so it is no surprise that Google has announced this shift to a mobile-first index. This means that the mobile version of your website will be considered the primary version, and if it is not, your website rankings will be adversely affected. If your mobile presence is lacking, it will still be represented in the desktop site; however, this is now more likely to result in a drop in rankings.

Understanding Google’s Mobile-First Index

Responsive sites are in no immediate danger as a result of this, seeing that if a site does not have a mobile version readily available, the desktop version will be included, and companies with separate desktop and mobile URLs will see that the mobile version will be replacing the former. However, regardless of this, it should give even more reason for developers of all sites to start incorporating mobile site changes into their development to ensure they don’t get left behind in terms of ranking. With Google aiming to move all sites into a mobile-first experience, the mobile-first index is intended to improve the overall content for the global users of the internet, whether it be removing outdated content or increasing the relevance of new content. This is to bridge the gap between mobile and desktop content and ensure all users receive the same content no matter what device they are using. So it is important to understand that the change is not only affecting the webmasters themselves but will benefit all users in the long run.

In December 2017, Google decided to roll out the mobile-first index and announced it in March 2018 due to search console notifications being sent out. This was the next step in improving user experience on mobile devices and aimed to reflect the change in user habits when it came to web content. This means that the mobile version of your website becomes the starting point for what Google includes in their index and the baseline for how they determine rankings.

If we understand Google’s love for mobiles and other such mobile devices, we should know that it isn’t completely out of the blue. Google has observed trends based on customer demand and impact on content and has gone through extensive experiments to ensure that the best use is made of this change in making the world more mobile-friendly. After seeing that the trend of mobiles had made a huge impact on how people access the internet, Google made the decision to improve user experience on mobile devices. This resulted in the builders and developers of sites starting to make changes to make their sites mobile-optimized. However, despite this change, there was still an imbalance in the ratio of mobile/desktop content.

Key Factors for Mobile Optimization

The first thing to consider is making sure Google’s bots can crawl your site and see your content. This is as important as making a good user experience. When it comes to the mobile version of your site, you should make sure it has the same meta robots tag as the desktop version. For example, if the desktop version has “index, follow”, the mobile version should also have an “index, follow” meta robots tag. If the desktop version isn’t available, the mobile version should be treated as the primary version of your site. This includes making sure that your structured data and meta data are present on both versions of your site. The same goes for your robots.txt file. If resources are blocked on certain URLs for mobile devices, removing the rule from the robots.txt on the mobile version will allow the resources to be crawled. See the mobile-first best practices for more tips on making sure your site’s mobile and desktop content are equivalent.

Responsive Design

Responsive design is Google’s recommended design pattern aimed at combating mobile crawl issues. A site utilizing responsive design serves the same HTML for all devices and uses CSS media queries to determine how the content is rendered on the client side. This removes the prevalent issue of mobile-only and m. sites serving different content and receiving incoming links to different URLs, diluting ranking signals. Google has clearly stated that responsive design does not carry a ranking benefit, but it is a much-preferred solution from a mobile optimization perspective and straightforward to implement. If responsive design is not the best solution to the site’s problems and a mobile site must be served, Google has published clear guidelines on how to implement mobile sites. Throughout this article (and the linked resources), Pierre Far details Google’s recommendations for mobile site configuration and explains mobile site best practices, URL structure, and the relationship between a mobile site and its desktop equivalent.

Page Loading Speed

The rate of users accessing your page varies from using a high-speed network to a low-speed network. If your page is heavy, there will be a longer loading time when using a low-speed network, but the time difference is not very significant when using a high-speed network. To address this issue, the mobile version of the webpage should use a different approach in displaying the mobile version from the desktop version. Use a light version to display the mobile version, containing only important information compared to the full version, which contains heavy scripts such as flash and widgets. Another alternative is to use a mobile app instead. By creating a mobile app, you can display optimized content by consuming less bandwidth and notify the user when there is an update on your site.

A key factor for mobile optimization is the page loading speed. It sounds simple, but the rate of page loading also has a big impact on user experience. A delay of less than a second would lead to a long-lasting impact on user experience. According to Google, 53% of users will leave a site that loads in more than 3 seconds. Therefore, improving the rate of page loading will result in better user experience and increase the retention rate of users accessing the website.

Mobile-Friendly Content

Google’s preference is responsive web design, but other methods can be used. A mobile adaptive site is set up on the same domain as the desktop site but serves different HTML code to the user when they detect a mobile device. This configuration is bad for SEO because it requires the site owner to have two separate versions of the same site, i.e. example.com and m.example.com, with different URLs, which often causes confusion when sharing content or building external links to the mobile version. The mobile-adaptive setup can be less costly and time-consuming than responsive design, but it is often prone to errors and can be the cause of many SEO-related issues. If a mobile-adaptive site is the only configuration your website can use, then it is better than no mobile site at all. Just be sure to test it rigorously to ensure it is the best it can be. Dynamic serving is another method for providing a mobile-friendly website. Dynamic serving uses the same URL regardless of the device, but different HTML and CSS code is served depending on the user-agent to provide an optimized page for the device. If dynamic serving is implemented correctly, it can be a good way to deliver mobile-optimized content without building an entire separate site, but it is complex to set up and if not implemented correctly can cause indexing issues. Remember, regardless of the configuration chosen, it is imperative that Googlebot can crawl your mobile content in its entirety and verify the meta-robots tags for both desktop and mobile push Googlebot to the appropriate version of the content.

Best Practices for Mobile Optimization

In the year 2020, we’ve reached a point where technology has never been better, but people have never been more impatient. Internet users new and old all share the same privilege of having a quick and reliable web browsing experience, and mobile device users are no exception. Whether people are visiting your website on their downtime or if they’ve been potentially seeking out your product or service for months, the last thing you want is for them to feel like they’ve wasted their time of getting onto your site in the first place. Your website should feel inviting and rewarding to visit, with content that is easily accessible and a user experience that is memorable. Any frustration caused during a user’s visit will only leave them with a negative perception of your brand, and can be a factor in them never returning to your website again. Speaking in terms of search engine ranking, user experience is vital for getting a positive ROI from organic search traffic, which in the end should be the main goal of any website. According to a study conducted by Google in 2019, which involved a few hundred internal webpages on various websites and resulted in more than 400 teardown reports, user experience is most important for websites who are providing information for what Google calls “Your Money or Your Life” (YMYL) topics. This refers to anything in your life that can have a direct impact on your future health, happiness, or finances. Websites Google considers to be YMYL include, but are not limited to: medical or health information, financial advice, and legal information. Although the Google ranking algorithm is the same for websites not falling under those categories, this is evidence that there is a higher expectation of good user experience for certain types of website, and it likely won’t be long until this level of expectation spreads to all industries. High-quality websites provide high-quality information and Google has been taking steps to make sure that users get exactly that.

The best thing you can do to optimize your content for mobile devices, which is also one of the easiest, is to make sure you’re using a mobile-responsive theme for your website. Usually, WordPress themes are mobile responsive, but you should always make sure. It should be called out on their sales page and some friendly Google searches or reaching out to their support team can usually find you an answer. You can also figure out whether or not a theme is mobile responsive by testing it on Google’s Mobile-Friendly Test Tool. Make sure to preview the theme on your smartphone to make sure it’s easy to navigate and doesn’t look too cluttered. You may find that the theme looks better on some devices than others, and this is something that is often amended with more premium theme options. Remember, simple and clean is the way to go. A cluttered or confusing looking website on a smartphone can be the number one cause of high bounce rates. A mobile-friendly theme is absolutely integral to the success of your site on mobile devices. If this is the first step of optimization you take, you’ll be headed in the right direction.

Use Mobile-Friendly Themes or Templates

Google’s change to mobile-first indexing is a big step and a clear sign that mobile SEO service is going to continue to be increasingly important in the future. As the indexing change will happen gradually, Google has stated that they will inform webmasters when their site has been migrated to the mobile-first index. In the meantime, webmasters can still see the mobile version of indexed content by adding the URL parameter “?m=1” to the URL in a Google search.

In the past, Google has used the desktop version of websites to evaluate and rank the relevance of a website to a user query. This caused issues when presenting mobile users with search results that were tailored to their queries, but linked to sites with content that was not optimized for their devices. The mobile-first index intends to solve this problem by using the mobile version of a site when indexing and ranking search results. This gives mobile users a better search experience and allows webmasters to better optimize the display of search results for their users.

Mobile-friendly themes and templates are the very first step in optimizing your website for mobile users, which Google in turn will use to judge your website’s mobile configuration. As of 2018, a recent study has shown that 60% of Google’s search engine is from mobile devices. The same study shows that only 34% of organic search engine traffic was from a desktop. This is a significant gap. So it is only natural to assume that Google wants to accommodate this major source of traffic and change their search index to primarily use mobile versions of websites. The mobile-first index is a change to the way Google search rankings are determined.

Optimize Images for Mobile Devices

Use Fewer Images: If an image doesn’t add value to the content or the purpose of it is already satisfied, you should consider removing it. This could be a case of removing decorative image or simply an image that doesn’t add value to that page. Regularly checking if an image is necessary can contribute to a reduction of the number of HTTP requests made as well as saving on bandwidth and mobile data.

Use Responsive Images with Variable Dimensions: In order to save on bytes and delivering an image that looks good on multiple devices and screen resolutions, save multiple sizes of the image and use the srcset attribute to deliver the most appropriate image. This technique is explained in more detail in Google Developers – Responsive Images tutorial.

Compress images – large images cause slow loading time: Large file size images can result in slow page load times, therefore worsening how the user interacts with your page and mobile website. You can use Google PageSpeed Insights to see whether your images are an issue and the tool will also recommend a solution. Google generally recommends that images are compressed to save at least 30% – to do this without affecting the image quality can be tricky so manual editing in an application like Photoshop is often required. This may be a time-consuming task but it allows you to maintain image quality to a standard that perfectly suits your website. By using Adobe ImageReady, you can also now view the original image next to the compressed image to see if there is any noticeable difference. This application also allows a preview to be made of the website before implementing the changes and a side-by-side comparison of the original and compressed website.

Improve User Experience on Mobile

User experience has always been a quintessential factor in determining a website’s success. This is no less relevant in the light of Google’s decision to move to a mobile-first index. This means that Google will now consider the mobile version of your website as the primary source for its ranking and perhaps more importantly, how it will index the pages. A primary key to a strong mobile user experience is a fast loading page speed. You can use Google’s PageSpeed Insights to analyze how quickly your site loads and what you can do to improve your load time. This tool is also useful for analyzing mobile load times for different countries. A crucial step for this is to enable browser caching. This is often a good idea as it helps serve static content to users faster and can cut down on server load. Also, reducing redirects is important. When a page redirects to another page, it increases the amount of time it would take for the user to reach the intended page, hence increasing the user’s wait time. Further to this, it is recommended to reduce render blocking above-the-fold content. This refers to the portion of the page that you first see without having to scroll down. The content here should be prioritized so that it does not take too long to load. You should always keep an eye on the page speed and continue to optimize where possible.

Implement Structured Data Markup

There are numerous ways of implementing structured data on a mobile site, but some methods help pages perform better in mobile search results. Site owners should follow these general guidelines to ensure that their structured data adds value to their pages. It is important to ensure that mobile users have the same access to the marked-up content. If a page uses a responsive design or a dynamic serving site where the primary content and markup is equivalent across mobile and desktop, there is no change. Data should be structured to match the content as it appears on the mobile page. If the mobile version has less content than the desktop page, because the site is using a mobile template that doesn’t include all of the desktop content, then the structured data needs to be changed to match the mobile page. A common scenario is a mobile template that contains a summary of the content on the desktop page. Markup that is a true reflection of the content can be added to the mobile site, while still maintaining the mobile page as canonical. If the mobile content is accessible to users (as opposed to being hidden for implementation purposes), that structured data on the mobile site should be visible to the user. In cases where the mobile and desktop pages have equivalent content, structured data on the mobile pages should be updated to match the desktop-set data. This helps avoid the scenario where a user finds the content in their search results, but upon clicking the link discovers that the content is different than expected. Using data-vocabulary.org and schema.org as examples, this case could involve changing the HTML attributes used in the structured data (for example, adding itemprop=”headline” to the mobile data). With equivalent content and markup, mobile search result rich snippets can have better quality and better visual presentation.

Monitoring and Testing Mobile Optimization

In a lot of cases, mobile ranking will differ from desktop ranking which isn’t surprising as the algorithms will be different. Depending on when a site with little to no mobile optimization was crawled, the mobile pages may not get indexed at all yet. Tracking mobile rankings and search visibility is vital to understand if and how the mobile first index has impacted a site. This can be done by setting up a mobile site search console property and/or by tracking mobile keywords in a rank tracking tool. Tracking search visibility for mobile keywords vs desktop should give you a good indication of how mobile SERP performance is looking.

The only way for a site owner to truly understand how their mobile user experience is perceived is to look at mobile traffic. There are many sites in various industries that have higher mobile to desktop ratios, reflective of user behaviors/preferences. For example, media industry websites will likely have more mobile traffic as will social media sites compared to the travel industry and sharing economy sites. While there is no golden benchmark for how mobile optimized a site should be, reflecting on the industry and competitive landscape should be used to weigh up opportunity and likely ROI.

Analyzing Mobile Traffic and Rankings

To understand how your site is currently performing in mobile search results, it’s useful to determine your site’s mobile visibility, as well as to track the mobile rankings of the keywords that are important to your site. Start by using Google Search Console (formerly Webmaster Tools) and select the “Search Traffic” > “Mobile Usability” report. This report shows the usability issues of your site pages on mobile devices. Although it does not affect the site’s rankings in mobile search results, usability is an important first step. If your site pages have usability issues, I would recommend fixing them before looking to start mobile site SEO. Next, use the “Search Traffic” > “Search Analytics” and set the filter to filter the search traffic by “Mobile”. Here you can compare the clicks, impressions, click-through rate and average position of your keywords between mobile and desktop. This can give you an understanding of the relative performance of your keywords on mobile search results. If your site has a responsive design, the clicks, impressions and positions data should be similar between the devices. If your site has a separate mobile site, you will need to verify the mobile site version in Google Search Console and track the search data separately. In the case of a mobile site on a separate URL, it is recommended to implement the mobile site using the “m.” configuration, and make sure the mobile site URLs are added to sitemaps and are verified in Search Console as a separate site.

Mobile Usability Testing Tools

Visual Site Mapper – This tool will give you a visual representation of how your site will look and behave on a mobile device. It can also be a great tool for impressing the importance of mobile optimization on a client, as visual presentations can be much more powerful than words or statistics.

W3C mobileOK Checker – This is a very simple page that will give you the OK or not OK for your site to be considered mobile friendly by the World Wide Web Consortium standards. Although it is pretty minimal, it is a good double check, and assures that you have not committed any major “mobile faux pas” in the eyes of the leading organization for web standards.

MobileMoxie – This set of tools is specifically for mobile SEO, and includes simulators and emulators for markups and code. They also have tools for tracking mobile rankings and for comparing how sites look on different mobile devices.

PageSpeed Insights – A Google tool that will analyze your site, first for desktop, and then for mobile. It will measure page load times and identify which elements of a page are contributing to the load time. Requirements can be as simple as entering your domain, or as complex as using their free API to input a little code and get a deeper analysis.

A/B Testing for Mobile Optimization

A/B testing is a useful method of comparing two versions of the same webpage or section to see which performs better. Usually, the old/original version of the webpage is compared to a slightly modified version to see what changes improve the performance. In order to accurately assess the difference in performance, the two variations must be shown to users at the same time. This part can be difficult as some content management systems are not set up to facilitate A/B testing, and the standard A/B test design can be inappropriate for mobile pages. Despite these difficulties, there are ways to carry out effective A/B testing for mobile optimization. This may include coding the A/B test directly into the mobile webpage and separate mobile usability tests. After you manage to compare your pages, you can begin to assess which changes were successful and incorporate these changes into your webpage on a more permanent basis. Since Google is now primarily using the mobile version of content for indexing and ranking, it would be wise to make any successful changes to the mobile version of your webpages. Any changes that negatively affect performance can be easily discarded.

Popular