我刚刚注意到,我们过去使用的长而复杂的Facebook网址现在看起来像这样:
http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345
据我回忆,今年早些时候,它只是一个普通的URL片段,比如字符串(从#开始),没有感叹号。但现在它是shebang或hashbang(#!),我以前只在shell脚本和perl脚本中看到过。
新的twitter网址现在也采用了#!符号。例如,Twitter配置文件的URL现在如下所示:
http://twitter.com/#!/BoltClock
#!现在是否在URL中扮演了一些特殊的角色,比如对于某个Ajax框架,或者由于新的Facebook和Twitter界面现在基本上是半封闭的?在我的URL中使用这个会对我的Web应用程序有任何好处吗?
- 嗯,我得查一下shebang是什么…en.wikipedia.org/wiki/shebang_k%28unix%29
- 这就是为什么我对它在Facebook的网址上做了什么感到困惑的原因。
- fwiw,它不只是shell和perl脚本,而是任何在类Unix系统上运行的脚本。阿!行告诉shell该脚本的解释器是什么…当然,我的评论与Facebook或Twitter无关
- 谢谢,黑客新闻!(以评论的形式离开,这样我就不想回避我的问题,也不认为有必要这样做)
- hashbang因所有错误的原因而被美化,它打破了最佳实践,并破坏了渐进增强和优雅降级的机会。请使用其他解决方案。
- 请注意,2015年10月,谷歌不赞成他们在2009年推出的hashbang!因此,对于新的应用程序,您不再需要为SEO做这件事。现在,在谷歌的规范页面顶部只有一句含蓄的白色评论:"自2015年10月起,这项建议被正式否决。"
此技术现在已被弃用。
这用来告诉谷歌如何索引页面。
https://developers.google.com/webmasters/ajax-crawling/
这种技术主要被使用HTML5旁边引入的JavaScriptHistoryAPI的能力所取代。对于像www.example.com/ajax.html#!key=value这样的URL,Google将检查该URL www.example.com/ajax.html?_escaped_fragment_=key=value以获取内容的非Ajax版本。
- 啊,不知道我是怎么错过的;看起来它已经存在了很长一段时间了。谢谢!
- 你确定只有这些吗?我经常发现页面加载挂在Facebook上的shebang url上(即使在多次重新加载之后),但是如果手动删除!这是有效的。更不用说,您经常会得到"1.5个URL"(即,旧的URL仍然存在,只是添加了新的部分(即photo.php)?ID=…两次,但身份证不同)。更不用说"!"也被添加到Facebook的邮件URL中,这可能是不可索引的。无论如何,我觉得shebang非常烦人,因为它似乎是我慢主页上出现如此多页面错误的原因。
- Facebook有漏洞并不会使这些漏洞成为URL中两个字符的错误。如果正确地对站点进行编码以理解和生成它们,那么爬行式Ajax URL就非常方便。Facebook上还有很多其他问题。
- @佩特里:我只在Facebook上看到过这个问题。我同意,它一直把我推上(非Facebook)墙。
- 旧的URL通常保持不变,因为Facebook处理该URL的初始请求(即照片),但随后的导航通过Ajax处理在同一个页面上。所以,您可能在一个URL为photo.php的页面上查看一个配置文件,但这是因为您点击了周围的内容。
- 至于搜索引擎,拥有一个可索引的Ajax URL并不比拥有一个可索引的非Ajax URL更能使页面获得索引。Facebook使用这种URL格式不仅仅是为了Google的利益,它还使得通过Ajax在Facebook上访问的页面可以在其他情况下成为书签。
- 转义片段是个好主意(见mambopics.com),但至少在必应(和facebook-forum.developers.facebook.net/viewtopic.php)之前?ID=63698)实现了它,我认为会有更低的采用率,因为每个人都需要做某种双URL系统;一个hash-bang URL用于谷歌,另一个用于必应(和其他)。
- 有关一些有趣的警告,请阅读本文:isolani.co.uk/blog/javascript/breakingthewebwithhashbangs
- hashbang因所有错误的原因而被美化,它打破了最佳实践,并破坏了渐进增强和优雅降级的机会。请使用其他解决方案。
- 作为顶级+公认的答案,我认为用一些不仅仅是链接的东西更新它是值得的。
- @大禹里更新了一点。
- 截至2015年10月14日,谷歌已经否决了该技术:googlewebmastercentral.blogspot.com/2015/10/…
octothorpe/number sign/hashmark在URL中具有特殊意义,它通常标识文档节的名称。精确的术语是,哈希后面的文本是URL的锚定部分。如果您使用维基百科,您将看到大多数页面都有一个目录,并且您可以使用锚定跳转到文档中的部分,例如:
https://en.wikipedia.org/wiki/Alan_Turing早期计算机和图灵测试
https://en.wikipedia.org/wiki/Alan_Turing标识页面,Early_computers_and_the_Turing_test是锚。Facebook和其他由javascript驱动的应用程序(如我自己的Wood&Stones)使用锚的原因是,它们希望页面可以书签(如对该答案的评论所建议的那样)或支持后退按钮,而不需要从服务器重新加载整个页面。
为了支持书签和后退按钮,需要更改URL。但是,如果将页面部分(使用window.location = 'http://raganwald.com';之类的内容)更改为其他URL或不指定锚,浏览器将从该URL加载整个页面。在Firebug或Safari的JavaScript控制台中尝试此操作。加载http://minimal-github.gilesb.com/raganwald。现在在javascript控制台中,键入:
1
| window.location = 'http://minimal-github.gilesb.com/raganwald'; |
您将看到从服务器刷新页面。现在类型:
1
| window.location = 'http://minimal-github.gilesb.com/raganwald#try_this'; |
啊哈!没有页面刷新!Type:
1
| window.location = 'http://minimal-github.gilesb.com/raganwald#and_this'; |
仍然没有刷新。使用后退按钮查看这些URL是否在浏览器历史记录中。浏览器注意到我们在同一个页面上,但只是更改了锚,所以它不会重新加载。由于这种行为,我们可以有一个单独的javascript应用程序,它在浏览器中显示在一个"页面"上,但是有许多可书签的部分都与后退按钮相关。当用户进入不同的"状态"时,应用程序必须更改锚定,同样,如果用户使用后退按钮、书签或链接加载包含锚定的应用程序,应用程序必须还原适当的状态。
这样就有了:锚为JavaScript程序员提供了一种机制,使书签、可索引和后退按钮友好的应用程序。这种技术有一个名字:它是一个单页接口。
另外,这项技术还有第四个好处:通过Ajax加载页面内容,然后将其注入当前的DOM比加载新页面要快得多。除了速度增加之外,还可以在程序员的控制下执行其他一些技巧,如在后台加载某些部分。
P.P.S.鉴于所有这些,"bang"或感叹号进一步暗示了谷歌的网络爬虫可以从服务器以稍微不同的URL加载完全相同的页面。请参见Ajax爬行。另一种技术是使每个链接指向一个服务器可访问的URL,然后使用不引人注目的javascript将其更改为带有锚的SPI。
这里又是一个关键链接:单页界面声明
- "但是,如果网络爬虫想要索引,没有这种优化的应用程序仍然可以爬行。"不是这样。哈希不会发送到服务器。
- 仅供参考:self.document.location.hash提供此哈希值
- 哈希不会发送到服务器。抓得好!
- 很遗憾,发送到服务器的散列是独立于客户端的。当然,Google目前可能不会将哈希发送到服务器,如果它发送了,我会很惊讶,但是有些东西(和一些客户机)可能会发送这个部分。(就像某些Web客户机解析URL客户端的"./../"部分一样,其他客户机将按原样将其发送到Web服务器)
- 尽管散列值可能不会被发送到服务器,但这并不能阻止谷歌对其进行索引。如果它看到baz</a>,它可能会将"baz"与"foobar"关联起来,只遵循"foobar"部分,但仍然没有理由不能记录"tag"<->"baz"关联,或者在已发布的链接和搜索结果中显示该数据。它可以假设"foobar"和"foobar tag"是等效的,即:不索引"foobar tag"的真实内容,但它不会停止它的有用性。
- 除了单个段落"pps"之外,整个答案都是多余的。
- @我不这么认为,我认为对于一个想知道如何和为什么的人(包括我),这是一个完美的答案。你的评论对这个答案也没有任何价值。
- @想象:我迟到了,但90%的问题根本没有涉及到我问题的#!方面。所以他说这是多余的。这里的上升投票数可能是因为当我的问题向黑客新闻提出时流量很大,再加上这个答案的长度太长。
- 准确地说,URL中的#引用的实体是HTML标记的ID属性。名称ID是指ID是唯一的,这意味着整个网站上(应该)只有一个带有该ID的标签,因此带有hashbang(#!some_page)的URL和没有hashbang的URL一样唯一。
首先:我是Raganwald引用的单页界面宣言的作者
正如Raganwald所解释的,Facebook和Twitter中使用的单页面界面(SPI)方法最重要的方面是在URL中使用hash-#。
添加字符!只是为了谷歌的目的,这个符号是谷歌的"标准",用于对Ajax(在极端的单页界面网站)上密集的网站进行爬行。当google的爬虫程序找到一个带有#!的URL时,它知道存在一个提供相同页面"状态"的替代传统URL,但在这种情况下是加载时间。
尽管#!的组合对seo非常有意思,但它只有google支持(据我所知),通过一些javascript技巧,你可以建立与任何网络爬虫(yahoo,bing…)兼容的spi网站seo。
SPI宣言和演示没有使用Google的!格式的散列,这个符号可以很容易地添加,SPI爬行更容易(更新:现在!符号被使用,并与其他搜索引擎保持兼容)。
看看这个教程,它是一个简单的itsnat spi站点的例子,但是您可以为其他框架选择一些想法,这个例子与任何网络爬虫都是SEO兼容的。
困难的问题是生成任何(或选定的)"Ajax页面状态"作为SEO的纯HTML,在它的nat中非常容易和自动,同一站点同时是SPI或基于SEO的页面(或当为可访问性禁用javascript时)。对于其他Web框架,您可以使用双站点方法,一个站点基于SPI,另一个基于SEO的页面,例如,Twitter使用这种"双站点"技术。
- 渐进增强原理呢?网站不应因禁用javascript而崩溃。相信我,javascript不仅在过时的浏览器中被禁用,而且被许多不喜欢执行随机JS的安全意识用户禁用。
如果您考虑采用这个hashbang约定,我会非常小心的。
Once you hashbang, you can’t go back. This is probably the stickiest issue. Ben’s post put forward the point that when pushState is more widely adopted then we can leave hashbangs behind and return to traditional URLs. Well, fact is, you can’t. Earlier I stated that URLs are forever, they get indexed and archived and generally kept around. To add to that, cool URLs don’t change. We don’t want to disconnect ourselves from all the valuable links to our content. If you’ve implemented hashbang URLs at any point then want to change them without breaking links the only way you can do it is by running some JavaScript on the root document of your domain. Forever. It’s in no way temporary, you are stuck with it.
您真的想使用pushstate而不是hashbang,因为让您的URL变得丑陋,并且可能永远被破坏,这是hashbang的一个巨大且永久的缺点。
- 我认为你对hashbang的批评是正确的,但是仅仅使用pushstate作为替代,意味着我们将失去在基于URL的单页应用程序中加载内容的能力。所以不能共享URL。
- 我在工作中也遇到了类似的问题——我们已经开始使用page.js(使用pushstate)进行单页导航,以前我们使用hasher和crossroads(hash-bashed)。因此,我们需要拯救像/blah#foo/feep/baz?stuff=nonsense这样的道路。新的路径等价物将是/blah/foo/feep/baz?stuff=nonsense(注替换为/)。我只是通过在我的设置中有一个路径捕获/blah,并检查它是否有,如果有,在斜线后面附加散列的内容。营救。
为了更好地跟进这一切,Twitter——hashbang url和单页面界面的先驱之一——承认hashbang系统长期以来运行缓慢,事实上他们已经开始改变决定并返回旧的学校链接。
有关这方面的文章在这里。
我一直假设!只是表示后面的哈希片段对应于一个URL,!取代了站点根或域。理论上,它可以是任何东西,但看起来GoogleAjax爬行API喜欢这样。
当然,散列只是表示没有进行真正的页面重新加载,所以是的,它是用于Ajax的。编辑:拉甘瓦尔德做了一个可爱的工作,更详细地解释这一点。
上面的答案很好地描述了为什么以及如何在Twitter和Facebook上使用它,我错过的是解释默认情况下#所做的……
在"普通"(不是单页应用程序)上,可以通过将元素ID放在URL中hash #之后,将hash锚定到具有ID的任何元素。
例子:
(在chrome上)单击f12或rigt mouse和Inspect element。
然后取id="answer-10831233"并添加到url,如下所示
https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233
你会得到一个跳转到页面上那个元素的链接
什么是shebang/hashbang(!)在Facebook和Twitter的新网址上?
通过以上述答案中描述的方式使用#,您将引入冲突行为…尽管我不会因为它而放松睡眠…从角度上看,它变得有点像一个标准……
- 拉甘瓦尔德的回答包含了你说你错过的解释。即使如此,我也不明白这个问题如何从一个关于如何工作的教程中获益——这个问题假设读者已经熟悉了URL片段,而且这个功能在这里并不真正相关,除了你关于冲突行为的评论。
- @boltclock-hi-boltclock,但是如果不解释默认行为是什么,说"它将发生冲突",并不能让读者知道什么是危险的,什么样的功能可能会丢失……我只想用图片给出很好的答案,如果我看到一些东西丢失了,我可以使它们尽可能完整…