有没有一种简单的方法使Javascript应用程序SEO友好？

Question

我一直在寻找使用新的工作流程进行Web开发。 Yemoan，Grunt和Bower与AngularJS似乎是前端开发的绝佳解决方案。唯一的缺点是SEO绝对是可怕的。这似乎是推动采用这些服务的商业决策的一个巨大组成部分，但我找不到任何解决方案。

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

Answer 1

使ajax重型站点/应用程序SEO友好的当前标准做法是使用快照。请参阅此处的Google教程：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，它不会阻碍优雅的降级。