Comment faire en sorte que Google comprenne les liens qui déclenchent Javascript?

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

Question

Je développe un site Web qui aide les gens à comprendre les paroles de rap. Les utilisateurs voient les paroles d'une chanson de rap et peuvent cliquer sur certaines paroles pour voir une explication:

alt text (cliquez ici pour en savoir plus)

Comme vous pouvez le constater, chaque explication a un lien permanent (dans ce cas, http://RapExegesis.com/2636). Voici ce qui se passe lorsque vous visitez l'un de ces permaliens dans votre navigateur:

  1. L’application recherche la chanson et l’artiste corrects et vous redirige vers http: // rapexegesis.com/lyrics/ARTIST/SONG#note-2633 (dans ce cas, http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636 )
  2. Lors du chargement d'une page de chanson, l'application vérifie s'il existe un " note- \ d + " dans le fragment d'URL
  3. Si tel est le cas, il ouvre automatiquement la bonne explication et la fait défiler dans la vue

Idéalement, Google et les autres moteurs de recherche associeraient ces liens permanents aux explications correspondantes. Cependant, comme Google ne comprend pas le langage Javascript, ces deux URL lui ressemblent:

Et par conséquent, http://rapexegesis.com/lyrics/ L’état d’esprit de Jay-z / Empire est identique à celui de http://RapExegesis.com/ 2636 à Google également.

Évidemment, ce n’est pas idéal. Des pensées? Idéalement, j'aimerais montrer aux moteurs de recherche une version différente de http://RapExegesis.com/2636 - quelque chose comme

  

Lyric : Attrapez-moi dans la cuisine comme une pâtisserie Simmons

     

Signification : & "Dans la cuisine &"; fait référence à la cuisson du crack (cf. ici , ici et ici )

     

Vanessa et Angela Simmons, les filles d'une vingtaine d'années du révérend Run de Run-DMC , exécutez Pâtisserie , une marque de vêtements et de chaussures

     

MODIFIER: La façon dont j'ai posé la question à l'origine était un peu déroutante. Il existe deux problèmes distincts:

  1. Comment fonctionnent les liens vers les explications sur les pages de chansons?
  2. Comment fonctionnent les URL correspondant aux explications autonomes?

Ce diagramme ( ici en taille réelle ) devrait rendre les choses un peu plus claires:

alt text

Était-ce utile?

La solution

Voici une bonne solution ... basée sur vos descriptions / diagrammes et sur votre réflexion pour les sites Web précédents.

Deux concepts clés à retenir ... et le reste ne contient que des détails:

  • Ne montrez pas à Google les choses que vous ne montrez pas aux utilisateurs habituels. Faire quelque chose de délicat ici peut vous causer de gros problèmes et n’est pas vraiment nécessaire de toute façon.
  • Utilisez Amélioration progressive pour offrir à vos utilisateurs JavaScript une meilleure expérience

Cela peut être fait comme ça ...

Sur la page de vos paroles, créez un lien permanent pour chaque explication comme ceci: 

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

Notez que nous utilisons une chaîne QueryString (?) au lieu d'un hachage (#) afin que Google (et les utilisateurs désactivés par JS) traitent cette adresse comme une véritable URL de permalien unique.

Maintenant, utilisez Progressive Enhancement et ajoutez des onclick gestionnaires à tous vos .explanation-link liens (comme indiqué ci-dessus ou comme @Dean suggéré ), pour faire fonctionner les popups inpage.

Vous n'avez pas besoin d'utiliser de liens # (hash) du tout pour vos utilisateurs JavaScript. Cela n’est nécessaire que lorsque vous essayez d’autoriser le bouton Précédent du navigateur à fonctionner avec AJAX, mais comme vous affichez une fenêtre contextuelle sur la page (probablement avec un bouton & "Fermer &";), Cette n'est pas nécessaire du tout.

Les utilisateurs qui souhaitent partager une explication spécifique avec leurs amis utiliseront votre URL courte (/NOTEID). Ces URL abrégées doivent constituer une redirection 301 vers votre permalien réel (afin que les moteurs de recherche n'indexent pas les deux URL).

Enfin, pour que les liens permanents fonctionnent, vous utiliserez un petit script côté serveur, de sorte que la visite de cette page affiche immédiatement la fenêtre contextuelle . Faites quelque chose comme ça: 

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

L'important, c'est que vous imprimiez l'explication en HTML plutôt qu'en JavaScript / JSON pour que Google et les utilisateurs non-JS puissent la voir, mais s'améliorent progressivement pour les utilisateurs de JS. .

Autres conseils

N'utilisez pas #, utilisez la chaîne de requête.

Donc, au lieu de http://rapexegesis.com/lyrics/ARTIST/SONG # note-2633 , vous http://rapexegesis.com/ paroles / ARTISTE / CHANSON? note = 2633

le # est spécifiquement destiné à faire partie de la même page, son utilisation pour autre chose n’est pas correcte. D'après ce que j'ai compris de votre question, cela donnerait ce que vous voulez.

Pourquoi ne pas utiliser une URL REST, similaire à celle utilisée sur ce site (consultez la barre d'adresse). De cette façon, chaque lien est différent et ira quelque part correctement. Cela fonctionnera également si javascript est désactivé, car votre serveur peut traiter l’URL.

Si javascript fonctionne, tout peut être fait sans actualisation de la page, mais cela couvre la base sur laquelle l'araignée de Google n'exécute pas le javascript.

Vous pouvez modifier le lien pour accéder à une page distincte contenant le contenu, et modifier le comportement du code JavaScript pour annuler l'action par défaut de ce lien (renvoyer la valeur false) et charger les choses telles qu'elles sont maintenant.

Comme ceci: 

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

Vous devriez simplement le rendre disponible dans les deux sens:

De cette façon, votre code sera plus accessible (même les aveugles qui aiment la musique peuvent lire votre site Web). Étant donné que Google est le plus célèbre internaute aveugle du monde, il le comprendra également.

Cela ressemble à Google veut faire ce qui est bien chose . La vérité est que je déteste vraiment la solution proposée. Néanmoins, il semble qu'ils pourraient comprendre n'importe quel fragment d'état commençant par un point d'exclamation en tant qu'état, et qu'ils devraient donc les traiter comme uniques. 

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

devient 

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

Je conserve une bibliothèque pour gérer ce type d'état et, le cas échéant, implémentant réellement cela dans leurs araignées déjà, alors je vais ajouter un soutien pour cela, moi-même.

Utilisez un service de raccourcissement d'URL tel que Service de raccourcissement d'URL Bit.ly . (Vous devez taper l'URL vers laquelle vous voudriez qu'il soit dirigé). Cela va rediriger Google vers l'URL. Je ne l'ai pas testé, donc je ne suis pas sûr que cela fonctionne.

EDIT: Hmm ... Stackoverflow.com utilise le # de l'URL pour le faire indexer par Google. Vous pourriez peut-être leur demander ...? : D

Ok, la situation, si je comprends bien, est-ce que pour chaque lien permanent:

  • Google doit recevoir du code HTML statique qui correspond uniquement aux paroles spécifiques en question.
  • L'utilisateur doit voir la chanson en entier avec les paroles en surbrillance.

Une solution pour vous: browser-sniff sur le serveur. Envoyez l'extrait à Google et envoyez à l'utilisateur la page complète. Avec ASP.NET, vous pouvez utiliser Server.Transfer pour & "Rediriger &"; l'utilisateur sans les rediriger dans le navigateur et sans 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.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top