That Smith

A lot of companies I have been working with are not necessarily ones you think would have huge internet marketing budgets, and many don’t. However SEO is equally important for them, if not more important than a bigger company or one in a larger industry.

The other day I was working on a client’s page to bring them into the 21st century by redirecting their existing URLs to SEO friendly ones, and in doing so I had to update much of the source written by their designer to make their relative URLs actually work (‘page.cfm’ -> ‘/page.cfm’).

This particular project didn’t require doing anything more than updating the addresses, but while glancing at his JavaScript I noticed several mistakes he made that went against the optimization of the page. Lucky for me this usually means more work.

My experience tells me the majority people who work(ed) on my clients’ sites know nothing about SEO and little about JavaScript. The older the page the more mistakes I find. The following are common SEO mistakes unfamiliar people make when writing JavaScript.

Making a popup

Code used:

<a href=”#” onClick=”popUp(…);”>…</a>
<a href=”js:popUp(…);”>…</a>
<img src=”thumbnail.jpg” onClick=”showImage(…);”>

Mistake:

The SEO problem with the above samples of code is that nothing useful is given to search engines when they crawl the page.

popUp() and ShowImage() are functions defined elsewhere in the page, but where the SEO comes in is the link. Robots don’t read JavaScript, and none of the lines above tell the search engine what is being loaded. Therefore the popped up page or image is never indexed.

This is what could be done to solve this:

<a href=”/page-to-be-popped-up” onClick=”popUp(…); return false;”>…</a>
<a href=”/page-to-be-popped-up” onClick=”popUp(…); return false;”>…</a>
<a href=”/fullsize-image.jpg” onClick=”showImage(…); return false;”><img src=”/thumbnail.jpg” alt=”…” /></a>

Robots completely ignore the onClick portion which makes the first set of examples useless, however by adding a link to the item popped up we make it so robots and visitors that block JavaScript still end up where we want them.

Adding return false; makes it so the actual link isn’t loaded for everyone else.

A simple function I have used is:

<script tyle=”text/javascript”>
function popUp(el) {
window.open(el.href);
return false;
};
</script>

<a href=”/page-to-be-popped-up” onClick=”popUp(this);”>…</a>

This ensures my link or image is still loaded and indexed when JavaScript is blocked.

Navigation

Code used:

<a href=”#” onClick=”jumpTo(‘…’);”>…</a>
<a href=”js:location.href=’…’;”>…</a>
<img src=”…” onClick=”location.href=’…’;”>

Mistake:

Here we see the same kind of issue as before, but this one tends to be more common. A modern reason why someone would write a link like this could be to run a tracking script before sending someone to the new page. I especially see this a lot on industrial sites where one of my client’s advertises.

The problem with this is the page linked is not accessible to search engines and older browsers, and the link is not counted when ranking the final page.

To resolve this try this code:

<a href=”/local-page.php” onClick=”jumpTo(this.href); return false;”>…</a>
<a href=”http://other.site/some-page.html” onClick=”trackIt(this.href);”>…</a>

Again, we’re doing the same thing we did in the popup example, but with a simple link.

This is a funny thing to do, but I’ve seen it done on pages where the designer wanted an alert to popup before sending the visitor to the next page. When doing this, always take robots and alternative browsers into consideration.

An example I use tells Google Analytics to track the link to one of my other domains as an internal link:

<a href=”http://thatsmith.net/” onClick=”pageTracker._link(this.href); return false;”>…</a>

Adding new content

Code used:

document.write(‘…’);
document.createElement(‘…’);
document.getElementById(‘…’).innerHTML=”;

Mistake:

The last SEO mistake people make using JavaScript is a tough one to overcome, but needs to be considered if search engine optimization or accessibility is important. When using JavaScript to add new content you need to consider these two things:

1. Is the dynamic content important enough it should be indexed?
2. Do you want non-JavaScript browsers have access to it?

If you said yes to either question then JavaScript may not be the best way to deliver the new content. Depending on what it is, there are a few ways to ensure everyone sees it.

Solution:

Instead of using document.write or createElement, place the content in a div, span, or tag it otherwise with an ID and use JavaScript to hide it after the page has loaded. Then, when you want the content to be displayed use more JavaScript to make it appear. jQuery is good at this, so is display=’block’.

This ensures the content is still visible to search engines and old browsers, and makes it appear on demand to everyone else. Search engines do penalize for hidden content, but usually only when you fail to provide a method to display it. I have sliding content on multiple pages and have never been punished.

If you are using innerHTML to simply switch what is displayed, and don’t require AJAX to do so, you can achieve the same thing with an accordion or hidden div. This also ensures the content is visible to search engines even if they can’t click to display it.

If you have questions you are welcome to contact me. I suggest you all try navigating your site while JavaScript is disabled to see if you’ve made any mistakes (use the Web Developer addon for Firefox to disable it).

Short version of this post: remember to provide a way for robots to access your content.