How to get Google to understand links that trigger Javascript?

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:

(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:

1. 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)
2. When a song page loads, the app checks to see whether there's a "note-\d+" in the URL fragment
3. 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:

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

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:

1. How do links to explanations on song pages work?
2. 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.