Redirecting Page Anchors Using Javascript

The Problem

We recently did some work on a website for Saskatoon company, Envirotec through our partner, unINK, which is where we ran into a problem. Envirotec's service pages weren't being indexed by search engines. This was happening because the original developer of the website put their sub-services on to tabs which were swapped back and forth using javascript/jQuery. Search engines tend to have issues with these kind of setups for multiple reasons, the main reason being that the tabs not currently active are being hidden from the page, usually using CSS. If it is set to display: none there is a very good chance it won't be picked up in the indexing process. To get these sub-services showing up properly in the search results, we recommended that a page be made for each sub-service. With a new page for each sub-service, it will guarantee they are indexed. With the work finished, the pages look identical to what they were before. It does take them a little bit longer to load since it will load a new page now for each sub-service, but the upside of being in search results outweighs this issue.

This is where the redirection issue arose. The old services pages where loaded from a database and when they were pulled and printed, the code automatically gave each tab an anchor to identify the sub-service. Overview was #subService1, the next sub-service was #subService2, etc. Now that these anchors no longer exist, we need to redirect them to the proper pages that were just created. Unfortunately, the anchor portion of the URL is never passed to the server which makes it impossible to use a regular redirect to get this done since they are server-side. The next best way, in our opinion, was javascript.

The Fix

Using the window.location.replace javascript function give us the redirect that we need. We just need to compare the anchor from the URL and then redirect it to the proper page we have created. The javascript code gives an example of how this was done in this case. Keep in mind, there are many different way to write this code, some more efficient, some less. If you have better ways of doing this same thing, feel free to contact us. Always open to changes and suggestions.

// Closure-wrapped for security.
(function() {
    var anchorMap;
    var currentLocation = window.location.href.split("#")[0];
    if( window.location.href.indexOf("recycling-waste-management") > -1 ) {
        anchorMap = {
            "subService1": "/",
            "subService2": "/industrial-waste-materials",
            "subService3": "/institutional-waste-materials",
            "subService4": "/household-waste-materials"
        }
    } else if( window.location.href.indexOf("automotive-fluid-services") > -1 ) {
        anchorMap = {
            "subService1": "/",
            "subService2": "/used-oil-materials",
            "subService3": "/used-antifreeze",
            "subService4": "/parts-cleaners",
            "subService5": "/premium-lacquer-thinner",
            "subService6": "/fluid-management-products"
        }
    }
    /*
    * Best practice for extracting hashes:
    * http://stackoverflow.com/a/10076097/151365
    */
    var hash = window.location.hash.substring(1);
    if (hash) {
        /*
        * Best practice for javascript redirects:
        * http://stackoverflow.com/a/506004/151365
        */
        window.location.replace( currentLocation + anchorMap[hash] );
    }
})();

The anchormap variable is an array that we will use to associate the anchor with the page slug to redirect to.

window.location.href.split("#")[0] will take the current URL and split it at the # and then use the first portion of the split, which is why we have 0 inside the square brackets. The first portion will be everything in front of the # in the URL.

window.location.href.indexOf("recycling-waste-management") will check to see which main service page we are currently on. In this case is check to see if the main service is the recycling-waste-management page. If it finds recycling-waste-management as part of the URL it will return a number greater than -1. If nothing is found, indexOf will return -1.

window.location.hash.substring(1) will find the # and give us the anchor in the URL.

window.location.replace( currentLocation + anchorMap[hash] ) will replace the current URL with whatever is passed into the function. In this case we are redirecting to the current url minus the anchor (currentLocation) followed by the slug that is associated to the found anchor.

Put this code inside the script tags where you like on the page and it will run automatically when the page is requested.

Hope this help!

Source: Logan on StackOverflow

Posted on: September 22, 2015

No Comments Yet.

Leave a comment