pushState和SEO

Question

很多人一直在说,使用pushState而不是hashbang.

我不明白的是,如果不使用hashbang,你将如何成为搜索引擎友好的？

据推测,您的pushState内容是由客户端JavaScript代码生成的.

因此情况如下:

我在example.com.我的用户点击了一个链接:href="example.com/blog"

pushState捕获单击,更新URL,从某处获取JSON文件,并在内容区域中创建博客文章列表.

使用hashbangs,google知道转到escaped_fragment网址以获取其静态内容.

使用pushState,Google只会看到任何内容,因为它无法使用JavaScript代码加载JSON并随后创建模板.

我能看到的唯一方法是在服务器端渲染模板,但这完全否定了将应用程序层推送到客户端的好处.

所以我说得对,pushState对客户端应用程序来说根本不是SEO友好的吗？

Answer 1

pushState如果您需要搜索引擎来阅读您的内容,那会很糟糕吗？

不,谈论的目的pushState是为了完成与hashbang相同的一般过程,但具有更好看的URL.想想当你使用hashbangs时会发生什么......

你说:

使用hashbangs,Google知道转到escaped_fragment网址以获取其静态内容.

换句话说,

1. 谷歌看到了一个链接 example.com/#!/blog
2. 谷歌要求 example.com/?_escaped_fragment_=/blog
3. 您将返回用户应该看到的内容的快照

如您所见,它已经依赖于服务器. 如果您没有从服务器提供内容的快照,那么您的站点将无法正确编制索引.

那么Google将如何通过pushState查看任何内容？

使用pushState,谷歌只看到任何东西,因为它不能使用javascript加载json并随后创建模板.

实际上,Google会看到它可以要求的任何内容site.com/blog.URL仍指向服务器上的资源,客户端仍遵守此合同.当然,对于现代客户来说,Javascript开辟了在没有页面刷新的情况下检索内容和与内容交互的新可能性,但合同是相同的.

因此pushState,它的优雅之处在于它为所有用户提供相同的内容,无论是新老用户,还是JS用户,但新用户获得了增强的体验.

你如何让谷歌看到你的内容？

1. Facebook方法 - site.com/blog在您推/blog送到州时,客户端应用程序将转换为URL的相同内容.(Facebook还没有使用pushState我所知道的,但他们用hashbangs这样做)

2. Twitter方法 - 将所有传入的URL重定向到hashbang等效项.换句话说,指向"/ blog"的链接会推动/blog该状态.但是,如果直接请求,浏览器最终会在#!/blog.(对于Googlebot,这将_escaped_fragment_根据您的需要进行路由.对于其他客户端,您可以pushState返回漂亮的URL).

所以你失去了_escaped_fragment_能力pushState吗？

你说,在几个不同的评论中

转义片段完全不同.您可以提供纯粹的未经授权的内容,缓存的内容,而不是放在普通页面的负载之下.

理想的解决方案是谷歌要么做JavaScript网站,要么实现一些知道即使对于pushstate网站(robots.txt？)也存在转义的片段URL的方法.

你提到的好处不是孤立的_escaped_fragment_.它为你重写并使用一个特别命名的GETparam实际上是一个实现细节.有没有什么特别的地方,你不能用标准的URL做的-换句话说,重写/blog来/?content=/blog对自己使用的mod_rewrite或服务器的等价物.

如果您根本不提供服务器端内容怎么办？

如果您无法重写URL并在(或者您推入浏览器的任何状态)提供某种内容/blog,那么您的服务器实际上不再遵守HTTP合同.

这很重要,因为页面重新加载(无论出于何种原因)将在此URL处提取内容.(参见https://wiki.mozilla.org/Firefox_3.6/PushState_Security_Review - "view-source and reload将在新URI上获取内容,如果有人推送的话.")

这不是在客户端绘制用户界面一次,而是通过JS API加载内容是一个糟糕的目标,只是它并没有真正考虑到HTTP和URL,它基本上不向后兼容.

目前,这是hashbangs的目的 - 表示在客户端而不是服务器上导航的不同页面状态.例如,重新加载将加载相同的资源,然后可以读取,解析和处理散列值.

它恰好也被用于(尤其是Facebook和Twitter)将历史记录更改为服务器端位置而不刷新页面. 在那些用例中,人们建议放弃hashState的hashbang.

如果您渲染客户端的所有内容,您应该将其pushState视为更方便的历史API的一部分,而不是使用hashbang的方法.

Answer 2

如果使用Google为那些不希望在其网址中使用哈希爆炸的人建议的元标记,那该怎么办？ <meta name="fragment" content="!">

有关详细信息,请参阅此处:https: //developers.google.com/webmasters/ajax-crawling/docs/getting-started

不幸的是,我不认为NickC澄清了我认为OP有的问题.问题很简单,如果我们不使用hash-bang,我们就不知道我们要为哪些内容提供服务.Pushstate并没有为我们解决这个问题.我们不希望搜索引擎告诉最终用户导航到一些吐出未格式化JSON的URL.相反,我们创建URL(触发对更多URL的其他调用),通过AJAX检索数据并以我们喜欢的方式将其呈现给用户.如果用户不是人,那么作为替代方案,我们可以提供html快照,以便搜索引擎可以正确地将人类用户引导到他们期望在(并且以可呈现的方式)找到所请求数据的URL.但最终的挑战是我们如何确定用户的类型？是的,我们可以使用.htaccess或其他东西重写我们检测到的搜索引擎机器人的URL,但我不确定这是多么完整和未来的防范.Google也可能会因为做这类事而惩罚人,但我还没有完全研究过它.所以(pushstate + google的元标记)组合似乎是一个可能的解决方案.