台灣本地進階教學：Angular SEO / Angular 社群分享

台灣本地進階教學：Angular SEO / Angular 社群分享

目錄：

1. 前言
2. 了解AngularJS的SEO問題
3. 理解Web爬蟲
4. 解決方案一：使用AngularJS的伺服器端渲染
   • 4.1 安裝必要的套件
   • 4.2 建立伺服器端應用程式
   • 4.3 使用Express中介軟體判斷用戶代理程式
   • 4.4 使用Jade視圖引擎渲染HTML視圖
   • 4.5 重定向網路爬蟲到伺服器端渲染的頁面
   • 4.6 測試伺服器端渲染功能
5. 解決方案二：使用Prerender.io服務
6. 結論
7. 參考資料

4. 解決方案一：使用AngularJS的伺服器端渲染

👉 4.1 安裝必要的套件

在使用AngularJS的伺服器端渲染之前，我們需要安裝一些相關的套件。首先，我們需要安裝Express框架和Jade視圖引擎。使用以下命令進行安裝：

npm install express jade

👉 4.2 建立伺服器端應用程式

接下來，我們需要建立一個伺服器端應用程式，並將它連接到AngularJS應用程式。在應用程式目錄下創建一個新的JavaScript檔案，例如server.js。在這個檔案中，我們將引入必要的模組並建立一個Express應用程式：

const express = require('express');
const app = express();

👉 4.3 使用Express中介軟體判斷用戶代理程式

在伺服器端渲染期間，我們需要確定請求的用戶代理程式是網路爬蟲還是使用者。為了實現這一點，我們可以使用Express的中介軟體。在server.js檔案中，加入以下程式碼：

app.use((req, res, next) => {
  const userAgent = req.headers['user-agent'];
  const isCrawler = /bot|googlebot|crawler|spider|robot|crawling/i.test(userAgent);

  if (isCrawler) {
    // Redirect to server-side rendered page
    res.redirect(`/render${req.url}`);
  } else {
    // Proceed to AngularJS application
    next();
  }
});

👉 4.4 使用Jade視圖引擎渲染HTML視圖

為了伺服器端渲染AngularJS應用程式的視圖，我們將使用Jade視圖引擎來產生HTML。在server.js檔案中，我們需要設定Jade視圖引擎並建立伺服器端渲染的路由：

app.set('view engine', 'jade');

app.get('/render*', (req, res) => {
  const renderedHtml = ... // Render the AngularJS application using Jade
  res.send(renderedHtml);
});

👉 4.5 重定向網路爬蟲到伺服器端渲染的頁面

在Express應用程式中，我們使用中介軟體將網路爬蟲重定向到伺服器端渲染的頁面。這樣，爬蟲將會獲取到經過伺服器端渲染的HTML內容。在server.js檔案中，加入以下程式碼：

app.use('/render*', express.static('public'));

👉 4.6 測試伺服器端渲染功能

要測試伺服器端渲染功能，我們需要啟動應用程式並訪問應用程式的URL。確保已經安裝了nodemon套件，然後在命令列中執行以下命令：

nodemon server.js

在瀏覽器中訪問http://localhost:5000/render，應該看到已經由伺服器端渲染的AngularJS應用程式的HTML內容。

5. 解決方案二：使用Prerender.io服務

解決方案一提供了一個自建的伺服器端渲染解決方案，但需要額外的設定和管理。如果你想要一個更簡單的解決方案，你可以考慮使用Prerender.io服務。

Prerender.io是一個專門為AngularJS和其他JavaScript前端框架設計的伺服器端渲染服務。它可以解析並渲染網頁，並將已渲染的結果返回給網路爬蟲。

要使用Prerender.io，你需要在你的AngularJS應用程式中添加Prerender.io的中介軟體。這個中介軟體將會檢測網路爬蟲的請求並將它們轉發給Prerender.io服務。

這是一個使用Prerender.io的中介軟體的例子：

const prerender = require('prerender-node');

// Set Prerender.io service URL
prerender.set('prerenderServiceUrl', 'https://service.prerender.io');

// Use Prerender.io middleware
app.use(prerender);

6. 結論

在本教程中，我們學習了AngularJS的SEO問題以及解決方案。我們介紹了使用AngularJS的伺服器端渲染和Prerender.io服務來解決這個問題。希望這些解決方案可以幫助你優化你的AngularJS應用程式，使其更容易被搜尋引擎索引和分享。

7. 參考資料

• Express官方文件：https://expressjs.com/
• Jade官方文件：http://jade-lang.com/
• Prerender.io官方網站：https://prerender.io