Come far capire a Google i collegamenti che attivano Javascript?

Question

Sto sviluppando un sito Web che aiuta le persone a capire i testi rap. Gli utenti vedere il testo di una canzone rap e possono fare clic alcuni testi per vedere una spiegazione:

(click here for more)

Come si può vedere, ogni spiegazione ha un permalink (in questo caso http://RapExegesis.com/2636). Ecco cosa succede quando si visita uno di questi permalinks nel browser:

1. L'applicazione guarda in alto la canzone corretta e artista e reindirizza a http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633 (in questo caso http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636)
2. Quando una pagina canzone carica, il controlli app per vedere se c'è un "\ d nota- +" nel frammento URL
3. Se c'è, si apre automaticamente la spiegazione corretta, e rotoli di esso in vista

Idealmente Google e altri motori di ricerca assocerebbe questi permali nks con le loro spiegazioni corrispondenti. Tuttavia, perché Google non capisce Javascript, questi due URL esattamente lo stesso aspetto ad esso:

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

E quindi, http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind sembra esattamente lo stesso che http://RapExegesis.com/2636 a Google come bene.

Ovviamente questo non è l'ideale. qualche idea? Idealmente mi piacerebbe mostrare i motori di ricerca una versione diversa di http://RapExegesis.com/2636 - qualcosa come

Lyric: Catch me in cucina come un Simmons fustigazione pasticceria

Significato: "In cucina "si riferisce a cucinare fessura (cfr here, here e here)

Vanessa e Angela Simmons, le figlie di twentysomething Reverend Run di Run-DMC, eseguire 0.123.574,061197 millions, un marchio di abbigliamento e di scarpe

EDIT: Il modo in cui ho inizialmente posto la domanda era un po 'di confusione. Esistono due problemi separati:

1. Come funzionano i collegamenti alle spiegazioni sulle pagine di brani?
2. Come funzionano gli URL corrispondenti alle spiegazioni autonome?

Questo diagramma (full size here) dovrebbe rendere le cose un po 'più chiaro:

Answer 1

Ecco una buona soluzione ... in base a guardare il tuo descrizioni/Schema oltre ad aver pensato attraverso questo per i siti web precedenti.

Due concetti chiave da ricordare ... e il resto è tutti i dettagli:

• non mostrano Google le cose che non stai mostrando utenti regolari. Fare qualcosa di difficile qui può metterti nei guai con loro e non è comunque necessario.
• Usa Progressive Enhancement per offrire agli utenti una migliore esperienza JavaScript

Questo può essere fatto in questo modo ...

Nella pagina testi, creare un permalink per ogni spiegazione in questo modo:

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

Notate come siamo utilizzando un QueryString al posto di un cancelletto (#) in modo che Google (e JS (?) -disabilita gli utenti) trattano questo come un vero e proprio URL permalink.

Ora, usare Progressive Enhancement e aggiungere onclick gestori a tutti i tuoi .explanation-link link (come indicato sopra o come @Dean suggested), per ottenere il popup InPage al lavoro.

Non è necessario utilizzare i collegamenti n. (Hash) a tutti per gli utenti JavaScript. Questo è necessario solo quando stai cercando di consentire al pulsante Indietro del browser di funzionare con AJAX, ma dal momento che stai mostrando un popup in-page (presumibilmente con un pulsante "chiudi"), questo non è affatto necessario.

Gli utenti che desiderano condividere una spiegazione specifica con i propri amici utilizzeranno l'URL breve (/NOTEID). Questi URL accorciati dovrebbero essere reindirizzati 301 al tuo reale permalink (quindi i motori di ricerca non indicizzano entrambi gli URL).

Infine, per fare in modo che i permalink funzionino, è possibile utilizzare un po 'di script sul lato server in modo che visitando quella pagina venga immediatamente visualizzato il popup. Fare qualcosa di simile:

<?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; ?> 

La parte importante è che tu sei stampa la spiegazione in HTML, piuttosto che in JavaScript/JSON in modo che Google e non-JS gli utenti possono vedere, ma progressivamente migliorare per utenti JS.

Answer 2

Si potrebbe cambiare il link per andare effettivamente ad una pagina separata con il contenuto, e cambiare il comportamento del JavaScript per annullare l'azione predefinita di quel collegamento (restituisce false) e caricare le cose nel modo in cui è ora.

Ti piace questa:

<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 3

Perché non utilizzare un URL REST, simile a quello che viene utilizzato in questo sito (guardare la vostra barra degli indirizzi). In questo modo ogni link è diverso e andrà in un posto corretto. Funzionerà anche se javascript è disabilitato, in quanto il tuo server può elaborare l'url.

Se si dispone di JavaScript, tutto può essere eseguito senza un aggiornamento della pagina, ma questo copre la base che lo spider di Google non esegue javascript.

Answer 4

Non utilizzare #, utilizzare la stringa di query.

Così, invece di http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633, faresti http://rapexegesis.com/lyrics/ARTIST/SONG?note=2633

il # è specificamente destinata ad essere una parte della stessa pagina, di utilizzarlo per qualcosa di diverso non è solo giusto. Come ho capito dalla tua domanda, questo otterrebbe ciò che desideri.

Answer 5

Ok, quindi la situazione, se ho capito bene, è che per ogni permalink:

• Google ha bisogno di ricevere HTML statico che corrisponde solo alla lirica specifica in questione.
• L'utente deve vedere l'intera canzone, con il testo evidenziato.

Una soluzione per te: browser-sniff sul server. Invia a Google lo snippet e invia all'utente l'intera pagina. Con ASP.NET, è possibile utilizzare Server.Transfer per "reindirizzare" l'utente senza in realtà reindirizzarlo nel browser e senza 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. 

Answer 6

Si dovrebbe solo renderlo disponibile in entrambi i modi:

• tuoi link a nudo le ossa HTML assomigliano http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind/note-2636 e tintinnio su di loro farà passare ad un'altra pagina che visualizza solo il tooltip in HTML puro
• quando JS è attivato, alcuni codici js scansionano tutti i collegamenti e li trasformano in http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636.

In questo modo, il codice sarà più accessibile (anche i non vedenti, e amano la musica, possono leggere il sito Web). Dal momento che Google è il più famoso utente web cieco della parola, lo capirà anche lui.

Answer 7

Utilizzare un servizio di riduzione URL come Bit.ly Url Shortening service. (Devi digitare l'url a cui vorresti che fosse indirizzato). Questo reindirizzerà Google all'URL. Non l'ho testato quindi non sono sicuro che funzionerà.

MODIFICA: Hmm ... Stackoverflow.com utilizza il # nell'url e lo fa indicizzare da google, forse potresti chiedere loro ...? : D

Answer 8

Sembra Google wants to do the right thing. La verità è che odio davvero la loro soluzione proposta. Tuttavia, sembra che potrebbero capire qualsiasi frammento di stato che inizia con un punto esclamativo come stato, e quindi dovrebbero trattarli come unici.

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

diventa

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

mantengo un library per gestire questo tipo di stato, e se sono, infatti, in realtà l'applicazione del presente nelle loro ragni già, allora io aggiungo il supporto per esso , me stessa.