Question

我正在开发一个网站，帮助人们理解说唱歌词。用户可以看到说唱歌曲的歌词，可以点击某些歌词来查看解释：

如您所见，每个解释都有一个固定链接（在本例中为http://RapExegesis.com/2636）。以下是您在浏览器中访问其中一个永久链接时会发生的情况：

该应用会查找正确的歌曲和艺术家，并将您重定向到http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633（在这种情况下为http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636）
当加载歌曲页面时，应用程序会检查URL片段中是否有“note- \ d +”
如果有，它会自动打开正确的解释，并将其滚动到视图中

理想情况下，Google和其他搜索引擎会将这些永久链接与其相应的解释相关联。但是，由于Google不了解Javascript，因此这两个网址看起来完全相同：

因此，http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind与Google的http://RapExegesis.com/2636看起来完全相同。

显然这并不理想。有什么想法吗？理想情况下，我想向搜索引擎展示http://RapExegesis.com/2636的不同版本 - 类似于

抒情：像席梦思鞭打糕点一样在厨房里抓住我

含义：“在厨房里”指的是烹饪裂缝（参见here，here和here）
     Vanessa和Angela Simmons，Run-DMC的Reverend Run的二十几岁的女儿，经营Pastry，一个服装和鞋子品牌

编辑：我最初提出问题的方式有点令人困惑。有两个不同的问题：

如何链接到歌曲页面上的解释？
与独立解释相对应的网址如何运作？

这个图表（full size here）应该让事情更清晰：

Answer 1

这是一个很好的解决方案......基于查看您的描述/图表以及为以前的网站考虑过这个问题。

要记住的两个关键概念......其余的都是细节：

不要向Google展示您未向常规用户展示的内容。在这里做任何棘手的事情可能会让你遇到麻烦，而且无论如何都不是必需的。
使用Progressive Enhancement为您的JavaScript用户提供更好的体验

这可以这样做......

在您的歌词页面上，为每个解释创建一个固定链接：

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

请注意我们如何使用QueryString（？）而不是哈希（＃），以便Google（以及禁用JS的用户）将此视为真实，唯一的永久链接网址。

现在，使用渐进式增强功能并将onclick个处理程序添加到您的所有.explanation-link链接中（如上所示或类似@Dean suggested），以使内嵌弹出窗口正常工作。

您不需要为JavaScript用户使用＃（哈希）链接。只有在您尝试允许浏览器的“后退”按钮使用AJAX时才需要这样做，但由于您正在显示页内弹出窗口（可能是“关闭”按钮），因此根本不需要这样做。 / p>

想要与朋友分享特定说明的用户将使用您的简短（/NOTEID）网址。这些缩短的网址应该是301重定向到您的真实固定链接（因此搜索引擎不会将这两个网址编入索引）。

最后，要使固定链接工作，您将使用一些服务器端脚本，以便访问该页面将立即显示弹出窗口。做这样的事情：

<?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用户

Answer 2

请勿使用＃，请使用查询字符串。

所以，不是http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633，而是http://rapexegesis.com/lyrics/ARTIST/SONG?note=2633

＃具体意味着是同一页面的一部分，使用它来做别的事情是不对的。正如我从你的问题中理解的那样，这将达到你想要的效果。

Answer 3

您可以将链接更改为实际转到包含内容的单独页面，并更改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>

Answer 4

为什么不使用REST网址，类似于此网站上使用的网址（查看地址栏）。这样每个链接都是不同的，并且会在某个地方正确。如果禁用了javascript，它也会起作用，因为您的服务器可以处理该URL。

如果你有javascript工作，那么一切都可以在没有页面刷新的情况下完成，但这涵盖了Google蜘蛛不执行javascript的基础。

Answer 5

你应该让它以两种方式提供：

您的骨干链接HTML看起来像http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind/note-2636并且它们上面的垃圾使您转到另一个只显示纯HTML工具提示的页面
当激活JS时，一些js代码扫描所有链接并将其转换为http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636。

这样，您的代码将更容易访问（即使是盲人，他们喜欢音乐，也可以阅读您的网站）。由于谷歌是这个词中最着名的盲人网络用户，他也会理解。

Answer 6

使用网址缩短服务，例如Bit.ly Url Shortening service。（您必须输入您希望将其定向到的网址）。这会将谷歌重定向到网址。我没有测试过，所以我不确定它是否会起作用。

编辑：嗯... Stackoverflow.com使用网址上的＃并将其编入谷歌索引，也许你可以问他们......？：d

Answer 7

看起来像Google wants to do the right thing。事实是，我真的很讨厌他们提出的解决方案。尽管如此，似乎他们可能会理解任何以感叹号开头为状态的状态片段，因此他们应该将它们视为唯一的。

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

变为

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

我维护library来管理这种状态，如果它们实际上已经在蜘蛛中实现了这个状态，那么我会自己添加对它的支持。

Answer 8

好的，正如我所理解的那样，每个永久链接的情况都是如此：

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.

如何让Google了解触发Javascript的链接？

8 个答案: