Angular 網頁開發必看!讓 Angular 6 單頁式網站更友善搜尋引擎!

Try Proseoai — it's free
AI SEO Assistant
SEO Link Building
SEO Writing

Angular 網頁開發必看!讓 Angular 6 單頁式網站更友善搜尋引擎!

目錄

  1. 介紹 Angular 和 SEO 的問題
  2. 解決方案:伺服器端渲染
  3. 使用 Angular CLI 建立新的 Angular 應用程式
  4. 檢查 Angular 應用程式在瀏覽器中的呈現
  5. 使用 Curl 查看搜索引擎看到的內容
  6. 使用 Angular Universal 進行伺服器端渲染
  7. 使用 ng-toolkit/universal 套件簡化 Angular Universal 的設置
  8. 更新 Webpack CLI 版本
  9. 執行 Angular Universal 的建置和執行伺服器
  10. 使用 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 應用程式將可被搜索引擎爬蟲正確解析,從而提高網站的可見性和搜尋排名。

優點和缺點

使用伺服器端渲染可以帶來多個優勢,包括:

優點:

  1. 改善搜尋引擎優化:伺服器端渲染可以讓搜索引擎爬蟲正確解析你的網站內容,從而提高搜尋引擎排名。
  2. 提升用戶體驗:因為伺服器端渲染可以提供預渲染的內容,所以用戶可以更快地看到網頁的內容,提高頁面載入速度和用戶體驗。

然而,伺服器端渲染也存在一些缺點:

缺點:

  1. 複雜性增加:伺服器端渲染需要設置一些額外的配置和依賴,增加了應用程式的複雜性。
  2. 伺服器壓力增加:伺服器端渲染需要在伺服器上執行渲染過程,增加了伺服器的負載。

總體而言,伺服器端渲染是優化搜尋引擎排名和提高用戶體驗的一種有效方法,但需要仔細考慮其優點和缺點。

總結

本教程向你展示了如何使用伺服器端渲染來優化 Angular 應用程式的搜尋引擎排名。通過使用 Angular Universal 和 ng-toolkit/universal 套件,你可以輕鬆實現伺服器端渲染,提高的網站的可見性和搜尋引擎排名。

希望這個教程對於理解 Angular 和 SEO 以及如何使用伺服器端渲染進行優化有所幫助。如果你對這個話題有興趣,請繼續學習並探索更多相關的主題和技術。

FAQ

以下是一些常見問題和解答:

Q:為什麼需要使用伺服器端渲染? A:伺服器端渲染可以讓搜索引擎爬蟲正確解析並列出你的網站,提高搜尋引擎排名。

Q:使用伺服器端渲染是否會影響網頁速度? A:伺服器端渲染可以提高網頁的載入速度,因為它可以提供預渲染的內容。

Q:伺服器端渲染是否適用於所有的 Angular 應用程式? A:是的,Angular Universal 可以應用於所有的 Angular 應用程式,並且可以通過使用 ng-toolkit/universal 套件來簡化設置。

Q:伺服器端渲染是否會增加伺服器的負載? A:是的,伺服器端渲染需要在伺服器上執行渲染過程,因此可能會增加伺服器的負載。

相關資源

Are you spending too much time on seo writing?

SEO Course
1M+
SEO Link Building
5M+
SEO Writing
800K+
WHY YOU SHOULD CHOOSE Proseoai

Proseoai has the world's largest selection of seo courses for you to learn. Each seo course has tons of seo writing for you to choose from, so you can choose Proseoai for your seo work!

Browse More Content