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

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

Вопрос

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

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

Это было полезно?

Решение

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

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

  • Не показывайте 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.

Другие советы

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

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

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

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

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

Вы можете изменить ссылку, чтобы фактически перейти на отдельную страницу с содержимым, и изменить поведение 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>

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

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

Это выглядит как 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

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

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

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

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

  • 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.
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top