利用Prerender.io解决Angular页面SEO问题

AngularJs作为今年较为流行的主流框架之一,在开发单页应用上有着高效便捷的特点,但由于Ajax页面在SEO方面并不不友好,这让很多开发者很是烦恼,在开发我的博客的时候我也考虑到了这个问题,经过多方查阅资料,最终找到了Prerender.io这个东西.

下面基于Nginx介绍一下Prerender的使用方法,其他使用方法可以查看文档

Prerender官方提供了免费的250个页面缓存,当然绑定个人信用卡能获得更多的页面,不过250个对个人开发来说足矣啦~

首先,我们需要在页面插入我们网页的title以及discreption方便爬虫收录.

<title data-ng-bind="seo.title"> title>
<meta name="description" content="{{ seo.description }}">

在你每次页面加载时记得标记上这些信息,prerender能通过这些头部信息以及网页内容生成xml文件给爬虫收录.

Nginx上除了加上静态页面的根目录,其他代理服务器之外,加上如下配置

    location / {
        try_files $uri @prerender;
    }

    location @prerender {
        #proxy_set_header X-Prerender-Token YOUR_TOKEN;

        set $prerender 0;
        if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        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|ttf|woff)") {
            set $prerender 0;
        }

        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {

            #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            set $prerender "service.prerender.io";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }

在proxy_set_header X-Prerender-Token这里只要加上你注册的时候拿到的token就行了,这里在重写路由的时候有个写法要避免,如果使用H5路由模式的话,用rewrite ~/article(.*) /index.html last;的方式重写路由render的成功率更高.

操作成功后即可在控制台查看渲染出来的xml文件

XML文件

当然,你还可以在你的页面加入,在回调结束时加上window.prerenderReady = true;来通知Prerender你完成页面,可以开始来渲染xml啦~一般写在ajax回调完成的时候.