Come fare in modo che Google comprenda i collegamenti che attivano Javascript?

StackOverflow https://stackoverflow.com/questions/1806586

Domanda

Sto sviluppando un sito web che aiuti le persone a comprendere i testi rap.Gli utenti vedono il testo di una canzone rap e possono fare clic su determinati testi per vedere una spiegazione:

alt text (clicca qui per saperne di più)

Come puoi vedere, ogni spiegazione ha un permalink (in questo caso http://RapExegesis.com/2636).Ecco cosa succede quando visiti uno di questi permalink nel tuo browser:

  1. L'app cerca il brano e l'artista corretti e ti 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 viene caricata la pagina di un brano, l'app controlla se è presente una "nota-\d+" nel frammento dell'URL
  3. Se c'è, apre automaticamente la spiegazione corretta e la scorre per visualizzarla

Idealmente Google e altri motori di ricerca assocerebbero questi permalink alle relative spiegazioni.Tuttavia, poiché Google non capisce Javascript, questi due URL gli sembrano esattamente uguali:

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

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

Lirica:Trovami in cucina come un Simmons che monta la pasta frolla

Senso:"In cucina" si riferisce alla cottura del crack (cfr. Qui, Qui, E Qui)

Vanessa e Angela Simmons, le figlie ventenni del reverendo Run of Run DMC, correre Pasticcino, marchio di abbigliamento e scarpe

MODIFICARE: Il modo in cui inizialmente avevo posto la domanda era un po’ confuso.Ci sono due questioni separate:

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

Questo diagramma (a grandezza naturale qui) dovrebbe rendere le cose un po' più chiare:

alt text

È stato utile?

Soluzione

Ecco una buona soluzione ... basata sull'esame delle descrizioni / dei diagrammi e sull'esame di questi per i siti Web precedenti.

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

  • Non mostrare a Google cose che non stai mostrando agli utenti normali. Fare qualcosa di difficile qui può metterti in grossi guai con loro e non è comunque necessario.
  • Utilizza Progressive Enhancement per offrire ai tuoi utenti JavaScript un'esperienza migliore

Questo può essere fatto in questo modo ...

Nella pagina dei tuoi testi, crea un collegamento permanente ad ogni spiegazione come questa: 

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

Nota come stiamo utilizzando un QueryString (?) invece di un hash (#) in modo che Google (e gli utenti con disabilitazione di JS) lo trattino come un vero e unico URL permalink.

Ora usa Progressive Enhancement e aggiungi onclick gestori a tutti i tuoi .explanation-link link (come mostrato sopra o come @Dean suggerito ), per far funzionare i popup inpage.

Non è necessario utilizzare i collegamenti # (hash) per i tuoi utenti JavaScript. Questo è necessario solo quando stai cercando di consentire al pulsante Indietro del browser di funzionare con AJAX, ma poiché stai mostrando un popup in-page (presumibilmente con un pulsante & Quot; chiudi & Quot;), questo non è affatto necessario.

Gli utenti che desiderano condividere una spiegazione specifica con i loro amici useranno il tuo breve URL (/NOTEID). Questi URL abbreviati dovrebbero essere un reindirizzamento 301 al tuo vero permalink (quindi i motori di ricerca non indicizzano entrambi gli URL).

Infine, per far funzionare i permalink utilizzerai un piccolo scripting lato server in modo che visitando quella pagina mostrerai subito il popup . Fai qualcosa del genere: 

<?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 qui è che stai stampando la spiegazione in HTML , piuttosto che in JavaScript / JSON in modo che gli utenti Google e non JS possano vederlo, ma migliorino progressivamente per gli utenti JS .

Altri suggerimenti

Non usare #, usa la stringa di query.

Quindi, invece di http://rapexegesis.com/lyrics/ARTIST/SONG # note-2633 , http://rapexegesis.com/ testi / artista / canzone? notare = 2633

il # è pensato specificamente per far parte della stessa pagina, usarlo per qualcos'altro non è giusto. Come ho capito dalla tua domanda, ciò raggiungerebbe ciò che desideri.

Perché non utilizzare un URL REST, simile a quello utilizzato in questo sito (guarda la barra degli indirizzi). In questo modo ogni collegamento è diverso e andrà in un posto corretto. Funzionerà anche se JavaScript è disabilitato, poiché il tuo server può elaborare l'URL.

Se hai javascript funzionante, tutto può essere fatto senza un aggiornamento della pagina, ma questo copre la base che lo spider di Google non esegue javascript.

È possibile modificare il collegamento per andare effettivamente a una pagina separata con il contenuto e modificare il comportamento del JavaScript per annullare l'azione predefinita di quel collegamento (restituire false) e caricare le cose come sono adesso.

In questo modo: 

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

Dovresti solo renderlo disponibile in entrambi i modi:

In questo modo, il tuo codice sarà più accessibile (anche i non vedenti e adorano la musica, possono leggere il tuo sito Web). Poiché Google è l'utente web cieco più famoso della parola, lo capirà anche.

Sembra Google vuole fare la cosa giusta.La verità è che odio davvero la soluzione proposta.Tuttavia, sembra che potrebbero interpretare qualsiasi frammento di stato che inizia con un punto esclamativo come con stato, e quindi dovrebbero trattarlo come unico.

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 a biblioteca per gestire questo tipo di stato, e se, in effetti, lo stanno già implementando nei loro spider, allora aggiungerò io stesso il supporto per questo.

Utilizza un servizio di accorciamento url come Servizio di abbreviazione URL Bit.ly . (Devi digitare l'URL a cui desideri che sia diretto). Questo reindirizzerà Google all'URL. Non l'ho provato, 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

Ok, quindi la situazione, per quanto ho capito, è quella per ogni permalink:

  • Google deve ricevere codice HTML statico che corrisponde solo al testo specifico in questione.
  • L'utente deve vedere l'intero brano, 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 su & Quot; reindirizzare & Quot; l'utente senza reindirizzarli effettivamente 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.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top