如何提高单页面应用的SEO

Question

我们已经建立了一个空缺的搜索引擎.出于速度和良好用户体验的原因,我们使用了"单页应用程序"(SPA)的体系结构.我们知道对于SPA架构而言,启用SEO是一项挑战,因此我们进行了大量优化以实现SEO.虽然Google正在为我们的网页编制索引,但我们在Google上的排名非常差,我们正在寻求改善这一点的建议.我们遵循了谷歌的建议,但没有满意.

由于Google僵尸程序不会执行客户端javascript,因此无法直接由Google-bot索引SPA.没有javascript,我们的网站几乎不包含任何内容,因为数据是以json格式异步读取的,并且大多数HTML都是在客户端上呈现的.渲染由称为" knockout " 的框架完成,该框架支持将HTML模板数据绑定到javascript对象.可以使用客户端URL来解决SPA中的不同页面.为了使这些页面可供Google阅读,我们的客户端网址包含一个"#"后跟一个"!".这种'hash-bang'语法触发Google机器人将URL重写为特殊的"服务器端"URL.当我们的服务器访问此特殊URL时,我们会触发一个"无头浏览器"来呈现服务器上的页面.然后将完整的HTML语法(在javascript执行之后)发送到客户端.谷歌机器人可以使用这个所谓的HTML快照来索引页面.为了告诉Google我们的SPA中有哪些页面,我们提供了一个sitemap.xml,其中包含可以访问的不同网址.当我们要求Google显示从我们网站编制索引的网页时,我们会看到Google僵尸程序确实访问了我们的网页并将其编入索引.因此,我们的结论是,从技术上讲,我们的工作做得很好,但这些网页似乎没有足够高的排名可以出现在正常的Google搜索中.我们不确定这是否与我们使用SPA架构的事实有关,但结果是我们的页面无法找到.

我们想知道是否有人在谷歌排名方面有相同的技术经验,如果有人有其他建议可以帮助我们提高SPA的SEO排名(没有完全改变网站到传统的服务器端渲染)技术).

Answer 1

要解决这个问题,您需要做一些事情:

1. 真实的网址.<a>带有hrefs指向这些的真实标签.
   • 当然,您可以使用pushState来保持AJAX行为
   • http://example.com/app#this_is_not_a_real_url_for_this_purpose
   • http://example.com/app/this_is_a_real_url_for_this_purpose
2. 您需要让服务器在显式请求中生成预填充JSON的页面
   • 这是使用PhantomJS或类似功能最容易完成的.
   • 如果您假设内容的更改频率低于其读取(即最成功的站点),则可以使用队列将这些页面构建为静态文件
   • 然后告诉您的Web服务器如果请求的文件不存在则发送index.html

对于"软请求"(他们单击一个链接,您使用JSON/AJAX来覆盖),它将像目前一样工作.

对于硬请求(他们点击其他网站的链接,按F5,或者Googlebot抓取您的网址),您可以向他们发送以下预编译版本:

1. 改善SEO
2. 增加页面加载性能(这也是一个SEO奖金)
3. 不需要任何困难的服务器处理,因为页面已经构建