摘要：前言在網(wǎng)站頁(yè)面后端渲染的時(shí)代，開(kāi)發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁(yè)面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個(gè)頁(yè)面。

在網(wǎng)站頁(yè)面后端渲染的時(shí)代，開(kāi)發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁(yè)面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個(gè)頁(yè)面。

隨著前后端技術(shù)的更新，越來(lái)越多的前端框架進(jìn)入開(kāi)發(fā)者們的視野，網(wǎng)站的前后分離架構(gòu)越來(lái)越得到開(kāi)發(fā)者們的喜愛(ài)與認(rèn)可。 后端只提供數(shù)據(jù)接口、業(yè)務(wù)邏輯與持久化服務(wù)，而視圖、控制與渲染則交給前端。 因此，越來(lái)越多的網(wǎng)站從后端渲染變成了前端渲染，而由此帶來(lái)的直接問(wèn)題就是各大搜索引擎爬蟲(chóng)對(duì)于前端渲染的頁(yè)面（ 動(dòng)態(tài)內(nèi)容 ）還無(wú)法比較完善的爬取，這就導(dǎo)致了網(wǎng)站的內(nèi)容無(wú)法被搜索引擎收錄，直接影響網(wǎng)站流量與曝光度。

博主的網(wǎng)站從去年五月開(kāi)始也開(kāi)始采用了前后分離的構(gòu)架，使用了 AngularJS 框架搭建了 NewRaPo ， 之后又使用 Vue.js 框架進(jìn)行了整體重構(gòu) RaPo3。 無(wú)一例外，他們都是基于前端渲染的，然后在此后的一年多時(shí)間里，搜索引擎收錄的頁(yè)面都是這樣的：

（ 其他搜索引擎也一樣，最早的截圖已經(jīng)找不到了，先拿這個(gè)應(yīng)付一下 ）

快照是這樣的：

而博主實(shí)際的網(wǎng)站是這樣的：

和這樣的：

感覺(jué)完全被搜索引擎拋棄了好嘛！這東西誰(shuí)能搜到啊！搜到了誰(shuí)會(huì)點(diǎn)??！

為了能讓搜索引擎正常的收錄博主的網(wǎng)站，于是博主踏上了動(dòng)態(tài) SEO 優(yōu)化的踩坑之路：

首先，博主 Google 到了在動(dòng)態(tài)頁(yè)面中加入 會(huì)告訴爬蟲(chóng)這是個(gè)動(dòng)態(tài)內(nèi)容的頁(yè)面，然后爬蟲(chóng)會(huì)在當(dāng)前鏈接后面加上 ?_escaped_fragment_=tag 來(lái)獲取相應(yīng)頁(yè)面的靜態(tài)版，于是果斷盤(pán)算在路由里改一下，然后重寫(xiě)一套后端渲染的頁(yè)面返回給所有帶 ?_escaped_fragment_=tag 的鏈接。

正當(dāng)我高興這個(gè)問(wèn)題這么容易解決的時(shí)候突然發(fā)現(xiàn)網(wǎng)上資料都表示這個(gè)方法只有 Google 的爬蟲(chóng)認(rèn)可，其他搜索引擎全部沒(méi)用！ wtf，白高興一場(chǎng)。

PhantomJS 是一個(gè)基于 WebKit 的服務(wù)器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各種Web標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 頁(yè)面自動(dòng)化 ， 網(wǎng)絡(luò)監(jiān)測(cè) ， 網(wǎng)頁(yè)截屏 ，以及 無(wú)界面測(cè)試 等

簡(jiǎn)單來(lái)說(shuō)就是 PhantomJS 能在服務(wù)端解析HTML、js。

具體怎么使用，簡(jiǎn)而言之就是判斷爬蟲(chóng)來(lái)爬取頁(yè)面的時(shí)候把每個(gè)動(dòng)態(tài)頁(yè)面先讓 PhantomJS 跑一遍，然后把得到的靜態(tài)結(jié)果返回給爬蟲(chóng)，具體過(guò)程可以參考：用PhantomJS來(lái)給AJAX站點(diǎn)做SEO優(yōu)化

當(dāng)然博主看過(guò)之后沒(méi)用采用自己搭 PhantomJS 服務(wù)做動(dòng)態(tài)內(nèi)容優(yōu)化，主要因?yàn)椋?/p>

爬蟲(chóng)每訪問(wèn)一個(gè)頁(yè)面就要讓 PhantomJS 渲染一次，相當(dāng)于爬蟲(chóng)訪問(wèn)一次實(shí)際服務(wù)器要響應(yīng)兩次，第一次響應(yīng)爬蟲(chóng)，第二次響應(yīng) PhantomJS 自己，這種方式不僅浪費(fèi)資源，而且并不優(yōu)雅；

PhantomJS 對(duì)于新的前端技術(shù)兼容性會(huì)存在問(wèn)題，可能會(huì)出現(xiàn)渲染失敗的情況；

渲染頁(yè)面無(wú)緩存，每訪問(wèn)一次就重新渲染一次，會(huì)造成網(wǎng)站響應(yīng)速度變慢。

Prerender.io 是一個(gè)基于 PhantomJS 開(kāi)發(fā)的專(zhuān)為動(dòng)態(tài)頁(yè)面 SEO 提供靜態(tài)頁(yè)面渲染的在線服務(wù)，基本上解決了自己搭建 PhantomJS 服務(wù)所遇到的問(wèn)題，網(wǎng)站配置 Prerender.io 后 Prerender 將會(huì)直接取代網(wǎng)站后端對(duì)爬蟲(chóng)請(qǐng)求進(jìn)行響應(yīng)，將提前渲染好的動(dòng)態(tài)頁(yè)面直接返回給爬蟲(chóng)。

具體配置：

注冊(cè) Prerender.io 賬號(hào)，免費(fèi)用戶可以渲染 250 個(gè)頁(yè)面，對(duì)于博客網(wǎng)站來(lái)說(shuō)足夠了；

安裝中間件并設(shè)置 token，博主直接采用了 nginx 配置方案，（ Prerender.io 也提供了其他解決方案：https://prerender.io/document... ）博主后端服務(wù)器是 uWSGI, 根據(jù) Prerender.io 提供的 nginx.conf 中做如下修改：

server {
    listen 80;
    server_name www.rapospectre.com;
 
    location @prerender {
        proxy_set_header X-Prerender-Token YOUR_TOKEN;
        include        uwsgi_params;
        
        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|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) {
            uwsgi_pass     127.0.0.1:xxxx;
        }
    }
}

然后重啟服務(wù)器，通過(guò) Google Search Console 或其他站長(zhǎng)工具提交頁(yè)面進(jìn)行爬取檢測(cè)，可以看到，Prerender.io 成功截取了爬蟲(chóng)請(qǐng)求并進(jìn)行了渲染：

嗯，終于解決了嘛，正當(dāng)博主感嘆不容易的時(shí)候，Google Search Console 的抓取結(jié)果卻讓人發(fā)現(xiàn)然并卵：

抓取的內(nèi)容依然是滿滿的 ${ article.views }} 渲染模版，當(dāng)時(shí)我認(rèn)為應(yīng)該是網(wǎng)站緩存的問(wèn)題，所以沒(méi)有多想，然而一周后再次測(cè)試，情況依舊，回頭再看 Prerender 渲染的網(wǎng)頁(yè)：

原來(lái)壓根沒(méi)起作用！之后又檢查了配置和文檔，嘗試聯(lián)系了 Prerender.io 的技術(shù)支持甚至向 Prerender 的 Github 提了相關(guān) issue，都沒(méi)有解決問(wèn)題。 最后，不得已博主還是放棄了 Prerender。

Prerender 的方案啟發(fā)了我，通過(guò)判斷來(lái)訪請(qǐng)求的 User-Agent 來(lái)讓不同的后端服務(wù)器進(jìn)行響應(yīng)，雖然網(wǎng)上關(guān)于 SEO 優(yōu)化的討論中明確提到過(guò)判斷 UA 返回不同頁(yè)面將會(huì)得到搜索引擎的懲罰，但我猜測(cè)這只是返回不同內(nèi)容才會(huì)懲罰，如果返回的是相同的內(nèi)容搜索引擎就不會(huì)進(jìn)行懲罰，區(qū)別在于一個(gè)是直接通過(guò)前端渲染的頁(yè)面，而另一個(gè)則是后端渲染的頁(yè)面，兩個(gè)頁(yè)面渲染出的內(nèi)容基本相同，那么搜索引擎就不會(huì)發(fā)現(xiàn)。

自己動(dòng)手，豐衣足食，有了想法立即驗(yàn)證，首先把網(wǎng)站代碼中前端渲染的部分改為后端渲染，然后 push 到一個(gè)新的分支，博主網(wǎng)站修改十分簡(jiǎn)單，大概只修改了 50 行不到的代碼就完成了需求： RaPo3-Shadow

接著將后端渲染代碼部署到服務(wù)器，然后假設(shè)用 uWSGI 將它跑在 11011 端口，
此時(shí)前端渲染的代碼由 uWSGI 假設(shè)跑在 11000 端口；

最后修改 nginx 配置文件 nginx.conf：

server {
    listen 80;
    server_name www.rapospectre.com;
 
    location @prerender {
        include        uwsgi_params;
        
        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;
        }
        #resolve using Google"s DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;
 
        if ($prerender = 1) {
            uwsgi_pass     127.0.0.1:11011;
        }
        if ($prerender = 0) {
            uwsgi_pass     127.0.0.1:11000;
        }
    }
}

就是通過(guò) UA 判斷爬蟲(chóng)，如果是則轉(zhuǎn)發(fā)給 11011 端口，不是就轉(zhuǎn)發(fā)給 11000 端口，當(dāng)然兩個(gè)端口返回的頁(yè)面基本是相同的，所以也就不用擔(dān)心會(huì)被搜索引擎懲罰了。

通過(guò)以上配置后，動(dòng)態(tài)頁(yè)面的 SEO 問(wèn)題終于得到了解決，反應(yīng)最快的是 Google，第二天就爬取并更新到了搜索引擎：

接著 360 搜索：

然后其他沒(méi)有提交過(guò)網(wǎng)址的搜索引擎也分分收錄了網(wǎng)站：

（ bing 沒(méi)有收錄正常的頁(yè)面應(yīng)該是由于 nginx.conf 里沒(méi)有加入 bing 爬蟲(chóng) UA 的緣故 ）

當(dāng)然，不知道什么原因百度過(guò)了兩個(gè)多月還是沒(méi)有收錄，在站長(zhǎng)工具中提交網(wǎng)頁(yè)甚至申訴都沒(méi)有收錄新的網(wǎng)頁(yè)。沒(méi)錯(cuò)，開(kāi)頭那個(gè)用來(lái)應(yīng)付一下的圖片就是百度的結(jié)果，剛截的。

我該說(shuō)幸好沒(méi)更新，否則找不到以前的例子了嘛，哈哈哈哈。

通過(guò)博主自己搭建后端渲染服務(wù)已經(jīng)解決了動(dòng)態(tài)頁(yè)面 SEO 優(yōu)化問(wèn)題，但博主還有一個(gè)可行辦法的猜想，不知是否可行，寫(xiě)在這里如果看了以上辦法都不好用的朋友可以試試。

canonical 標(biāo)簽是 Google 、雅虎、微軟等搜索引擎一起推出的一個(gè)標(biāo)簽，它的主要作用是用來(lái)解決由于網(wǎng)址形式不同內(nèi)容相同而造成的內(nèi)容重復(fù)問(wèn)題。 這個(gè)標(biāo)簽的制定時(shí)間已經(jīng)很久了，所以現(xiàn)在主流的搜索引擎都支持這個(gè)標(biāo)簽，它原本的作用是將 url 不同但內(nèi)容相同的網(wǎng)址權(quán)重全部集中到其中一個(gè)網(wǎng)址上，這樣可以避免大量重復(fù)內(nèi)容網(wǎng)頁(yè)被搜索引擎收錄，舉個(gè)例子：

http://www.rapospectre.com/archives/1
http://www.rapospectre.com/archives/1?comments=true
http://www.rapospectre.com/archives/1?postcomment=true

這三個(gè)網(wǎng)址的內(nèi)容其實(shí)完全一樣，為了避免重復(fù)收錄和分權(quán)，在原始網(wǎng)頁(yè)加上 這樣其他重復(fù)網(wǎng)頁(yè)將被看作都是 http://www.rapospectre.com/archives/1

那么假設(shè)對(duì)于動(dòng)態(tài)網(wǎng)頁(yè) http://www.rapospectre.com/dynamic/1，我們編寫(xiě)他的靜態(tài)網(wǎng)頁(yè)：http://www.rapospectre.com/static/1, 然后在 http://www.rapospectre.com/dynamic/1 的頁(yè)面內(nèi)加入：