Forums >> Programming >> Web Programming >>
RE: Responsive Design, Dynamic Content Swapping/Single Page Applications (SPAs), SEO and GoogleBots -- Part 2




Posted:
bvstone

RE: Responsive Design, Dynamic Content Swapping/Single Page Applications (SPAs), SEO and GoogleBots -- Part 2

 
RE: Responsive Design, Dynamic Content Swapping/Single Page Applications (SPAs), SEO and GoogleBots -- Part 2

We've now updated the application even more so instead of just viewing a plain text version of a web page with a link to the home page, we now redirect to the main page and load the appropriate content.

This was done by updating the redirect.html Server Side Include (SSI) to the following:

<script>
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

if (window.location != 'http://m.bvstools.com/') {
	// document.write("<a href='http://m.bvstools.com'>Click Here</a> to view the full site.<br><br><br><br>");
	var software = getParameterByName('software');
	var path = window.location.pathname;
	console.log(path);
	
	if (software != '') {
		createCookie('navigateToSoftwarePage',software,1);
		window.location = 'http://m.bvstools.com';
	} else if (path != "") {
		createCookie('navigateToPage', path, 1);
		window.location = 'http://m.bvstools.com';
	}	else {
		document.write("<a href='http://m.bvstools.com'>Click Here</a> to view the full site.<br><br><br><br>");
	} 
}

</script>

So what we are doing here is first parsing the Query String value to see if there is a software name.  If there is, we create a cookie (using a couple cookie functions) named navigateToSoftwarePage and give it the value of the software.

If there is no software name, we instead create a cookie named navigateToPage which will include the pathname property of the current window location.

Once these cookies are set we then change the window's location to the main page.

That's when we will check for cookie values and load the appropriate page:

$(window).load(function() {
	// When the page has loaded
	$(".hideMe").hide();
	$("body").fadeIn(100);
	var navigateToSoftwarePage = readCookie("navigateToSoftwarePage");
	var navigateToPage = readCookie("navigateToPage");
	
	if (navigateToSoftwarePage != null) {
		loadBodyContent('/e-rpg/softdesc?software=' + navigateToSoftwarePage);
		eraseCookie("navigateToSoftwarePage");
	}

	if (navigateToPage != null) {
		loadBodyContent(navigateToPage);
		eraseCookie("navigateToPage");
	}
});

Once our page loads we look for either of the "navigateTo..." cookies and if they exist we call our loadBodyContent() function to load the appropriate information into our web page and then remove the cookie.

See, we knew there was a better way than just displaying an ugly unformatted page... we just needed the time to dig into it.  

To see how this works now, just go to Google or Bing and use the search "site:m.bvstools.com".  This will load the pages that are indexed by the search engines.


Last edited 07/29/2015 at 09:25:16


Reply




Copyright 1983-2017 BVSTools
GreenBoard(v3) Powered by the eRPG SDK, MAILTOOL Plus!, GreenTools for Google Apps, jQuery, jQuery UI, BlockUI, CKEditor and running on the IBM i (AKA AS/400, iSeries, System i).