Geek Answers Handbook

How to make Google understand links that run Javascript?

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

alt text (click here for more information)

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:

Ideally, Google and other search engines associate these permalinks with their respective explanations. However, since Google does not understand Javascript, these two URLs look exactly the same:

And so http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind looks exactly like http://RapExegesis.com/2636 on Google.

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

Lyric : Catch me in the kitchen like a drink in the Simmons

Meaning : “In the kitchen” refers to the preparation of a crack (see here , here , and here )

Vanessa and Angela Simmons, twentysomething of Rev. Run Run-DMC's daughter, run Pastry , a brand of clothing and shoes

EDIT: The way I originally asked this question was a bit confusing. There are two separate problems:

  • How do links to explanations on song pages work?
  • How do URLs work with offline explanations?

This chart ( full size here ) should make things a little clearer:

alt text

+6
javascript redirect seo search-engine
source share
8 answers

Here's a good solution ... based on your descriptions / diagrams, as well as thinking it over for previous websites.

Two key concepts to remember ... and all other details:

  • Do not show Google things in which you do not display regular users. Doing something complicated here can cause you big problems with them, and in fact it is not necessary.
  • Use Progressive Enhancement to give your JavaScript users a better experience.

This can be done as follows:

On your texts page, create a permalink for each explanation, for example:

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

Please note that we use QueryString (?) Instead of a hash (#) so that Google users (and JS-disabled) see this as a truly unique link URL.

Now use Progressive Enhancement and add onclick handlers to all your .explanation-link links (as shown above or as @Dean) to get inpage pop-ups to work.

You do not need to use # (hash) links at all for your JavaScript users. This is only necessary if you are trying to allow the browser back button to work with AJAX, but since you are showing a pop-up window (presumably with a close button), this is optional.

Users who want to share a specific explanation with their friends will use your short ( /NOTEID ) url. These shortened URLs should be redirected 301 to your real permalink (therefore, search engines do not index both URLs).

Finally, to make permalinks work, use small server-side scripts to immediately see this page pop up . 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 print the explanation in HTML , not JavaScript / JSON, so that Google and non-JS users can see it, but gradually improve the JS users.

+14
source share

Do not use #, use the query string.

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

# is specifically designed to be part of the same page, using it for something else, this is simply wrong. As I understand from your question, this will achieve what you want.

+4
source share

You can change the link to go to a separate page with the content, as well as change the JavaScript behavior to cancel the default action of this link (return false) and load things as they are 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>
+1
source share

Why not use a REST URL similar to what is used on this site (look at your address bar). Thus, each link is different and will be fixed somewhere. It will also work if javascript is disabled, as your server can handle the url.

If javascript works for you, everything can be done without refreshing the page, but this covers the base in which Google Spider does not execute javascript.

+1
source share

You should just make it available in both directions:

Thus, your code will be more accessible (even blind people, and they love music, can read your site). Since Google is the most famous blind user in this word, he will understand this too.

+1
source share

Use a URL shortening service, such as the Bit.ly Url Shortening service . (You need to enter the URL you want it to be directed to). This will redirect google to the url. I have not tested it, so I'm not sure if it will work.

EDIT: Hmm ... Stackoverflow.com uses # in the URL and indexes it on Google, maybe you could ask them ...?: D

0
source share

It looks like Google wants to do the right thing . In truth, I really hate their proposed solution. However, it seems that they can understand any fragment of a state that begins with an exclamation mark as a state, and therefore they should consider 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 actually actually implement it in their spiders, then I will add support, myself.

0
source share

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

  • Google should receive static HTML that matches only the specific lyrics in question.
  • The user should see the whole song, highlighting the lyrics.

One solution for you: browser news on the server. Send a snippet to Google and send the entire page to the user. With ASP.NET, you can use Server.Transfer to "redirect" the user without actually redirecting them to 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.
-one
source share

More articles:


All Articles