JavaScript links and SEO?

Question

First, take a look at this demo page: http://vidasp.net/tinydemos/seo-javascript-links.html

There is a menu on the page, and clicking on a menu item will display various links to other web-pages (that are part of the web-site). The link URLs are in this format:

www . foo . com / articles / XXX / descriptive-title-of-the-article

... where XXX is a three-digit ID of the given article.

This all seems OK, but there is one issue: all those links are created dynamically via JavaScript. Take a look at the source-code - at the bottom of the page there is a JavaScript variable (the db variable) which holds all the data which is used to generate the links.

I am using JavaScript because I don't want to use the server-side. I assume, in that case I would have to store the data inside a SQL database, and then use C#/PHP/etc. to generate the links. However, this is not an option for me - I am oriented strictly towards the client-side.

BTW, if you want to see a more elaborate demonstration of JavaScript-generated links, go here - http://www.w3viewer.com - there are ~400 links on that page, all of which are generated dynamically via JavaScript.

The question:

Now, I like this approach - using JavaScript to generate links - however, a consequence of this approach is that search-engine crawlers won't register any of those links - they just "see" an empty page with no links (which is a SEO disaster, I assume).

So, I was wondering, how could I optimize this approach?

Update (follow-up question):

Couldn't I use a Google sitemap, to tell the Google crawler which web-pages exist on the web-site? That way I could keep the front-page (the demo above) as it is (with no static links), and the crawler would use the sitemap to crawl all the web-pages of my web-site.

I don't know anything about Google sitemaps yet, but I am wondering why no one suggested them. Could they be a solution to my issue?

Answer 1

It seems like what you really need to do is to generate the HTML using templates before deployment using something like Template::Toolkit's ttree. Then, you can keep your database on your development machine. No need for JavaScript.

Here is a simplified example:

[%- 
db = {
    Foo => [
        { id => "001", title => "First article" },
        { id => "002", title => "Another article" },
        { id => "003", title => "Yet another article" },
    ], 
    Bar => [
        { id => "004", title => "First article in this category" },
        { id => "005", title => "Another article in bar" },
        { id => "006", title => "Third bar article" },
    ],
    Baz => [
        { id => "007", title => "Baz article No. 1" },
        { id => "008", title => "The second Baz article" },
        { id => "009", title => "The last article" },
    ],
}
-%]

[%- FOR category IN db.keys -%]

<h2>[%- category -%]</h2>

[%- articles = db.$category -%]

[%- FOR article IN articles -%]

<p>Article: <a href="http://www.example.com/articles/[%- article.id -%]/">
    [%- article.title -%]</a></p>

[%- END -%]
[%- END -%]

C:\Temp> tpage t.html

<h2>Bar</h2>

<p>Article: <a href="http://www.example.com/articles/004">First article in this
category</a></p>

<p>Article: <a href="http://www.example.com/articles/005">Another article in bar
</a></p>

<p>Article: <a href="http://www.example.com/articles/006">Third bar article</a><
/p>

<h2>Baz</h2>

<p>Article: <a href="http://www.example.com/articles/007">Baz article No. 1</a><
/p> 

…