3

I have a site that uses AJAX to query the Last.fm database and then dynamically draws a graph of the results on an HTML canvas. In the search function, I have a command that sets window.location.hash to the search parameters. I also have a function that checks if a hash was provided in the url and if so, generates the page.

For example, http://www.thenlistento.com/#!/led+zeppelin will automatically navigate to a search page for Led Zeppelin.

My question is, how do optimize this set up for SEO? Can it be done at all? I've taken a look at Google Webmaster Docs and read over the hashbang protocol, but I'm not totally sure how to apply it to my situation..or even if I can at all.

Any help/suggestions would be greatly appreciated.

Link to the site: http://www.thenlistento.com

4 Answers 4

2

It looks to me like you have to use '?_escaped_fragment_' on the server to serve a response which you would get dynamically by using a hash-bang.

For example, when the following URL is requested:

http://www.thenlistento.com/?_escaped_fragment_=/led+zeppelin

The server serves the same content as you would get by going here:

http://www.thenlistento.com/#!/led+zeppelin

This may just mean having Led Zeppelin as the default value and perhaps a simple ordered list of similar artists as text underneath the animation. The client side code would then look at the default value of the input box and load the animation if something's there and do nothing if not. The simple text list will be beneficial for accessibility reasons and to provide Google with at least something to chew on.

2

I think you could use URL Rewriting and permanent images to get good Google SEO here:

http://www.thenlistento.com/bands-similar-to/led-zeppelin

Use URL Rewriting or Proxy to turn this into:

http://www.thenlistento.com/#!/led+zeppelin

Then ensure you have great meta description on the page above.

When someone actually visits a page, you should turn your graph into a permanent image as well and reproduce it on the page - e.g. bands-similar-to-led-zeppelin.png, perhaps resized somewhere at the top next to the text.

This gives google something unique to index about your pages.

0

https://developers.google.com/webmasters/ajax-crawling/docs/specification

????

http://www.thenlistento.com/?_escaped_fragment_=/led+zeppelin

2
  • Right. This is a problem I was having. I figured that the bottom link would react the same way as the one with the hashbang, but it doesn't and I'm not sure why. May 1, 2012 at 18:00
  • 1
    @ChristianBenincasa this doesn't happen automatically, you need to program your website to serve up the google crawlable html on that page.
    – user6901
    Sep 29, 2012 at 0:19
0

It isn't exactly a simple solution - it'll take some work to understand the requirements and get it thoroughly vetted.

The Google Developers doc on Ajax crawling really breaks it down. You'll just have to digest that info and make sense of it.

Essentially if you want Google to crawl that dynamic content, you need some way to render and display that content as normal HTML when requested with the _escaped_fragment in place of the hashbang. This will need to happen on the server side - either processing these requests differently to serve up HTML instead of the Ajax response, or using a headless browser to get the post-JavaScript results and then serve them up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.