JavaScript has a big impact on mobile SEO. Here, we explain the how disallowing crawling of JavaScript and CSS can hurt your mobile rankings and go through the best setups for JavaScript. If you want to learn more about best JavaScript practices for web pages, check out our piece on render-blocking JavaScript.

To crawl mobile pages, Google has Googlebot mobile. It’s Googlebot’s purpose to examine and index pages of your site. Ideally, Googlebot would find a desktop page for desktop users and a mobile optimised page for mobile users. However, sometimes JavaScript and CSS are blocked by webmasters, meaning Googlebot can’t see a mobile optimised site even if you have one.

To process your pages and examine the correct content, Googlebot requires access to your JavaScript files and CSS. If you block these files, Googlebot has issues indexing your content which can in turn have a negative impact on your mobile rankings.

Which JavaScript setup should I use?

Best practises for mobile SEO don’t apply to some methods of JavaScript delivery. For example, some responsive sites may still need to use the Vary HTTP header depending on their JavaScript setup.

To better understand this, let’s take a look at three JavaScript options and their unique SEO recommendations.

JavaScript Adaptive

Google’s recommended option, in the JavaScript adaptive setup the server sends the same JavaScript file with the same content to all users. Mobile or desktop doesn’t come into this as the content of the file is always the same. This setup is automatically detected by Google and removes any need for the Vary HTTP header or other SEO features.

Combined detection

Where although the same HTML and JavaScript may be sent from the server initially, the JavaScript detects the screen width, presenting different content depending on screen size. As this results in different content being sent in different situations, Google deems combined detection a form of dynamic serving configuration. Whilst you may be using responsive web design methods, as the final content varies in different situations, the use of Vary: User-agent is necessary. Unlike JavaScript Adaptive, this setup may not be automatically detected by Google and the Vary HTTP header is required to ensure correct indexing.

Dynamically served JavaScript

In this setup the same HTML is always sent and directs to a JavaScript file with the same name. Here, however, the contents of the JavaScript file depend on the screen size of the user. Though you may be using responsive web design techniques, the content of your JavaScript is different depending on screen size and consequently requires Vary: User-agent. As is the case with combined detection, this setup may not be automatically detected by Google and use of the Vary HTTP header for the JavaScript file is necessary for proper indexing.

Take our SEO Audit Challenge! We'll find at least one issue causing your website to lose traffic (and our time won't cost you a penny).

Your website

Your Email