SEO stands for Search Engine Optimization and defines a whole set of techniques and best practices to adopt in order to get a better indexing on search engines (e.g. on Google, which is the most important one). The basic concept of SEO is incredibly simple to understand: content first (CF). This means that we should write our markup by putting the relevant content before the rest of the document. Take for example the following markup:
<body><div id="site"><div id="header"><div id="branding"><h1>Site title</h1><p id="description">Site description</p></div><form action="#" method="get"> </form><div id="navigation"><ul></ul></div></div></div></body>
In this example, the branding section contains the relevant content and so it comes
first in the source. Nothing special so far. But what if we decide to display the navigation menu
before the main header? We cannot modify the original source code, because by doing so we'll put the
navigation element before the remaining content. We could use a CSS solution by using positioning, but this would require a lot of code to make
sure that the elements will not overlap when the user decides to resize the text. That's why we need
the power of jQuery to accomplish this task, as explained in the next section.
Using jQuery
The jQuery's motto is Do more with less. This is particularly true if we take a look at the code required to accomplish our task, which is as follows:
$(document).ready(function() {
var $navigationCopy = $('#navigation').clone();
$('#navigation').remove();
$navigationCopy.insertBefore('#header');
});
Do more with less: only 5 lines of code needed! First, we make a copy of our navigation menu
by using the clone() method, then we remove the original navigation menu from the
DOM with the remove() method, and finally
we insert our copy before the header element through insertBefore().
Using only CSS would require more code and a painful testing to check if our styles work correctly across browsers. Instead, using jQuery leaves our styles untouched and, what's more, perfectly cross-browser.