SoaringRoad博客系统架构--网站的SEO

本文同步发表在我的个人博客上
http://www.soaringroad.com/editor/122

概述

现在使用React，Vue，Angular作为前台框架的网站越来越多，前后台分离开发部署，但是异步加载的网站都有一个问题，那就是SEO不好做。因为搜索引擎的爬虫并不会在后台渲染页面，所以通常爬虫爬取到的，都是没有加载内容的。

解决方案

爬虫不会渲染页面，那么我们就提供一个渲染好的页面给他。

我们可以通过识别UA信息，来粗略分辨是用户和爬虫，比如百度用的是Baiduspider，谷歌用的是Googlebot等等。然后将渲染后的页面返回给爬虫。

那么问题来了，如何渲染呢。

prerender

目前比较好用的是prerender,它是一个帮助服务器端渲染页面的中间件，同时支持多种语言

官方支持NodeJs(Express),Ruby,Nginx,Apache
社区贡献了Java，Python，C#,PHP等多语言中间件

实质上都是通过访问http://service.prerender.io/(your-host-url)来获取渲染后的页面，然后将页面转发给前台。

比如本站可以通过下面的URL来渲染

http://service.prerender.io/http://www.soaringroad.com

本站使用了Nginx来代理请求，基本上参考了官方配置

# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value

server {
    listen 80;
    server_name example.com;
 
    root   /path/to/your/root;
    index  index.html;

    location / {
        try_files $uri @prerender;
    }
 
    location @prerender {
        #proxy_set_header X-Prerender-Token YOUR_TOKEN;
        
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|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|svg|eot)") {
            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;
        }
    }
}

上面的Nginx配置还可以根据需要，添加缓存配置，前提是你的页面不是频繁改动。

可以添加proxy_cache_bypass

同样也可以参考我之前的文章，做缓存

SoaringRoad博客系统架构–Nginx配置缓存

AngularUniversal

Angular的官方也已经意识到SEO难做，推出了AngularUniversal，但是现在好像只给出了Node服务器来做渲染的Sample，而大多时候，服务器并不是Node，所以个人并不是很推荐，或许还得等他推出其他包。有兴趣的可以参考一下。

Angular官网universal文档