SlideLive网站：SPA单页应用SEO的思考与总结
SlideLive网站的前端技术是Angular框架构建的SPA应用。SPA应用是一种客户端渲染技术，其工作原理是浏览器将js文件加载到浏览器中进行执行并渲染出html页面。对于SPA应用而言，目前Google和Bing搜索引擎可以很好的支持，能够有效的爬取网站的页面，但是国内的百度、头条等搜索引擎却不能很好地支持。为了便于百度等搜索引擎能够收录SlideLive网站，我们需要对网站进行页面静态化处理。本文将总结Angular应用页面静态化处理的几种技术。
SlideLive官网：
标准的Angular应用会运行在浏览器中，它会在DOM中渲染页面，以响应用户的操作。而AngularUniversal会在服务端运行，生成一些静态的页面，稍后再通过客户端进行启动。这意味着该应用的渲染通常会更快，让用户可以在应用变得完全可交互之前，先查看应用的布局。
服务端渲染需要服务端部署UniversalWeb服务器，它使用Universal模板引擎渲染出的静态HTML来响应对应用页面的请求。服务器接收并响应来自浏览器的HTTP请求，并回复静态文件，如脚本、CSS和图片。它可以直接响应数据请求，也可以作为独立数据服务器的代理进行响应。
该方案的缺点：
需要改造Angular应用需要在服务端进行部署
参考：
既然Angular应用可以基于AngularUniversal进行服务端渲染，那么我们也可以使用Universal模板引擎进行预渲染。
需要改造Angular应用代码改动后需要进行编译以生成静态化页面，通常比较耗时
参考：
prerender.io是一家SPA页面静态化的Sass商业公司，对于普通用户，它提供了500个静态化页面的处理能力。它的工作原理也很简单，就是对于爬虫的请求通过nginx分发到prerender.io的服务上，同时prerender.io如果已经将页面静态化，则直接返回；如果prerender.io还没有静态化处理该页面，则先使用服务端渲染技术进行静态化处理，并返回结果给爬虫，然后缓存静态化页面。对于普通的用户请求（通过浏览器发送），则nginx会按照正常的Angular请求逻辑，加载相应地代码到前端，并渲染DOM。以下是来自互联网上的一张示意图，能够很好地说明其工作原理。
参考：
通过对比分析，SlideLive网站最终还是选择了基于prerender.io这种商业化地技术方案，第一是比较简单，第二是它提供的基础服务基本能满足业务需求。以下给出相应的nginx配置：
#ChangeYOUR_TOKENtoyourprerendertoken#Changeexample.com(server_name)toyourwebsiteurl#Change127.0.0.1:3000tothebackendaddressworker_processes1;events{worker_connections1024;}http{map$http_user_agent$prerender_ua{default0;"~*Prerender"0;"~*googlebot"1;"~*yahoo!slurp"1;"~*bingbot"1;"~*yandex"1;"~*baiduspider"1;#百度蜘蛛"~*toutiaospider"1;#头条蜘蛛"~*360spider"1;#360蜘蛛"~*sougouspider"1;#搜狗蜘蛛}map$args$prerender_args{default$prerender_ua;"~(^|&)_escaped_fragment_="1;}map$http_x_prerender$x_prerender{default$prerender_args;"1"0;}map$uri$prerender{default$x_prerender;"~*.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)"0;}server{listen80;server_nameexample.com;location/{if($prerender=1){rewrite(.*)/prerenderiolast;}proxy_set_headerHost$SERVER_NAME;proxy_set_headerConnection"";proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_hide_headerCache-Control;add_headerCache-Control"public,max-age=";#resolveusingGoogle'sDNSservertoforceDNSresolutionandpreventcachingofIPsresolver8.8.8.88.8.4.4;#settingbackendasavariableforcesDNSresolutionsincenginxcachesIPsanddoesntplaywellwithloadbalancingset$backend"127.0.0.1:3000";rewrite.*$uribreak;($prerender=0){return404;}proxy_set_headerX-Prerender-TokenYOUR_TOKEN;proxy_hide_headerCache-Control;add_headerCache-Control"private,max-age=600,must-revalidate";#resolveusingGoogle'sDNSservertoforceDNSresolutionandpreventcachingofIPsresolver8.8.8.88.8.4.4;set$prerender_host"service.prerender.io";
SlideLive是一款幻灯片在线播放和分享的网站，其前端基于Angular框架构建，为了搜索引擎优化，采用了prerender.io进行页面静态化处理。SlideLive官网：