Angular 網頁開發必看!讓 Angular 6 單頁式網站更友善搜尋引擎!
目錄
- 介紹 Angular 和 SEO 的問題
- 解決方案:伺服器端渲染
- 使用 Angular CLI 建立新的 Angular 應用程式
- 檢查 Angular 應用程式在瀏覽器中的呈現
- 使用 Curl 查看搜索引擎看到的內容
- 使用 Angular Universal 進行伺服器端渲染
- 使用 ng-toolkit/universal 套件簡化 Angular Universal 的設置
- 更新 Webpack CLI 版本
- 執行 Angular Universal 的建置和執行伺服器
- 使用 Curl 檢查伺服器端渲染後的內容
Angular 和 SEO:使用伺服器端渲染優化搜尋引擎排名
正如大家所知,Angular 是一個單頁應用程式框架,而與其他單頁應用程式框架一樣,Angular 默認情況下是在客戶端渲染網站,這意味著大部分的代碼都在用戶的瀏覽器中執行,同時所有的 HTML 代碼也是在用戶的瀏覽器中生成,然後傳遞到瀏覽器。然而,當談到 SEO(搜索引擎優化)時,這是一個明顯的缺點,因為搜索引擎的網絡爬蟲通常不執行網站的 JavaScript 代碼,因此無法看到 Angular 的網頁內容和結構。這些網絡爬蟲無法正確地在搜索引擎結果中列出你的 Angular 網站。
解決方案:伺服器端渲染
要解決這個問題,一個解決方案是使用伺服器端渲染。 Angular Universal 是一個工具,可以應用於所有的 Angular 應用程式,利用它可以很容易地將你的 Angular 網站進行伺服器端渲染。在本教程中,我將向你展示一種最簡單的使用 Angular Universal 的方法。
讓我們開始設定一個新的 Angular 應用程式。首先,使用 Angular CLI 創建一個新的 Angular 應用程式。如果你還沒有在系統上安裝 Angular CLI,你可以通過執行 npm install -g @angular/cli
來安裝它。
現在,運行 ng new ng-seo
命令來創建一個名為 ng-seo
的新專案。選擇項目模板時,我們可以使用 --routing
選項來添加基本的路由配置。
ng new ng-seo --routing
安装完畢後,切換到項目目錄中,接著啟動開發伺服器並在瀏覽器中打開。
cd ng-seo
ng serve -o
這將啟動開發伺服器,並自動在瀏覽器中打開應用程式。你應該能夠看到項目的首頁,這樣你就可以確認應用程式正確運行。
現在,我們將比較瀏覽器中的渲染結果與搜索引擎爬蟲所見。首先,讓我們使用 Curl 命令在命令行中請求瀏覽器所看到的內容。由於我們的 Angular 應用程式在本地主機 4200 端口運行,我們可以使用以下命令:
curl http://localhost:4200
這將返回一個包含 HTML 文檔的響應,但是如果你仔細檢查,你會發現 HTML 文檔中缺少一些內容,例如標題、圖片和鏈接列表。這就是我們遇到的問題:由於客戶端渲染,這些內容需要在瀏覽器中執行 JavaScript 代碼後才能顯示。
使用 Angular Universal 進行伺服器端渲染
為了解決這個問題,我們將使用 Angular Universal 來進行伺服器端渲染。首先,讓我們添加相關的依賴包。返回到命令行,接下來運行以下命令:
ng add @ng-toolkit/universal
安裝過程會花一些時間,因為它需要下載和安裝相應的依賴項。完成後,你的專案中將添加 Universal 相關的配置。
現在,打開你的代碼編輯器,檢查 package.json
中的依賴項,確保 @ng-toolkit/universal
套件已添加到 dependencies
中。然後,檢查 webpack-cli
的版本,確保至少使用 3.1 版本,如果有較舊的版本,請將它更改為 3.1。
執行 npm install
命令更新相關的套件。完成後,你就可以將伺服器端渲染應用程式建置並運行伺服器了。在命令行中執行以下命令:
npm run build:ssr && npm run serve:ssr
這將建置你的 Angular 應用程式,並在伺服器上運行渲染後的代碼。一旦完成,你就可以在瀏覽器中查看渲染後的結果。
我們還可以使用 Curl 命令在命令行中請求伺服器渲染後的內容。使用以下命令:
curl http://localhost:4200
這次,你將看到瀏覽器和搜索引擎看到的完全相同的內容。這意味著你的 Angular 應用程式已經被預渲染,並且可以被搜索引擎爬蟲解析和列在搜索結果中。
這就是使用 Angular Universal 進行伺服器端渲染來優化搜尋引擎排名的方法。藉助伺服器端渲染,你的 Angular 應用程式將可被搜索引擎爬蟲正確解析,從而提高網站的可見性和搜尋排名。
優點和缺點
使用伺服器端渲染可以帶來多個優勢,包括:
優點:
- 改善搜尋引擎優化:伺服器端渲染可以讓搜索引擎爬蟲正確解析你的網站內容,從而提高搜尋引擎排名。
- 提升用戶體驗:因為伺服器端渲染可以提供預渲染的內容,所以用戶可以更快地看到網頁的內容,提高頁面載入速度和用戶體驗。
然而,伺服器端渲染也存在一些缺點:
缺點:
- 複雜性增加:伺服器端渲染需要設置一些額外的配置和依賴,增加了應用程式的複雜性。
- 伺服器壓力增加:伺服器端渲染需要在伺服器上執行渲染過程,增加了伺服器的負載。
總體而言,伺服器端渲染是優化搜尋引擎排名和提高用戶體驗的一種有效方法,但需要仔細考慮其優點和缺點。
總結
本教程向你展示了如何使用伺服器端渲染來優化 Angular 應用程式的搜尋引擎排名。通過使用 Angular Universal 和 ng-toolkit/universal 套件,你可以輕鬆實現伺服器端渲染,提高的網站的可見性和搜尋引擎排名。
希望這個教程對於理解 Angular 和 SEO 以及如何使用伺服器端渲染進行優化有所幫助。如果你對這個話題有興趣,請繼續學習並探索更多相關的主題和技術。
FAQ
以下是一些常見問題和解答:
Q:為什麼需要使用伺服器端渲染?
A:伺服器端渲染可以讓搜索引擎爬蟲正確解析並列出你的網站,提高搜尋引擎排名。
Q:使用伺服器端渲染是否會影響網頁速度?
A:伺服器端渲染可以提高網頁的載入速度,因為它可以提供預渲染的內容。
Q:伺服器端渲染是否適用於所有的 Angular 應用程式?
A:是的,Angular Universal 可以應用於所有的 Angular 應用程式,並且可以通過使用 ng-toolkit/universal 套件來簡化設置。
Q:伺服器端渲染是否會增加伺服器的負載?
A:是的,伺服器端渲染需要在伺服器上執行渲染過程,因此可能會增加伺服器的負載。
相關資源