angular universal ssr seo

Angular Universal下SEO之實作

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

在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
    
江志卿