Javascript & mobile seo

> > Javascript usage for mobile seo

Updated: January 2nd 2016

JS

"Disallowing crawling of Javascript or CSS files in your site’s robots.txt directly harms how well our algorithms render and index your content and can result in suboptimal rankings."

- from the Google webmaster central blog 1

How Google uses your javascript to understand your page

Google examines and indexes your page with a spider called Googlebot. There is also a mobile version of this bot, Googlebot mobile.

In an ideal situation, Googlebot would encounter a desktop page for desktop users and Googlebot mobile would encounter a mobile optimized site for mobile users.

good js setup allows google to see mobile page

In a bad situation where your javascript and css are blocked Googlebot will not see a mobile optimized site for mobile users even if you have one.

bad js setup blocks google from seeing mobile page

In order to "see" your pages and understand them at this level, Googlebot needs access to your javascript files (and your css too). This is the main reason they are saying not to block your page resources like javascript.

If Google does not see your mobile site, it will affect your mobile rankings, or as Google said it "can result in suboptimal rankings".




Javascript as a mobile SEO factor

Google has outlined different javascript setups and how one should deal with them from a mobile SEO standpoint.

This article will overview the Google recommendations for javascript and define the javascript setups mentioned by Google in their documentation. 2

Javascript delivery can change mobile SEO basics

Commonly held best practices for mobile SEO do not hold true for some methods of javascript delivery. Example:

  • Responsive websites may need to use Vary HTTP header depending on their javascript setup

To provide yourself or your client proper technical SEO you will need to understand how javascript is being used. The solution is to determine what your javascript set up is and follow the Google recommendations for that method. I describe each method / set up in detail below.

Do not block javascript

The most fundamental step is to make sure your javascript is not blocked from Google.

To check, you can use the mobile seo tool which will highlight any javascript files being blocked. The Google webmaster guidelines state explicitly 3 that your javascript and css should not be blocked.

Know your Javascript setup

Google has defined three different javascript setups and thier different SEO recommendations for each. They have even stated which one is the preferred model.

Do you know which javascript setup your site uses?

Javascript Adaptive Google recommended

javascript adaptive

In the javascript-adaptive setup the server will send the same javascript file with the same content to all users. Mobile or desktop does not matter because the javascript file and the content of that file is exactly the same in all instances.

  • Google preferred method
  • This setup is detected automatically by Google
  • No need for Vary HTTP header or other SEO hints.

Combined detection

combined detection

Combined detection is where even though the same HTML and Javascript may be sent from the server initially, the javascript finds out the the screen width resulting in different content depending on screen size. Since this results in different content sent in different situations, combined detection is considered a type of dynamic serving configuration by Google.

So even though you may be using responsive web design techniques, in the end the content is different in varying situations, therefore the use of Vary: User-agent is required.

  • Considered to be dynamic serving by Google
  • This setup may not be detected automatically by Google
  • Use of Vary HTTP header required to ensure proper indexing

Dynamically-served JavaScript

dynamic javascript

In this javascript setup the same HTML is always sent that points to a javascript file with the same name (like "example.js"). The difference here is that the contents of the javascript file depend on the screen size of the client.

So even though you may be using responsive web design techniques, the content of your javascript is different and as such requires Vary: User-agent to be used.

  • Considered to be dynamic serving by Google
  • This setup may not be detected automatically by Google
  • Use of Vary HTTP header for the javascript file required to ensure proper indexing





Patrick Sexton by