Как заставить Google понимать ссылки, которые запускают Javascript? - PullRequest
Новая
       17

Как заставить Google понимать ссылки, которые запускают Javascript?

6 голосов
/ 27 ноября 2009

Я занимаюсь разработкой веб-сайта, который помогает людям понимать слова рэпа. Пользователи видят текст песни рэпа и могут щелкнуть определенные слова, чтобы увидеть объяснение:

alt text (нажмите здесь для более)

Как видите, каждое объяснение имеет постоянную ссылку (в данном случае http://RapExegesis.com/2636).) Вот что происходит, когда вы посещаете одну из этих постоянных ссылок в своем браузере:

  1. Приложение ищет правильную песню и исполнителя и перенаправляет вас на http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633 (в данном случае http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636)
  2. Когда страница песни загружается, приложение проверяет, есть ли во фрагменте URL «note- \ d +»
  3. Если есть, он автоматически открывает правильное объяснение и прокручивает его в поле зрения

В идеале Google и другие поисковые системы должны связывать эти постоянные ссылки с соответствующими пояснениями. Однако, поскольку Google не понимает Javascript, эти два URL выглядят абсолютно одинаково:

И, следовательно, http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind выглядит так же, как http://RapExegesis.com/2636 для Google.

Очевидно, это не идеально. Какие-нибудь мысли? В идеале я хотел бы показать поисковым системам другую версию http://RapExegesis.com/2636 - что-то вроде

Лирика : Поймай меня на кухне, как бисквит Симмонса

Значение : «На кухне» означает приготовление трещины (ср. здесь , здесь и здесь )

Ванесса и Анджела Симмонс, двадцатилетние дочери Преподобного Ран Run-DMC , пробег Кондитерские изделия , бренд одежды и обуви

РЕДАКТИРОВАТЬ: То, как я первоначально поставил вопрос, было немного запутанным. Есть две отдельные проблемы:

  1. Как работают ссылки на объяснения на страницах песен?
  2. Как работают URL-адреса, соответствующие отдельным пояснениям?

Эта диаграмма ( полный размер здесь ) должна прояснить ситуацию:

alt text

Ответы [ 8 ]

14 голосов
/ 05 декабря 2009

Вот хорошее решение ... основанное на просмотре ваших описаний / диаграмм, а также обдумав это для предыдущих сайтов.

Два ключевых понятия, которые нужно запомнить ... а все остальное - все детали:

  • Не показывать Google то, что не показывает обычным пользователям. Если вы сделаете что-нибудь хитрое, у вас могут возникнуть большие проблемы, и в любом случае это не обязательно.
  • Используйте Прогрессивное улучшение , чтобы улучшить работу пользователей JavaScript

Это можно сделать так ...

На своей странице лирики создайте постоянную ссылку на каждое объяснение, подобное этому: 

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

Обратите внимание, что мы используем QueryString (?) Вместо хеша (#) , чтобы Google (и пользователи с отключенной JS) воспринимали это как реальный, уникальный URL-адрес постоянной ссылки.

Теперь, используйте Progressive Enhancement и добавьте обработчики onclick ко всем вашим .explanation-link ссылкам (как показано выше или как @Dean предложил ), чтобы заставить всплывающие окна работать.

Вам вообще не нужно использовать # (хэш) ссылки для ваших пользователей JavaScript. Это необходимо только в том случае, если вы пытаетесь разрешить кнопке «Назад» браузера работать с AJAX, но, поскольку вы показываете всплывающее окно на странице (предположительно, с кнопкой «Закрыть»), это вовсе не обязательно.

Пользователи, которые хотят поделиться конкретным объяснением со своими друзьями, будут использовать ваш короткий (/NOTEID) URL. Эти сокращенные URL-адреса должны быть перенаправлением 301 на вашу реальную постоянную ссылку (поэтому поисковые системы не индексируют оба URL-адреса).

Наконец, чтобы заставить работать постоянные ссылки, вы будете использовать небольшой сценарий на стороне сервера, чтобы при посещении этой страницы сразу же появлялось всплывающее окно . Сделайте что-то вроде этого: 

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

Важной частью здесь является то, что вы печатаете объяснение в HTML , а не в JavaScript / JSON, чтобы пользователи Google и не-JS могли его видеть, но постепенно улучшают его для пользователей JS.

4 голосов
/ 01 декабря 2009

Не используйте #, используйте строку запроса.

Итак, вместо http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633, вы бы http://rapexegesis.com/lyrics/ARTIST/SONG?note=2633

символ # специально предназначен для того, чтобы быть частью той же страницы, использовать его для чего-то другого просто не правильно. Как я понимаю из твоего вопроса, это достигнет того, что ты хочешь.

1 голос
/ 05 декабря 2009

Вы должны просто сделать его доступным в обоих направлениях:

Таким образом, ваш код станет более доступным (даже слепые люди, которые любят музыку, могут прочитать ваш сайт). Поскольку Google является самым известным слепым веб-пользователем в мире, он тоже это поймет.

1 голос
/ 27 ноября 2009

Почему бы не использовать REST URL, аналогичный тому, который используется на этом сайте (посмотрите на свою адресную строку). Таким образом, каждая ссылка будет отличаться, и все будет правильно. Это также будет работать, если JavaScript отключен, так как ваш сервер может обрабатывать URL.

Если у вас работает javascript, тогда все может быть сделано без обновления страницы, но это касается основы того, что паук Google не выполняет javascript.

1 голос
/ 27 ноября 2009

Вы можете изменить ссылку, чтобы фактически перейти на отдельную страницу с содержимым, и изменить поведение JavaScript, чтобы аннулировать действие по умолчанию для этой ссылки (вернуть false) и загружать вещи такими, какие они есть сейчас.

Как это: 

<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>
0 голосов
/ 06 декабря 2009

Похоже, Google хочет поступить правильно . Правда, я действительно ненавижу их предложенное решение. Тем не менее, кажется, что они могут понимать любой фрагмент состояния, начинающийся с восклицательного знака, как состоящий из состояний, и поэтому им следует рассматривать их как уникальные. 

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

становится 

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

У меня есть библиотека для управления такого рода состоянием, и если они фактически уже реализуют это в своих пауках, то я сам добавлю поддержку для этого.

0 голосов
/ 05 декабря 2009

Используйте сервис сокращения URL, например Bit.ly Сервис сокращения URL . (Вы должны ввести URL-адрес, на который вы хотите, чтобы он был направлен). Это перенаправит Google на URL. Я не проверял его, поэтому не уверен, сработает ли он.

РЕДАКТИРОВАТЬ: Хм ... Stackoverflow.com использует # в URL и индексировать его с помощью Google, может быть, вы могли бы спросить их ...? : D

0 голосов
/ 01 декабря 2009

Хорошо, поэтому, насколько я понимаю, ситуация такова для каждой постоянной ссылки:

  • Google необходимо получить статический HTML, который соответствует только конкретной лирике.
  • Пользователь должен увидеть всю песню, с выделенной лирикой.

Одно решение для вас: браузер-снифф на сервере. Отправьте Google фрагмент и отправьте пользователю всю страницу. В ASP.NET вы можете использовать Server.Transfer для «перенаправления» пользователя без фактического перенаправления его в браузере и без 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.
...