[開發環境] 使用 Rendertron 技術優化 Angular 網站 SEO

前言

在 2016 年時，曾經寫過一篇關於 SEO 優化的文章 [SEO優化] Microdata類別(itemtype)實作，時隔多年，現在有越來越多的網站都已經改成前後端分離，前端採購 SPA 的框架，筆者自己寫的寶貝評論+ 也不例外。

什麼是 SPA (Single-Page Application) 單頁式應用程式 ?

維基百科的說明是，它是一種網路應用程式或網站的模型，它透過動態重寫當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。

簡單來說，當你從伺服器下載網頁到瀏覽器時，一開始該網頁並不包含實際內容，而是在下載完成後，動態抓取並呈現你所看到的內容。常見的 SPA 前端開發框架包括 Angular、Vue 和 React。

SPA 目前面臨的 SEO 問題

搜尋引擎的爬蟲通常會定期瀏覽網站內容，但當它們遇到 SPA 網站時，卻只得到一個空白的網頁。這是因為在初次載入時，SPA 網站僅提供基本的 HTML 頁面結構，實際內容則是在後續動態載入。因此，爬蟲可能會判定該網站為空白頁面，導致未將相應內容收錄至搜尋引擎中。

雖然目前 Google 搜尋引擎的爬蟲已經具備認識 SPA 架構的能力，但並非所有搜尋引擎的爬蟲都具有這種先進的搜尋機制。為因應此問題，三大前端框架（Angular、Vue 和 React）紛紛推出 SSR（Server Side Render）技術，以輔助提升網站的 SEO 效果。

SSR 技術在伺服器端動態生成網頁內容，使得搜尋引擎能夠直接獲取完整且具體的內容，而不僅僅是空白的頁面結構。這有助於提高 SPA 在搜尋引擎結果中的可見性，確保網站內容被正確地索引和呈現。因此，SSR 技術成為解決 SPA SEO 問題的一個重要方法。

為什麼是 Rendertron

Rendertron 是一款使用無頭 Chromium 進行轉譯的開放原始碼專案。單一頁面應用程式通常會在背景載入資料或延後工作以便轉譯內容。 Rendertron 的機制可判斷網頁何時完成轉譯，而且會等到所有網路要求都已完成，沒有任何未完成的工作時才執行動態轉譯，簡單來說就是，遇到爬蟲來瀏覽你的網站，會透過 Rendertron 來瀏覽你的網站，並把你的網站的執行結果拋回給搜尋引擎爬蟲，其運作原理如下圖。

看完剛剛上面的 Rendertron 說明，有沒有發現跟 SSR 的技術有點大同小異，但為什麼不直接使用各平台提供的 SSR 技術呢? Angular 本身提供的 Angular Universal 技術有一個對我來說的大問題就是，其底層使用 NodeJS 來當作背景伺服器，因此有些瀏覽器端的 API 將會無法使用，比如 window、document、navigator 或 location。

回到筆者的網站，使用的正是 Angular 框架，並且用了很多外部的前端套件，也就是說改用 Angular Universal 必須進行大幅度的調整，雖然使用 SSR 才是最佳解，但我實在是 ooxx #$*##@，沒有這麼多時間去改。

PS. 題外話 Rendertron Github 已經停止更新了，所以如果要開發新的站台，建議一開始就先考慮好不要用瀏覽器 API ?!

安裝 Rendertron 步驟說明

下載並建置 Rendertron 到後續要執行服務的路徑，建議可以跟 C:\inetpub\Rendertron 其它站放在相同地方，方後續管理。
```
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build
```
在 C:\inetpub\Rendertron 建立幾個檔案，相關說明如下。

config.json : (非必要) Rendertron 設定檔，若有需要可參考這裡的說明。
```
{
  "port": 3000,
  "width": 320
}
```

install-windows-service.js : 用來建立背景服務用的腳本，相關語法如下。

var Service = require('node-windows').Service;

// Create a new service object
var svc = new Service({
    name:'Rendertron',
    description: '這是 Rendertron NodeJS 背景服務',
    script: 'C:\\inetpub\\Rendertron\\build\\rendertron.js'
});

// Listen for the "install" event, which indicates the
// process is available as a service.
svc.on('install',function(){
    console.log('Install complete.');
    svc.start();
});

svc.install();

uninstall-windows-service.js : 用來移除背景服務用的腳本，相關語法如下。

var Service = require('node-windows').Service;

// Create a new service object
var svc = new Service({
    name: 'Rendertron',
    script: 'C:\\inetpub\\Rendertron\\build\\rendertron.js'
});

// Listen for the "uninstall" event so we know when it's done.
svc.on('uninstall', function () {
    console.log('Uninstall complete.');
    console.log('The service exists: ', svc.exists);
});

// Uninstall the service.
svc.uninstall();

安裝 Node-Windows 用來執行 Rendertron 背景服務，請使用底下的版本。
```
npm install node-windows@1.0.0-beta.6
```
執行 node install-windows-service.js，若有成功會在根目錄生成daemon文件夾裏面有日誌和配置和一個exe執行文件，此時去服務管理列表裏就能看到創建出來的服務了，請注意，若是整個資料夾複製到另外一個環境，請記得刪除此資料夾，否則會有權限問題。
若已成功可以連線 http://localhost:3000 應該可以正確看到服務。