Angular 4 網站優化教學

Angular 4 網站優化教學

目錄

1. 簡介 📚
2. Angular Universal 是什麼？ 🌐
3. 為什麼需要使用 Angular Universal？ ❓
4. 安裝 Angular Universal 📥
5. 創建新專案並設置 Angular Universal 🛠️
6. 安裝平台伺服器和動畫套件 📦
7. 修改 app.module.ts 檔案 📝
8. 創建伺服器 app.module.ts 檔案 🖥️
9. 創建 Express 伺服器檔案 🌐
10. 設定 Typescript 配置檔案 📄
11. 安裝和設定網頁伺服器 🌍
12. 修改設定檔案並啟動伺服器 🏃
13. 檢查 Angular Universal 的工作原理 🔍
14. 創建路由和導航列 🚦
15. 修改首頁和關於頁面的標題和 Meta 標籤 🏠📝
16. 啟動應用程式並檢查更改結果 ✅
17. 結論 🎉

簡介 📚

在這份文章中，我們將介紹如何使用 Angular Universal 來使我們的 Angular 應用程式更友善於搜尋引擎（SEO）。我們將瞭解 Angular Universal 的概念以及為什麼需要使用它。然後，我們將從頭開始創建一個新的 Angular 應用程式並使用 Angular Universal 來實現伺服器端渲染。最後，我們將檢查數據是否在瀏覽器和伺服器之間共享，以及如何優化我們的應用程式以改善 SEO。

Angular Universal 是什麼？ 🌐

Angular Universal 是一個用於實現伺服器端渲染的 Angular 框架模塊。它允許我們在伺服器上預先渲染 Angular 應用程式的 HTML 內容，並將其發送到瀏覽器。這樣做的好處是可以讓網絡爬蟲和搜索引擎能夠更好地理解我們的應用程式內容，從而提升 SEO 的效果。

為什麼需要使用 Angular Universal？ ❓

在默認情況下，Angular 應用程式是在瀏覽器上進行渲染的。這意味著搜索引擎無法直接閱讀應用程式中的內容，因為它們只能獲取經過預先渲染的 HTML 內容。這導致了應用程式在搜索引擎結果中的可見度降低。通過使用 Angular Universal 來實現伺服器端渲染，我們可以讓搜索引擎在抓取我們的應用程式時獲得完整的預渲染內容，從而提升 SEO 的效果。

安裝 Angular Universal 📥

要安裝 Angular Universal，我們需要使用 Angular CLI 提供的一個插件。運行以下命令來安裝 Angular Universal 插件：

ng add @nguniversal/express-engine

... （以下省略）