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

Question

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

(点击这里了解更多)

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

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

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

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

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

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

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

含义:"在厨房里"是指烹饪裂缝(参见此处,此处和此处)

Vanessa和Angela Simmons,Reverend Run of Run-DMC的二十几岁女儿,经营Pastry,一个服装和鞋子品牌

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

1. 如何链接到歌曲页面上的解释？
2. 与独立解释相对应的URL如何工作？

这个图(这里的完整尺寸)应该让事情更清晰:

Answer 1

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

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

• 不要向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 建议的那样),以使inpage弹出窗口正常工作.

您根本不需要为JavaScript用户使用#(哈希)链接.只有在您尝试允许浏览器的"后退"按钮使用AJAX时才需要这样做,但由于您正在显示页内弹出窗口(可能是"关闭"按钮),因此根本不需要这样做.

想要与朋友分享特定解释的用户将使用您的short(/NOTEID)网址.这些缩短的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用户.