SlideLive网站:SPA单页应用SEO的思考与总结

简介

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

SlideLive官网地址:https://www.slidelive.cn

技术方案

方案1:Angular Universal + 服务端渲染

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

服务端渲染需要服务端部署Universal Web 服务器,它使用 Universal 模板引擎渲染出的静态 HTML 来响应对应用页面的请求。 服务器接收并响应来自浏览器的 HTTP 请求,并回复静态文件,如脚本、CSS 和图片。 它可以直接响应数据请求,也可以作为独立数据服务器的代理进行响应。

该方案的缺点:

  • 需要改造Angular应用

  • 需要在服务端进行部署

参考:Angular

方案2:Angular Universal + 预渲染

既然Angular应用可以基于Angular Universal进行服务端渲染,那么我们也可以使用Universal 模板引擎进行预渲染。

  • 需要改造Angular应用

  • 代码改动后需要进行编译以生成静态化页面,通常比较耗时

参考:Angular

方案3:基于prerender.io

prerender.io是一家SPA页面静态化的Sass商业公司,对于普通用户,它提供了500个静态化页面的处理能力。它的工作原理也很简单,就是对于爬虫的请求通过nginx分发到prerender.io的服务上,同时prerender.io如果已经将页面静态化,则直接返回;如果prerender.io还没有静态化处理该页面,则先使用服务端渲染技术进行静态化处理,并返回结果给爬虫,然后缓存静态化页面。对于普通的用户请求(通过浏览器发送),则nginx会按照正常的Angular请求逻辑,加载相应地代码到前端,并渲染DOM。以下是来自互联网上的一张示意图,能够很好地说明其工作原理。

参考:Middlewares - Prerender.io Knowledge Base

最终选择

通过对比分析,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官网地址:https://www.slidelive.cn

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值