有没有简单的方法可以让Javascript应用程序对SEO友好？

Question

我一直在考虑使用一种新的工作流程来进行web开发。Yemoan、Grunt和Bower with AngularJS似乎是前端开发的一个很好的解决方案。唯一的缺点是搜索引擎优化是绝对可怕的。这似乎是推动采用这些服务的业务决策的一个巨大组成部分，但我找不到任何解决方案。

什么是制作SEO友好的javascript应用程序的可靠解决方案？

Answer 1

目前让ajax重型站点/应用程序SEO友好的标准做法是使用快照。点击此处查看谷歌教程：https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot和点击此处：https://developers.google.com/webmasters/ajax-crawling/docs/specification

总之，将这个标记<meta name="fragment" content="!">添加到DOM中。爬虫将看到这一点，并将自己从www.example.com重定向到www.example.com?_escaped_fragment_=，在那里它将等待页面的快照。

您可以在所有ajax完成后手动从您的站点复制html，并自己创建快照文件。然而，这可能是一个相当麻烦的问题。相反，您可以使用PhantomJS为您自动执行此过程。就我个人而言，我将使用.htaccess将escaped_fragment请求发送到一个单独的php文件，该文件缓存了在进行编辑时从内容管理器创建的标记。这允许它重新创建标记以供爬虫查看(但没有供人类使用的功能)。

Answer 2

这里有一条来自Debunking 10 common KnockoutJS myths的相关信息。我假设它或多或少同样适用于Angular。

除了javascript之外，

的优雅降级取决于应用程序的架构方式。尽管KO是一个纯javascript库，在缺少javascript的情况下不提供任何对优雅降级的支持，但与许多竞争技术不同，它不会阻碍优雅降级。

要创建一个优雅降级的KO应用程序，只需确保服务器呈现的页面的初始状态足以传达用户在缺少javascript的情况下应该看到的信息。后备机制(例如简单的表单和链接)应该可以在缺少javascript的情况下提供完整(或部分)应用程序功能。然后，在创建视图模型时，您可以从DOM中已有的数据实例化视图模型，并且将来的数据可以通过ajax加载，而无需刷新页面。

网格就是这种功能的一个很好的例子。服务器提供的基本HTML页面可以包含一个简单的HTML表，该表支持用于分页的传统链接。然后，您可以根据表中的数据创建视图模型(或者ajax，如果有点冗余的数据加载对您来说并不重要)，并利用KO进行交互式绑定。

由于KO不使用特殊的内联标记或自定义html标记，而是使用简单的数据绑定属性，这些属性在没有javascript的情况下无论如何都是不可见的，因此它不会阻碍优雅的降级。