Working as a developer for an SEO focused company like Blueclaw I have to make every effort to ensure the final HTML produced for any page I am working on is optimised for the search engines (well duh!). A big thing for me is to cut out any bloated markup, in this post I am going to cover how to use javascript (in this case JQuery however the techniques can easily be transferred to any other framework or just in plain old vanilla js ) to help reduce this bloated pages, not only to help streamline your code for SEO but also giving you the added benefit of speeding up page loads.
1) The What
This technique involves writing bits of HTML that is used regularly throughout the site not to the HTML file that is served to the user, but to a javascript file. Then once the page is loaded use javascript to insert the chunk of code into the DOM.
In the example below I will cover adding the drop down menu to a navigation bar. The HTML document contains just the main nav bar links, and then the drop down menus are served in the JavaScript and injected into the DOM post page load.
2) The Why
Some code is repeated time and time again on every page of the site that is not particularly relevant to the content of the page. In a conventional page the code is downloaded with every single page load as part of the HTML document. The JavaScript file will only be downloaded by the user on the first page they visit and will be cached by the browser. This then means that the pages on your site the user visits after that one they don’t need to re-download this mark-up making those pages load ever so slightly quicker.
Now from an SEO point of view cleaner mark-up and faster page loads are always good. However there is also an extra benefit with this navigation example in better sculpting the page authority within your site. With the standard document the navigation has links direct to both the main categories and the subcategories, when crawled by the search engine bots this then gives equal rating to subcategories as to the main categories passing them equal “link juice”. When we remove the subcategories from the HTML document and drop them in the JavaScript file then this means the bots now only see the main category links site wide and establishes a more hierarchical model to your site structure as the subcategories are no longer linked site-wide are are accessible to the search bots only via their parent category.
With the standard method there are 16 links out of the homepage from the nav to each of the categories and subcategories, this means there is equal rating of subcategories as main categories
By removing the subcategory links from the homepage HTML document then the search engine is forced to crawl the site in a more hierarchical fashion
3) The how
So lets see an example in action, for this we will be working on the nav for a fictional online store selling pet supplies. This site has 4 main categories in its navigation each having 4 or 5 subcategories. With the traditional bung everything in the HTML document the markup would look something like this.
<html> <body> <nav> <ul> <li><a href="/category-1/">Category 1</a> <ul> <li><a href="/category-1/subcat-1">Subcategory 1</a></li> <li><a href="/category-1/subcat-1">Subcategory 2</a></li> <li><a href="/category-1/subcat-1">Subcategory 3</a></li> </ul> </li> <li><a href="/category-2/">Category 2</a> <ul> <li><a href="/category-2/subcat-1">Subcategory 1</a></li> <li><a href="/category-2/subcat-1">Subcategory 2</a></li> <li><a href="/category-2/subcat-1">Subcategory 3</a></li> </ul> </li> <li><a href="/category-3/">Category 3</a> <ul> <li><a href="/category-3/subcat-1">Subcategory 1</a></li> <li><a href="/category-3/subcat-1">Subcategory 2</a></li> <li><a href="/category-3/subcat-1">Subcategory 3</a></li> </ul> </li> <li><a href="/category-4/">Category 4</a> <ul> <li><a href="/category-4/subcat-1">Subcategory 1</a></li> <li><a href="/category-4/subcat-1">Subcategory 2</a></li> <li><a href="/category-4/subcat-1">Subcategory 3</a></li> </ul> </li> </ul> </nav> </body> </html>
However instead we are going to cut out those nested Unordered Lists leaving a much lighter nav bar like so.
<html> <body> <nav> <ul> <li><a href="/category-1/">Category 1</a></li> <li><a href="/category-2/">Category 2</a></li> <li><a href="/category-3/">Category 3</a></li> <li><a href="/category-4/">Category 4</a></li> </ul> </nav> </body> </html>
As you can see immediately we have cut down on the markup for the nav considerably. Next come the clever bit (or at least I like to think so) we store the Unordered Lists we just chopped out of the HTML in a javascript variable like so.
var dropDowns = new Array ( '<ul><li><a href="/category-1/subcat-1">Subcategory 1</a></li><li><a href="/category-1/subcat-1">Subcategory 2</a></li><li><a href="/category-1/subcat-1">Subcategory 3</a></li></ul>', '<ul><li><a href="/category-2/subcat-1">Subcategory 1</a></li><li><a href="/category-2/subcat-1">Subcategory 2</a></li><li><a href="/category-2/subcat-1">Subcategory 3</a></li></ul>', '<ul><li><a href="/category-3/subcat-1">Subcategory 1</a></li><li><a href="/category-3/subcat-1">Subcategory 2</a></li><li><a href="/category-3/subcat-1">Subcategory 3</a></li></ul>', '<ul><li><a href="/category-4/subcat-1">Subcategory 1</a></li><li><a href="/category-4/subcat-1">Subcategory 2</a></li><li><a href="/category-4/subcat-1">Subcategory 3</a></li></ul>' );
Then using a little bit of jQuery we bash them back into the DOM after the page load meaning the resultant page the user sees looks and feels exactly the same.
$(function(){
$("nav li").each(function(index){
$(this).append(dropDowns[index]);
});
});
To break down this code for the less jQuery literate:
$(function(){
jQuery short-hand for an on document finished loading function call.
$("nav li").each(function(index){
Loop through each of the list elements within the nav
$(this).append(dropDowns[index]);{
Append the relative block of HTML from the dropDowns array to this list element.
For simplicities sake this is a very stripped down version however hopefully it helps you understand the technique, so check out the demo below and let me know your thoughts.
Nicky: Great tutorial. JQuery is becoming more and more i...
ady berry: Excellent tool Malika - I've been using it for a c...
Protermopan: How about that!...
While this may be smart for SEO-related stuff, this might turn into a problem with screenreaders and other software that help people with disabilities. Also, some search engine spiders might not index javascript inserted html at all, which is something you obviously do not want! In my opinion the user experience should come first, SEO stuff should come second! What do you think about this?
In terms of screen readers there could be an issue, but remember this is only for non-content stuff, the little extras like the drop downs which are by no means vital to the site. In the example it may even help as the screen reader does not have to read through all the subcategories of category 1 before it gets to category 2
Regarding the non-indexing of the JavaScript html, That is exactly the point, you DO NOT want the search engine spiders to index this content and that is why it is being added via JavaScript to stop the spiders having to trawl through the extra bulk.
As you can see in the second diagram in section two the search engine still crawls to the subcategories, but only via the main categories.
A good information with step by step explanation and graphs. very much I appriciable
Brilliant thinking, I am going to setup a test server and see what I get.
Thanks!