Question

I m developing a website that helps people understand rap lyrics. Users see the lyrics of a rap song and can click certain lyrics to see an explanation:

alt text (click here for more)

As you can see, each explanation has a permalink (in this case http://RapExegesis.com/2636). Here s what happens when you visit one of these permalinks in your browser:

The app looks up the correct song and artist and redirects you to http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633 (in this case http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636)
When a song page loads, the app checks to see whether there s a "note-d+" in the URL fragment
If there is, it automatically open the correct explanation, and scrolls it into view

Ideally Google and other search engines would associate these permalinks with their corresponding explanations. However, because Google doesn t understand Javascript, these two URLs look exactly the same to it:

And therefore, http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind looks exactly the same as http://RapExegesis.com/2636 to Google as well.

Obviously this is not ideal. Any thoughts? Ideally I d like to show search engines a different version of http://RapExegesis.com/2636 -- something like

Lyric: Catch me in the kitchen like a Simmons whipping pastry

Meaning: "In the kitchen" refers to cooking up crack (cf. here, here, and here)

Vanessa and Angela Simmons, the twentysomething daughters of Reverend Run of Run-DMC, run Pastry, an apparel and shoe brand

EDIT: The way I originally posed the question was a bit confusing. There are two separate issues:

How do links to explanations on song pages work?
How do URLs corresponding to standalone explanations work?

This diagram (full size here) should make things a bit clearer:

Answer 1

Here s a good solution... based on looking at your descriptions/diagram as well as having thought through this for previous websites.

Two key concepts to remember... and the rest is all details:

Don t show Google things you re not showing regular users. Doing anything tricky here can get you in big trouble with them and isn t really necessary anyways.
Use Progressive Enhancement to give your JavaScript users a better experience

This can be done like this...

On your lyrics page, create a permalink to each explanation like this:

<a href="/lyrics/ARTIST/SONG?note=NOTEID" onclick="showPopUpExplanation(NOTEID);">lyric snippet here</a>

Notice how we are using a QueryString (?) instead of a hash (#) so that Google (and JS-disabled users) treat this as a real, unique permalink URL.

Now, use Progressive Enhancement and add onclick handlers to all your .explanation-link links (as shown above or like @Dean suggested), to get the inpage popups to work.

You don t need to use # (hash) links at all for your JavaScript users. This is only necessary when you re trying to allow the browser s Back button to work with AJAX, but since you re showing a in-page popup (presumably with a "close" button), this isn t necessary at all.

Users who want to share a specific explanation with their friends will use your short (/NOTEID) url. These shortened URLs should be a 301 redirect to your real permalink (so search engines don t index both URLs).

Finally, to make the permalinks work you ll use a little server-side scripting so that visiting that page will show the popup right away. Do something like this:

<?php if (isset($_GET[ note ])): ?>
    <!-- place above the song lyrics; use CSS to style nicely for non-JS -->
    <div id="explanation"> 
        <?php printExplanation((int)$_GET[ note ]); ?>
    </div>

    <script type="text/javascript">
        $( #explanation ).hide(); // hide HTML explanation for JS users
        showPopUpExplanationFromDiv($( #explanation ));
    </script>
<?php endif; ?>

The important part here is that you re printing the explanation in HTML, rather than in JavaScript/JSON so that Google and non-JS users can see it, but progressively enhance for JS-users.

Answer 2

Don t use #, use the query string.

So, instead of http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633, you d http://rapexegesis.com/lyrics/ARTIST/SONG?note=2633

the # is specifically meant to be a part of the Same page, using it for something else is just not right. As I understand from your question this would achieve what you want.

Answer 3

Why not use a REST URL, similar to what is used on this site (look at your address bar). That way each link is different, and will go someplace correct. It will also work if javascript is disabled, as your server can process the url.

If you have javascript working then everything can be done without a page refresh, but this covers the base that the Google spider doesn t execute javascript.

Answer 4

You could change the link to actually go to a separate page with the content, and change the behaviour of the JavaScript to nullify the default action of that link (return false) and load things the way it is now.

Like this:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    $( .javascript-link ).click(function(){
            alert( usual behavior );
            return false;
        });
});
</script>
</head>
<body>

<a class="javascript-link" href="somewhere.html">click me</a>

</body>
</html>

Answer 5

You should just make it available both ways :

your links in bare bones HTML look like http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind/note-2636 and clinking on them make you go to another page which just displays the tooltip in pure HTML
when JS is activated, some js code scan all links and turns them into http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636.

This way, your code will be more accessible (even blind people, and they love music, can read you website). Since Google is the most famous blind web user in the word, he will understand it too.

Answer 6

It looks like Google wants to do the right thing. The truth is, I really hate their proposed solution. Still, it seems that they might be understanding any state fragment that starts with an exclamation point as stateful, and thus they should be treating them as unique.

http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636

becomes

http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#!note-2636

I maintain a library to manage this kind of state, and if they are, in fact, actually implementing this in their spiders already, then I ll add support for it, myself.

Answer 7

Use a url shortening service such as Bit.ly Url Shortening service. (You have to type in the url you would like it to be directed to). This will redirect google to the url. I haven t tested it so I am unsure if it will work.

EDIT: Hmm... Stackoverflow.com uses the # at the url and get it indexed by google, maybe you could ask them...? :D

Answer 8

Ok, so the situation, as I understand it, is that for each permalink:

Google needs to receive static HTML that corresponds only to the specific lyric in question.
The user needs to see the entire song, with the lyric highlighted.

One solution for you: browser-sniff on the server. Send Google the snippet, and send the user the entire page. With ASP.NET, you can use Server.Transfer to "redirect" the user without actually redirecting them in the browser and without AJAX.

<%@ Page Language="C#" %>
<script runat="server">
  private void Page_Load(object sender, System.EventArgs e) {
   if(!Request.Browser.Crawler) {
      // look up the realUrl for the entire song
      Server.Transfer(realUrl);
      }
   }
</script>
snippet for the specific lyric goes here and Google sees it, but users won t.

友情链接