Leveraging Googlebots Detection of JavaScript Redirects for Ranking

Time to read
3 minutes
Read so far

Leveraging Googlebots Detection of JavaScript Redirects for Ranking

Wed, 12/04/2019 - 06:18
Posted in:

In the last I/O developer conference held in May 2019, there was an official announcement from Google that Googlebot web crawler is up-to-date with the latest Chromium version. This featured update also made Googlebot capable of crawling the modern websites to access those features too modern browsers demands like the use of JavaScript.

Even though this featured updated took a long time to come, there are little bits of confusion left in terms of its capabilities. In an episode of the #AskGoogleWebmasters series John Mueller, Google Trends Analyst commented on questioning whether Googlebot is no able to JavaScript detect client-side redirects, he answered: "we do support JavaScript redirects now of various types, and the bots can follow them the same way as to the server-side redirects."

Before the Chromium evergreen Googlebot, usage of JavaScript may have been forced the brands to compromise on user experience and some functionality by considering the capacity of the Googlebots also to crawl those. Now the updated version of Chromium is capable of crawling the content rendered through JavaScript also, so the developers can more freely and creatively use JavaScript redirects for better SEO.

However, this also leaves some loopholes for the malicious practitioners to use some tactics like sneaky redirects to take the viewers from the page of their interest to other hidden pages. But, when used effectively, this sets forth a lot of opportunities for the SEO specialists to take advantage of this change. Further, let's discuss some smart ways of using JavaScript to navigate or redirect to a URL or to refresh the given page.

JavaScript redirects

We can see that many URLs are out there further redirecting us to new pages by using server redirect configurations and the header properties of HTTP. However, now you can effectively use JavaScript redirects at many scenarios to navigate to a different URL. There may be many cases you might think of redirection to another URL as:

  • On changing the URL structure of your domain.
  • To enable redirection based on location or language.
  • The user submits a form, and you have to bring them back to the next page in a sequence.
  • Put pages which require authorization
  • Redirecting users to HTTPS from HTTP
  • Trigger a new page with a single page application.

With JS, the object of ‘window.location' can manage the address which is loaded by the browser. By manipulating location object, you can easily manage the page directs. The location object has other methods and properties to trigger page directly using JavaScript. To do this effectively, some of the major properties of location object as suggested by New York SEO Company which you need to be well versed with are:

  • hash – Usually for the single-page websites and apps
  • host – the domain of the URL
  • hostname: - similar function as of host
  • href – the domain name in full
  • origin - URL protocol and the domain
  • pathname - URL slug after the origin
  • port – if there is a port put in URL
  • protocol – various protocols like https, HTTP, FTP, FTPS, and so on.

Each of the above properties can support the standard strings for actions like replace. Some of the object methods for location are:

  • assign – to set location object to a new URL
  • reload – instructs to reload the page with the same URL.
  • replace - triggers redirect
  • search – to interrogate queryString

You may find the functions of Replace and Assign similar, but each has varying constraints. Assign can load resources at the redirected URL and can preserve previous entry in the navigation history of the browser. So, the user can get back to the previous page by hitting the back button. Replace method also does the same thing, but the original page of the ‘current' resource will not be there in the browsing history. So, the user cannot go back to the previous page by hitting the back button. However, both of these functions may fail if the restrictions to ensure security as if you cannot use third party scripts to trigger an action. It is actually good as many sites tend to use third-party scripts even without code verification.

Redirecting to a new address

When you change the address of your page or put a fresh new domain name, one should actually initiate the 301 redirect. With this, the server will send an HTTP 301 status code with the new address. 301 status code will tell the browser or search engine crawlers about the new address. This is something similar to when you change your physical address to under another post office so that your mails are forwarded there. A standard 301 redirect will let you keep the traffic as well as the search engine ranking. Usually, users do it from the server; however, there are times when it may not be possible to do it from the server, and the effective way is to use JavaScript redirect to any URL.

The location.replace component is ideal for any 301 redirect scenario and also when you have to do HTTP to HTTPS redirects. However, the most succinct mode of redirecting from HTTP to HTTPS is with the use of JavaScript, for which the following code can be used.

Javascript code for HTTP to HTTPS
Javascript code for HTTP to HTTPS

It is also recommended to configure the server also to send appropriate HTTP redirection headers which are so efficient. It is applicable to both redirecting to new addresses as well as from HTTP to HTTPS.

Refreshing pages with JavaScript

Sometimes, you may have to refresh a page or reloading it programmatically where JavaScript can be used. You just have to put an action element onto the page for the users to initiate refresh. Performing refresh automatically could be confusing to the users. The location.reload element can effectively reload the active document like a press of an F5 or clicking on the refresh button on the browser.

If it's readily available, the default setting can reload a page from the cache of the browser. You may also force the bypass method to the local cache and do document retrieval from the network. The below snippet of code is useful for this.

Javascript code for Refreshing Pages
Javascript code for Refreshing Pages

Considering these functions, the best web page development etiquette is to go for JavaScript in order to refresh the page or to redirect to another URL. Apart from automating it, it can also be set for a touch or click by the users.