Contact Us

You can call us at +972-2-6483441
or fill out the form below and we will get in touch with you shortly

Your name:

Phone Number:

Email:

Website:

Message:

Please answer this security question
What sweet substance do bees make?

SEO and JavaScript

JavaScript is responsible for making webpages interactive. JavaScript can load content in the background without reloading the page (AJAX), move element on the page, create element on the page, and create a smooth user experience. However, JavaScript takes a lot of computing power, and it’s not clear if webcrawlers execute it. If you have content which is only accessible with JavaScript, search engines may not be able to find your content.

So the question is: How do you make JavaScript that is both powerful and crawlable?

The answer lies with making your JavaScript build off your HTML. Take for example this implementation of tabs using jQueryUI:

HTML:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>One</a></li>
<li><a href=”#tabs-2″>Two</a></li>
<li><a href=”#tabs-3″>Three</a></li>
</ul>
<div id=”tabs-1″>
<p>This is the first tab.</p>
</div>
<div id=”tabs-2″>
<p>This is the second tab.</p>
</div>
<div id=”tabs-3″>
<p>This is the third tab.</p>
</div>
</div>

JavaScript:

jQuery(document).ready(function() {
jQuery(“#tabs”).tabs();
});

This page would create three tabs, displayed as “One”, “Two”, and “Three” that each show a different div when clicked. Even without the JavaScript, the HTML has logical meaning. The JavaScript does not create event handlers for the tab haphazardly, rather it builds off the existing HTML to find the correct div for the link. So even if the webcrawler does not see the JavaScript at all, all of the content is still accessible in the HTML. This is also of value for those who use screen readers to surf the Internet.

Here is another example, this time from YUI2 DataTable. DataTable is a YUI capability to richly format a table. It adds features such as sorting columns, pagination, and resizing columns. The data can be taken from many sources, for example:

http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

which loads the table data using AJAX. Or this example:

http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html

which retrieves the data from the HTML already on the page.

Even though they both may look very similar to the end user, the second example is far better for SEO than the first. In the second example the webcrawler sees the HTML table with all the data, even though it does not see any added functionality that the JavaScript is adding. In the first example, however, the webcrawler would have to execute an AJAX request in order to get the table data. While there is some evidence that webcrawlers can find some data like this, there is no guarantee that it can, or that it can relate it to the correct page. The webcrawler may view the AJAX response page as a completely new page.

Leave a Reply