利用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-node的index.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。

留言

張貼留言