搜索引擎优化pdf(SlideLive网站的前端技术是Angular框架构建的SPA应用。)

　　搜索引擎优化pdf(SlideLive网站的前端技术是Angular框架构建的SPA应用。)

　　介绍

　　SlideLive网站的前端技术是一个由Angular框架构建的SPA应用。SPA 应用程序是一种客户端渲染技术。它的工作原理是浏览器将js文件加载到浏览器中执行并渲染html页面。对于 SPA 应用，目前的 Google 和 Bing 搜索引擎都可以很好地支持，并且可以有效地抓取 网站 页面，但是国内的百度和今日头条等搜索引擎不能很好地支持。为了方便百度等搜索引擎收录SlideLive网站，我们需要对网站的页面进行静态处理。本文将总结 Angular 应用页面静态处理的几种技术。

　　SlideLive官网：

　　技术方案方案一：Angular Universal + 服务端渲染

　　标准的 Angular 应用程序在浏览器中运行，并在 DOM 中呈现页面以响应用户操作。Angular Universal 将在服务器端运行，生成一些静态页面，然后在客户端启动它。这意味着应用程序的渲染通常更快，允许用户在应用程序完全交互之前查看应用程序的布局。

　　服务器端呈现需要通用 Web 服务器的服务器端部署，该服务器使用由通用模板引擎呈现的静态 HTML 来响应对应用程序页面的请求。服务器接收并响应来自浏览器的 HTTP 请求，并以脚本、CSS 和图像等静态文件进行回复。它可以直接响应数据请求，也可以作为独立数据服务器的代理进行响应。

　　该方案的缺点：

　　参考：

　　场景 2：Angular Universal + 预渲染

　　由于 Angular 应用程序可以基于 Angular Universal 进行服务器渲染，我们也可以使用 Universal 模板引擎进行预渲染。

　　参考：

　　选项 3：基于 prerender.io

　　prerender.io 是一个静态 SPA。对于普通用户，提供500个静态页面的处理能力。它的工作原理也很简单，就是将爬虫的请求通过nginx分发给prerender.io的服务，如果prerender.io已经将页面设为静态，则直接返回；如果 prerender.io 没有对页面进行静态处理，则使用服务端渲染技术进行静态处理，将结果返回给爬虫，然后缓存静态页面。对于普通的用户请求（通过浏览器发送），nginx会加载相应的代码到前端，按照正常的Angular请求逻辑渲染DOM。这是来自互联网的*敏*感*词*，可以很好地了解它的工作原理。

　　

　　参考：#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 address

worker_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官网：