angular universal ssr seo

Angular Universal下SEO之實作

江志卿 2020/12/24 14:00:25

1 2767

在Angular的世界裡，若要實作網站seo優化，即必須做到SSR(Server-Side Rendering)，那得借助Angular Universal。Angular Universal是一個toolkit，允許我們為Angular應用程式執行伺服器端渲染(server-side rendering)和預渲染(pre-rendering)。本文中，我們只探討SSR。而SSR之於SPA(Single-Page Application)有以下優點 :

(1) 改善搜尋引擎優化(SEO)

大型社群服務平台如Google和Facebook利用網路搜尋器來了解您的網站內容，以便搜尋引擎可以將該內容編入索引，讓用戶更容易在網路上查找。大多數網路爬蟲很難從SPA提取內容，這會給SEO帶來麻煩。Angular universal能幫助我們生成靜態網頁，讓網路爬蟲無縫地遍歷整個站台。
(2) 加快顯示首頁的速度

也就是加快瀏覽器呈現第一段靜態DOM內容(包含JS檔案、圖像、樣式檔，未包含AJAX後依照商業邏輯所呈現的資料畫面)。
(3) 提高低功率設備的性能

依照目前Javascript更版的速度來看，許多較舊款的device並無法可靠地執行Javascript，這在我們對客戶端執行大量腳本編寫(例如渲染PWA)時，會是一個大麻煩。而我們則可為server端提供了一個無Javascript版本的SSR APP。

本文中，我們不討論如何Step-by-Step建置Angular Universal專案，而是將焦點放在在Angular Universal專案中，SEO之實作上。

一、建立meta tag
建立html meta tag，是為了讓網路爬蟲看懂你的網站。在angular中，已有定義好Meta class，我們可以在每頁的ngOninit階段去定義每頁的mega tag。

以下為Meta服務的範例code :

二、在專案中建立robots.txt、sitemap.xml

那在angular中，robots.txt和sitemap要放置在哪，搜尋引擎才讀的到呢？當我們將production版本建置好後，我們將build好的資料夾放在IIS中，如不知道如何部屬到IIS中，可參考該篇文章(註一)。在部屬時，我們會建立一個web.config檔案，在web.config中定義所有連線進來的request透過UrlRewrite重新導至build出來的main.js中。如果robots.txt和sitemap.xml放在dist資料夾外，GoogleBot無法透過網址讀取到內容。所以最好的方式，是將robots.txt放在angular universal專案中的assets資料夾內，然後在angular.json中的build區段中定義 :

三、測試robots.txt、sitemap.xml

當搜尋引擎訪問站台時，會對網站先進行檢索及建立索引，robots.txt則是在此時被讀取。所以robots.txt是一個定義檔，告知搜尋器搜尋規則為何，哪些路徑該收錄，哪些不該收錄。但有時候搜尋器不見得會照robots規則走，例如要有效的告知GoogleBot哪一頁不該被收錄，最好的方式是在該頁底下的meta tag定義noindex(見註二) :而如何定義robots.txt，Google也有完整的說明文件，請參考註三。我們能夠透過Google robots.txt測試工具，來測試搜尋引擎是否能正常讀取到站台下的robots.txt。

由上圖可發現，我們定義了sitemap.xml的路徑位置，意在告訴GoogleBot網站內所有的網址路徑，sitemap顧名思義就像是網路地圖一樣，差別是在這是給機器讀的。Sitemap.xml是一個xml檔，你可以自己寫，不過頁面太多的話不建議，我們也可以透過網路現成的工具幫我們自動產生出來： https://www.xml-sitemaps.com/ 以上網址為免費線上Sitemap產生器，但有500個網址的限制。產生出來的格是如下圖所示：

我們也能透過Google search console(GSC)來手動匯入sitemp.xml，透過GSC我們也能知道目前有無被GoogleBot檢索、收錄，以及曝光率、點擊率、查詢字段…等等，相當好用。

這樣在瀏覽器下輸入http://domain/robots.txt下即會顯示其內容。

實作到這裡，站台內容應以能順利被GoogleBot抓取，至於如何提高曝光率、排行名次，那是SEO中更高深的課題了，筆者僅著墨在angular universal中實作基礎SEO。

        註一 : https://dotblogs.com.tw/Leo_CodeSpace/2020/07/24/172100 
        註二 : https://developers.google.com/search/docs/advanced/crawling/block-indexing?visit_id=637435434476936632-1582476053&rd=1
        註三 : https://developers.google.com/search/docs/advanced/robots/create-robots-txt