AngularJS SEO简易教程

AngularJS SEO

咱们知道Angular是MVC框架，页面内容是动态加载的，因此若是由搜索引擎的蜘蛛来爬的话，根本爬不出实际的东西，Prerender应运而生。你能够把它当作是一个可以读懂javascript的服务器端浏览器(Server-side browser)，读懂js以后，它可以输出由js动态加载的页面内容，这给爬虫来看就正合适。业界最简单的方案是使用Prerender + nginx反向代理。这里以tomi.in为例介绍配置流程。

1. 搭建Prerender服务

Prerender官方说明

实际上就是搭建了一个Prerender服务器，给它传递参数，它帮你把JS动态页面静态化.

1. git clone https://github.com/prerender/prerender.git 而后cd Prerender进入目录
2. npm install 安装模块依赖
3. node server.js 运行服务(可用nohup node server.js &使其运行于后台)

这里有一个坑，Prerender默认用3000端口，注意你的端口不要被占用了，不然它会给出很奇怪的错误提示.

2. 修改nginx.conf

要达到如下目的：

1. 普通用户访问，会看到正常页面（交给localhost:4000去处理请求）
2. 若是是爬虫访问，就交给Prerender服务去处理请求

所以，修改nginx.conf的server段以下：

server {
        listen       80;
        server_name  www.tomi.in tomi.in;
        location ~* / {
            set $prerender 0;
            if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot") {
                set $prerender 1;
            }
            if ($args ~ "_escaped_fragment_") {
                set $prerender 1;
            }
            if ($uri ~ "\.(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)") {
                set $prerender 0;
            }
            if ($prerender = 1) {
                rewrite .* /$scheme://$host$request_uri? break;
                proxy_pass http://localhost:3000;
            }
            if ($prerender = 0) {
                proxy_pass http://localhost:4000;
            }
        }
    }

这里作了两件事：

• 若是是搜索引擎爬虫（header判断）或者有指定的参数_escaped_fragment_那么就反向代理给内部的Prerender服务(localhost:3000)，让它去渲染页面
• 若是是真实的用户，就走正常渠道(localhost:4000)

3. Demo

嗯，以前给过demo，但如今处于安全性的考虑，你们仍是直接在百度搜索site:h7sc.com好了。