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.
What is Javascript?
JavaScript is a programming language for web development that is supported by most web browsers including Chrome, Firefox, Safari and Internet Explorer. Most mobile browsers for smartphones are also able to support JavaScript too. Designed to enhance web pages for a more user-friendly experience, Java introduces user interface enhancements like menus, dialogue boxes, animations and 2D and 3D graphics. Javascript enables web pages to become more attractive and functional than HTML alone would do. The basic appearance of a web page is defined using CSS, but it is the use of Javascript that adds the more high functioning aspects to your webpage, as well as increasing interest and engagement for visitors to your page.
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.