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好了。