使用hashbang还是不使用hashbang?

28

我正在开发一个新的网站,希望尽可能多地使用AJAX。基本上,我希望用户几乎不离开主页,并在弹出窗口、幻灯片、部分等中显示所有内容。

我们现有的网站排名已经很高,所以我也想让Google保持满意。我一直在阅读Google的“使AJAX应用程序可爬行”,并且理解我必须通过_escaped_fragment_为爬虫提供相同的内容。

问题
我想使用Umbraco来开发这个网站,它已经提供了SEO友好的URL。 即:

但问题是,我没有一种简单的方法来实施_escaped_fragment_而不破坏Umbraco核心(至少根据我的了解),使用我下面发布的答案(solution)也会让没有JavaScript的用户感到满意。 Win-Win 情况?你告诉我!=)

更新
昨天有另一个用户(现已删除)提出,Google不再使用_escaped_fragment_方法,并建议将其排除在外。这是真的吗? Google会真的运行AJAX来查看内容吗?

谢谢,
马可


7
目前这篇文章看起来更像是一篇博客文章。你应该把“解决方案”部分提取出来,作为一个答案发布。额外的好处是,这样做会更容易吸引其他人的答案。 - Daniel Pryden
谢谢@Daniel,我已经采纳了你的建议并将其发布为答案。 - Marko
@Marko 我理解哈希,但在 AJAX 网站的上下文中,感叹号有什么关系呢? - Dale Forester
@Marko:如果你想授予zzzzBov赏金,我可以投票将已删除的答案恢复(只有一个人无法恢复答案)。 - Oleg
对于任何考虑实现hashbangs的人,请确保您首先查看以下内容:http://danwebb.net/2011/5/28/it-is-about-the-hashbangs 和 http://blog.benward.me/post/3231388630。如果您正在考虑SEO友好的URL,则不应考虑hashbangs。hashbangs适用于*应用程序*而不是*网站*。 - Colin Pickard
3个回答

11

我采纳了@Daniel Pryden的建议,将其作为答案发布。

我考虑了这个问题,并想到 - 为什么不以老式的方式创建网站,创建实际页面等,然后执行以下步骤。

  1. 使用jQuery拦截主页上的所有内部链接,并在window.location.pathname之前添加一个哈希符号(#),从而触发hashchange事件。(见第3步)
  2. 在除主页外的所有页面上添加javascript重定向,将页面重定向回主页,但在哈希符号(#)后附加window.location.pathname。例如,Google爬取http://www.domain.com/about-us.aspx,但当用户访问该页面时,它们会被重定向到http://www.domain.com/#/about-us.aspx
  3. 在主页上,使用jQuery BBQ或类似的插件来监听hashchange事件,包括页面加载时,以便可以加载动态内容。根据请求是否是AJAX请求,Umbraco可以配置为提供部分或完整的页面内容。

这样,没有JavaScript的用户将拥有一个完整的(半好看的)网站,Google将爬取所有页面而没有任何问题,但带有JavaScript的用户将始终停留在主页上 - 并且实现了Web应用程序而不是Web网站的酷概念。


这与我在我的网站上所做的类似。普通链接只是目录/directory/file1,但如果用户访问它,它会重定向到我的主站点,并带有哈希值(#/directory/file1)。 - switz
1
这正是我所处的位置和我想出的东西(我真的很惊讶看到人们实际上改变URL而不仅仅是响应点击事件并使用JS更改哈希)。唯一无法解决的问题是在没有JavaScript的情况下使用户A向用户B共享带有哈希片段的链接。这是一个小众案例,但您考虑过吗?此外,在ajax片段加载之前的初始内容闪烁总是很烦人... - Wesley Murch
Switz,Google是否能夠正常爬取您的網站?@Wesley,UI已經開發完成,首頁期望在URL中有一個哈希值,此時它會變暗並顯示加載條,直到內容加載完成。我在本地主機上有一個很好的測試案例,但不幸的是我還不能上傳它。 - Marko
我曾经认为谷歌会惩罚重复内容,不确定这个解决方案是否算作重复内容。 - Soren

9

你是否考虑过使用HTML5历史会话管理?

这样,您就不必在新版浏览器中使用哈希值,用户也不会注意到任何变化。

稍微简化一下,您可以像这样做:

编辑:更新示例。

function route(path) {
    $.get(path, function(data) {
        //parse data
    });
}

if (typeof history.pushState !== 'undefined') 
{
    $(window).bind('popstate', function(e)
    {
        route(window.location.pathname);
    });
    $('a').click(function(event) {
        event.preventDefault();
        history.pushState({},'',this.href);
    });
} else {
    $(window).bind('hashchange', function(e)
    {
        route(window.location.hash);
    });
    $('a').click(function(event) {
        event.preventDefault();
        $(this).attr('href', '/#'+$(this).attr('href'));
    });
}

但是这种方式会导致用户无法在网站上收藏页面,因为URL永远不会改变。 - Marko
4
网址将会改变。这行代码会处理:history.pushState({},'',this.href); - Ewout Kleinsmann
旧浏览器会发生什么?有没有一个脚本可以处理跨浏览器兼容性问题? - Marko
1
嗯,你在我的回答中看到的代码片段正在检查HTML5历史管理支持。如果有支持,则使用它,如果没有,则回退到使用哈希标签。 - Ewout Kleinsmann
@marko:看看我更新的示例,给你一个正确方向的推动 :-) - Ewout Kleinsmann
显示剩余2条评论

0
使用jQuery BBQ,并在页面顶部使用一个js函数来检查是否有有效的哈希,如果有,则重定向到该页面。

我在网上搜寻了所有关于jQuery BBQ酱的信息,但是没有找到。虽然我听说它非常棒。 - Evik James

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接