利用Prerender Node為SPA做SEO

利用Prerender Node為SPA做SEO

利用Prerender Node為SPA做SEO

圖片來源:Wake Up, SEOs – the NEW New Google is Here

利用PhantomJS為SPA做SEO又來一個為SPA解決SEO問題的解法。

如何使用Prerender Node?

依照官方文件操作Prerender Node,並設定app.js如下:

var prerender = require('prerender-node');
app.use(prerender);

prerender.set('beforeRender', function(req, done) {
  console.log('before render');
  done(null, "Hello");
}).set('afterRender', function(err, req, prerender_res) {
  console.log('after render');
});

beforeRender 是指robot來爬,但尚未render頁面給robot之前的動作,通常在這裡設定將要回傳的快取頁面;afterRender 是指回傳robot後的動作,通常用來將頁面做快取以備之後使用。在這邊先回傳簡單的字串 Hello,前面的null表示沒有錯誤。

訊息如下。

利用Prerender為SPA做SEO

頁面出現剛剛設定的 Hello 字串。

利用Prerender為SPA做SEO

讀取快取頁面

經過了剛剛簡單回傳字串的方式,當然我們也可以設定回傳一個已經快取好的頁面 index_cached.html

設定

prerender.set('beforeRender', function(req, done) {
  fs.readFile('./public/index_cached.html', 'utf8', function(err, data){
    if(err) {
      console.log(err);
      done();
    } else {
      done(null, data);
    }
  });
}).set('afterRender', function(err, req, prerender_res) {
  console.log('after render');
});

快取頁面

快取頁面的程式碼如下,這不是一個真的快取頁面噢,只是範例檔。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

頁面出現剛剛設定的快取頁面。

利用Prerender為SPA做SEO

也可以使用Redis等來做快取頁面。

var prerender = require('prerender-node'),
    redis = require("redis"),
    client = redis.createClient();
app.use(prerender);

prerender.set('beforeRender', function(req, done) {
  client.get(req.url, done);
}).set('afterRender', function(err, req, prerender_res) {
  client.set(req.url, prerender_res.body)
});

原理

看了原始碼之後,Prerender Node的運作方式是這樣的:

  • 檢查User Agent中的字串是否有robot名稱(檢查對象有Googlebot、Bingbot等,但是寫死在程式碼裡面的,無法新增),如果有符合的robot名稱,就回傳快取頁面。
  • 如果URL中含有 _escaped_fragment_,就表示是robot,要回傳頁面。
  • 檢查頁面是否在白名單或黑名單裡面。若是robot要求且在白名單裡面,就回傳頁面;如果是robot要求但在黑名單裡面,就不要回傳頁面。
  • 若robot請求的是頁面而非資源(例如,附檔名為.js、.css的檔案,這部份也是寫死的),則回傳頁面。

備註

如果測試的時候發現怎麼頁面對常用的Googlebot都沒有反應,這是因為prerender-nodeindex.js這個檔案把我們常用的Googlebot等都註解掉了,記得要打開才會看到正確的執行結果。

利用Prerender為SPA做SEO

作者註解這一段的原因有寫在程式碼裡面

// googlebot, yahoo, and bingbot are not in this list because
// we support _escaped_fragment_ and want to ensure people aren't
// penalized for cloaking.

大意是說,因為支援偵測URL是否含有 _escaped_fragment_ 且為了避免網站被誤認為黑帽技法而被懲罰,因此註解起來。但_escaped_fragment_已被google廢棄,並且在此對於robot或使用者我並沒有回傳不同的內容(只是render的方式不同,一個是後端,一個是前端),所以就手動打開吧。

總結

利用PhantomJS為SPA做SEO比較起來,這次使用Prerender Node解決了執行兩次回應和每次都會重新產生靜態檔案(而能使用快取頁面)的問題,相較之下是更能減輕server端負擔。而且,更模組化的包裝起來了。


同場加映,自己建立Prerender服務!

自己建立Prerender服務

如果只是小小的部落格網站,使用Prerender.io這個服務即可,但免費帳號是有快取頁數限制的。若頁面數量很大,就可以利用它們的開源專案自己架一個服務來用。

Step 1:下載Prerender Service。在local端run起來 http://localhost:3000 會看到以下訊息:

利用Prerender為SPA做SEO

Step 2:在自己的專案修改app.js,修改port號,將port 3000讓給Prerender,自己的專案改用8080。

app.set('port', process.env.PORT || 8080);

var server = app.listen(app.get('port'), function () {
  console.log('Ready on port ' + server.address().port);
});

Step 3:在瀏覽器鍵入 http://localhost:3000/http://localhost:8080

利用Prerender為SPA做SEO

來看看結果,可以利用自己建立的服務看到自己的專案了。

利用Prerender為SPA做SEO


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-利用 Prerender Node 為 SPA 做 SEO

留言