Question

i’m currently building a small music quiz running node.js 0.4.12 and the express framework

currently my express setup is really really basic and only serves the base url

app.get('/', function(req, res){
res.render('index.jade');
});

i’ve implemented a small navigation which uses a really big div with a hidden overflow and an inner div with the content which gets its left value adjusted depending on what navigation title you click.

also i got a news section which runs a mongodb query whenever you click it (the content gets delivered via socket.io)

of course this is not search engine friendly at all, my news simply will never be found and running a query every time to get the news just isnt needed.
so i need some way of storing the news information and only update it when new comments get posted or when i add new news…

its also quite tedious to create working links, currently i do it via javascript using document.location.href.replace…

one more problem is that im afraid that the website becomes too big and takes too long to load if i continue to put every content i have on one single page…

so, how can i maintain the feeling of the page as it currently is ( an omnipresent player which never stops unless you leave the page ) while also serving search engines right and keeping the page loading times low?

Answer 1

Let me know if I’m on the right track, as I don’t fully understand your question, but here’s how I would accomplish what you’re trying to do:

There’s two ways to do this if you’re looking for SEO benefits.

Either load everything from the server on a single page, and then use CSS and Javascript to manipulate the content after it’s been loaded…

OR

Set up your page in a traditional manner (each navigation tab links to a new, full page), and then use Javascript to load your content via AJAX as you like.

In both of these scenarios, Google can crawl your page/site structure and get everything it needs, and you can still use JS to layer on interaction for your users. Whatever you end up doing, the SEO rule is generally ‘treat it like I don’t need JS to load all of your content’.

It sounds like you have the first scenario covered, though instead of using JS in your links, I would make them standard HTML anchor links using ids.

If you are interested in the second scenario, this is what I’d recommend:

First, approach your navigation as if it did not require javascript to work properly. That means each navigation element links to a separate page (each of which will require a separate route in express).

If you’re using Jade to render your templates, I would use its inheritance features to manage your markup. Basically, you’d put all your html into layout.jade, and in the large div you’re using for the page content, you’d create a block with the default content inside. The routes you set up for each nav element would then call different templates that extend index.jade and write the page-specific content into the block you created.

Here’s an example:

app.get('/', function(req, res){
  res.render('index.jade');
});

app.get('/section1', function(req, res){
  res.render('section1.jade');
});

app.get('/section2', function(req, res){
  res.render('section2.jade');
});

This ensures that every time you visit http://yoursite.com/section1, the entire page is rendered (header, footer, and all), but you don’t have to duplicate the header and footer code in every template. It just lives in index.jade, which gets extended by those other section-specific templates.

When setting up your news feed, unless it’s pushing real-time news updates to the client, I would ditch the socket.io setup, and instead have it load from your database when the page loads. Grab whatever comes back from the DB on page load, and pass it to your jade template via the local variables. For example:

app.get('/news', function(req, res){
  res.render('news', {
    newsArticles: newsArticles
  });
});

Finally, when you have this working like a standard website would (traditional http page loads vs. javascript loading), then layer on your javascript to transform the page into one that loads the content via AJAX. I use jQuery to do this and it works beautifully. Write some jQuery code that attaches a click event to each one of your navigation items. This click event would grab the URL from the href in your link, and then pass it to the jQuery ‘load’ method, which would then replace what’s in your main content area with the markup from the page it just loaded via ajax.