spa与seo_SlideLive网站SPA单页应用SEO的思虑与总结

文章目录 [+]

SlideLive官网：https://www.slidelive.cn

技能方案方案1：Angular Universal + 做事端渲染

标准的 Angular 运用会运行在浏览器中，它会在 DOM 中渲染页面，以响运用户的操作。
而Angular Universal 会在做事端运行，天生一些静态的页面，稍后再通过客户端进行启动。
这意味着该运用的渲染常日会更快，让用户可以在运用变得完备可交互之前，先查看运用的布局。

spa与seo_SlideLive网站SPA单页应用SEO的思虑与总结 spa与seo_SlideLive网站SPA单页应用SEO的思虑与总结必应SEO

做事端渲染须要做事端支配Universal Web 做事器，它利用 Universal 模板引擎渲染出的静态 HTML 来相应对运用页面的要求。
做事器吸收并相应来自浏览器的 HTTP 要求，并回答静态文件，如脚本、CSS 和图片。
它可以直接相应数据要求，也可以作为独立数据做事器的代理进行相应。

（图片来自网络侵删）

该方案的缺陷：

须要改造Angular运用须要在做事端进行支配

参考：https://angular.io/guide/universal

方案2：Angular Universal + 预渲染

既然Angular运用可以基于Angular Universal进行做事端渲染，那么我们也可以利用Universal 模板引擎进行预渲染。

须要改造Angular运用代码改动后须要进行编译以天生静态化页面，常日比较耗时

参考：https://angular.io/guide/prerendering

方案3：基于prerender.io

prerender.io是一家SPA页面静态化的Sass商业公司，对付普通用户，它供应了500个静态化页面的处理能力。
它的事情事理也很大略，便是对付爬虫的要求通过nginx分发到prerender.io的做事上，同时prerender.io如果已经将页面静态化，则直接返回；如果prerender.io还没有静态化处理该页面，则先利用做事端渲染技能进行静态化处理，并返回结果给爬虫，然后缓存静态化页面。
对付普通的用户要求（通过浏览器发送），则nginx会按照正常的Angular要求逻辑，加载相应地代码到前端，并渲染DOM。
以下是来自互联网上的一张示意图，能够很好地解释其事情事理。

参考：https://docs.prerender.io/article/12-middlewares#nginx

终极选择

通过比拟剖析，SlideLive网站终极还是选择了基于prerender.io这种商业化地技能方案，第一是比较大略，第二是它供应的根本做事基本能知足业务需求。
以下给出相应的nginx配置：

# Change YOUR_TOKEN to your prerender token# Change example.com (server_name) to your website url# Change 127.0.0.1:3000 to the backend addressworker_processes 1;events { worker_connections 1024;}http { map $http_user_agent $prerender_ua { default 0; "~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 { listen 80; server_name example.com; location / { if ($prerender = 1) { rewrite (.) /prerenderio last; } proxy_set_header Host $SERVER_NAME; proxy_set_header Connection ""; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_hide_header Cache-Control; add_header Cache-Control "public,max-age=31536000"; #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs resolver 8.8.8.8 8.8.4.4; #setting backend as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing set $backend "127.0.0.1:3000"; rewrite . $uri break; proxy_pass http://$backend; } location /prerenderio { if ($prerender = 0) { return 404; } proxy_set_header X-Prerender-Token YOUR_TOKEN; proxy_hide_header Cache-Control; add_header Cache-Control "private,max-age=600,must-revalidate"; #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs resolver 8.8.8.8 8.8.4.4; set $prerender_host "service.prerender.io"; proxy_pass http://$prerender_host; rewrite . /$scheme://$host$request_uri break; } }}总结

SlideLive是一款幻灯片在线播放和分享的网站，其前端基于Angular框架构建，为了搜索引擎优化，采取了prerender.io进行页面静态化处理。
SlideLive官网：https://slidelive.cn