Monday, May 7, 2018

Link Redirect Trace: Client-Side Redirects vs Server-Side Redirects

Web Page redirection, also called URL forwarding or URL redirection, is a World Wide Web technique for making a web page available under more than one URL address. When you need to debug URL redirection issues, Link Redirect Trace comes in handy.  Link Redirect Trace is a Chrome extension with the following capabilities:
The all-in-one redirect path analyzer.
HTTP Headers, Rel-Canonicals, robots.txt, link power, trust and risk analyzed, too! Perform advanced, comprehensive and most important correct analysis of links, redirects, and REL-canonicals. Use this extension for your SEO analysis, On page SEO, Off page SEO, competitor analysis and more.
In this article, we will look at a client-side redirect example as recorded in Link Redirect Trace.

Link Redirect Trace


After the installation of Link Redirect Trace, you can enable or disable it .  Below diagram shows it was enabled.



When it's enabled, its icon will be shown at the top-right corner of Chrome:


Clicking on the icon, it will show you the details of redirects:



Client-Side Redirect Example


With Link Redirect Trace, below redirects were recorded one time in our test.  Notice that "client_redirect " type was reported.  At another time, we also saw "server_redirect" type reported.  In [2],  it explains the differences between "Client-side redirects" and "Server-side redirects".  As "Server-side redirects" is better known, we will only look at what "Client-side redirects" are in the next section.


Status Code    URL    IP    Page Type    Redirect Type    Redirect URL

200    https://compute-test042718run10.myserver.com/mycompute/console/view.html?undefined    10.252.182.82    client_redirect    javascript    https://compute-test042718run10.myserver.com/mycompute/console/error.html


200    https://compute-test042718run10.myserver.com/mycompute/console/error.html    10.252.182.92    normal    none    none

Client-Side Redirects


A client-side redirect is a forwarding method in which a visitor’s browser handles redirection. Using client-side redirects has several drawbacks, namely:[2]
  • Search engines will not pass authority from one page to another when client-side redirects are used because they may not be crawlable. If you want to pass page authority remember to use a 301 redirect (or Server-side redirect).
  • Client-side redirects break the back button: users will immediately be sent back to the same URL.
  • Not all browsers support all client-side redirects.

Due to these reasons, it is strongly recommend not to use client-side redirects.  Note that our example was due to a configuration bug which doesn't exist in the real product.  Client-side redirects can be done in two ways:
  • Meta refresh
  • JavaScript redirect

Meta refresh

The meta refresh element is used to instruct a browser to refresh the current page, or load another URL. An example of what the meta refresh element looks like:
 <html>
  <head>
    <title>HTML Page Redirection</title>
    <meta http-equiv="refresh" content="0;
        URL='http://www.example.com/'" />
  </head>
  <body>
    This page has moved to example.com
  </body>
</html>

JavaScript redirect

You can redirect a web page via JavaScript using a number of methods. Almost all JavaScript redirect methods are related to window.location object, which is a property of the Window object, because it control over what page is loaded into the browser rests in the JavaScript property window.location property.

<script language="javascript" type="text/javascript">
   window.location.href = "http://www.example.com";
</script>


References

  1. Link Redirect Trace (Chrome Extension)
  2. Redirects
  3. URL Redirection

No comments: