JavaScript SEO 是什麼？ 5 大攻略教你如何優化網頁

Image：StackOverflow

JavaScript 有哪些優勢？

在架設網站時，為什麼 JavaScript 變得如此不可或缺，可以歸功於以下這些優點：

• 容易學，也容易使用

• 使網頁具備吸引人的特效及互動性

• 是流行趨勢，最多人使用

• 易執行，只要瀏覽器支援，無需安裝額外的開發環境

• 可被廣泛應用，能與多種開發語言互相搭配

• 可分擔伺服器工作載量

• 支援響應式網頁設計

• 支援 Google 提倡的 AMP（Accelerated Mobile Pages）計畫

連 Google 都無法忽略 JavaScript 

JavaScript 是為了開發網站應用程式而生，原本就並不屬於網站內容的一部分，基於用途與目的不同，所以早期搜尋引擎只透過 HTML 檢索網頁的內容及連結，造就當時的爬蟲技術並不支援讀取 JavaScript。

然而隨著 JavaScript 帶動的流行風潮，在 2014 年 Google 宣布索引系統已更新優化，全面開放對 CSS 與 JavaScript 的讀取能力，並建議開發人員在網站的 robots.txt 檔案中，設定成允許 Google 檢索 CSS 與 JavaScript 檔案，否則將可能因為無法成功轉譯網頁內容，對 SEO 網站排名造成影響。 

使用 JavaScript 對 SEO 究竟是好還是壞？

使用 JavaScript 是好還是壞？得看是由什麼角色身分來回答這個問題，沒有特定的答案。

站在網站開發者的角度，JavaScript 無疑是個很棒的工具，它可以使網頁達到更具人性化的互動及效果。

但是若站在 SEO 專家的角度，JavaScript 反而可能影響網站在搜尋引擎上的排名表現，他們更在意也專注於網頁內容是否能百分之百被成功收錄。

不過基於目前爬蟲已經支援轉譯 CSS 和 JavaScript 技術，雖然 JavaScript 本身無法避免讓搜尋引擎在爬文時，必須被迫以更複雜的形式和流程才能解讀網頁內容，但是如果網站開發人員與 SEO 專家互相合作，在滿足使用者視覺及互動體驗效果的同時，SEO 專家協助指引 JavaScript 的使用必須符合哪些規範，促使網站在使用 JavaScript 的情況下，也能取得良好的 SEO 成果， 這將是 JavaScript SEO 必須被重視的地方。

國家地理（National Geographic）就是個很好的範例，整個網站的呈現方式依賴大量 JavaScript ，在關閉 JavaScript 後檢視，幾乎只剩下標題，Google 必須付出更多的時間成本才能轉譯頁面，但這卻完全不影響它被收錄的速度與結果。

Image : 國家地理網頁開啟、關閉 JavaScript 效果比較圖

在網頁內置入 JavaScript 如何影響 SEO？

如果將網站 SEO 排名比喻為一場選美競賽，而且比的是誰最天生麗質，那麼搜尋引擎的角色就是評審裁判，參賽者除了必須符合身分條件，還需要以原始樣貌作為評分標準。

但素顏出場實在太容易讓人喪失信心，此時大量使用 JavaScript 與 CSS 的網頁， 就像刻意化了妝或經過特殊打扮的參賽者，使得搜尋引擎很難一眼看清網頁的真實面容，必須反覆透過層層檢視程序，最終才有可能正確刻畫出原始樣貌，但這只是可能而已！並不代表一定可以成功。

因為等待評分的過程中，也許卸妝的時間太冗長，也許裝扮的拆卸太過複雜，或是參賽者根本不願意配合卸妝，那都會使得搜尋引擎無法進行評分，最終因此錯過了排名的資格與上榜的機會。

所以 JavaScript 應用在網站當中，SEO 的首要目標就是得盡量配合搜尋引擎的收錄機制，除了要符合 Google 釋出對 JavaScript 的使用建議及規範，還要注意避免設定成拒絕 Google 爬蟲讀取，這樣才能確保網站可以被成功收錄到搜尋引擎當中，享有排名的成果。 

Image：unsplash

Google 如何抓取和索引帶有 JavaScript 的網頁

爬蟲在進入到網站後，直到爬完網頁並完成收錄，究竟是一個什麼樣的過程？

Google 官方提供了爬蟲轉譯 JavaScript 網頁的流程圖，我們可以觀察到在檢索的過程中，等待處理的佇列排滿了站內所有網頁及連結，在讀取每一個網頁並完成轉譯工作後，才能存入到索引結果。

如果我們將這個過程用比較擬人化的天然素顏選美作為例子來說：

• 當評審拿到參賽者的評分表單（取得網站檢索佇列）
• 上面列滿了需要評分的各種項目，包含了臉蛋、身材等。

• 開始進入表單評分項目之一：臉蛋評分的任務（檢索器處理轉譯程序）

• 爬蟲評審必須執行一連串的處理流程（處理轉譯程序），才能獲取客觀的參賽者狀態，比如：

• 分析膚況：必須先排除是否有使用濃厚的粉底遮蓋瑕疵。

• 分析眼睛：判斷是否有戴假睫毛和瞳片，要求卸除。

• 所有表單項目經過上述重覆的轉譯處理流程。

• 獲得臉蛋的評價結果，並且登記到參賽者資料當中（完成索引） 

圖片引用於 Google 搜尋中心

在轉譯的過程中，每個網頁可能將停留數秒，或是需要更長的時間，但爬蟲對於處理時間的資源分配是有限的，根據熱門程度、內容新鮮度或伺服器資源等，為每個網站設定不同的轉譯額度（Render Budget）。

如果一個乏人問津的網站使用了大量 JavaScript，需要更多的轉譯時間才能使爬蟲完成解讀頁面的工作，那麼 Google 可能最終只會選擇一些比較重要的頁面進行轉譯和索引，所以盡可能的縮短頁面轉譯時間，減少伺服器或爬蟲處理的負荷，對於成功索引收錄是有幫助的。

ONELY tool：Too Long; Didn't Render 提供了簡單的轉譯效能評估服務，只要將網址貼上並送出，就可以得到針對轉譯表現的得分，基本上建議結果小於 30 分較為理想， 分數愈高代表處理頁面的時間成本相對的愈高。

為什麼 Google 沒有收錄我的 JavaScript 網頁? 

根據專業的 SEO 經營團隊 ONELY 分析指出，即使像 YOOX 這種大型電子商務網站，由於沒有針對網站技術進行優化工作，在選擇使用 JavaScript 設置內部連結後，最終的下場就是「高達 80.78% 的頁面沒有被收錄到 Google 搜尋引擎當中」，這意謂著有五分之四的產品沒辦法透過 Google 搜尋引擎被找到，直接對品牌網站流量與收入造成強大的衝擊。

而究竟該如何避免類似的局面，我們彚整了下列幾項與 JavaScript SEO 相關的可能因素：

• 內部連結採取 JavaScript 的形式

  Google 造訪網頁時，首先會從 HTML 裡蒐集所有連結，再逐步轉譯每一個網頁，這樣反覆對各頁面進行蒐集及轉譯的過程，是 Google 讀懂網站內容及架構的方法。

  但如果連結網址被包覆在 JavaScript 語法裡面，那就必須等待網頁被轉譯完成後，才能被爬蟲發現，當轉譯的過程如果遭遇失敗或中斷，該連結頁面就無法被收錄了。

• 網頁加載超時

對於合理的頁面載入時間是多少？建議 3 秒內，時間愈短愈好，因為Google 在 2021 年將網頁載入速度加入搜尋結果排名的依據當中，如果網站使用太複雜的結構與形式，造成轉譯時間冗長，勢必影響 SEO 的表現。

可以透過Google PageSpeed Insights 免費檢測網頁在行動裝置和電腦上的載入表現。

• 使用robots.txt 檔案或 noindex 指令防止爬蟲收錄

• Google爬蟲造訪網站時，首先會接收到 robots.txt 檔案的指示，若被設定為 disallow 就會直接略過該網頁，不繼續爬文。

• 而 noindex 則是禁止搜尋引擎收錄此網頁的指令，許多網站開發人員會在建製期間使用，目的是為了防止還沒完善的網頁被搜尋引擎收錄，但網頁發布後，卻可能忘記將收錄設定恢復成允許狀態。

只要正視以上可能造成無法被收錄的問題，並積極做出相對應的解決，即使在網站內應用了  JavaScript，仍然可以大幅增加被收錄的機率，把成功關鍵掌握在自己手中。

打造 JavaScript SEO 友善網站，5 項策略通通告訴你

確保 Google 可以爬取網頁

robots.txt 檔案存放在網站的根目錄下，舉例來說：

• 網站位址： https://www.shopjkl.com/ 

• robots.txt 檔案位置：https://www.shopjkl.com/robots.txt

robots.txt 的內容大致上會長得像下面這樣，網站管理人員可以依據需求，設定爬蟲在進入網站後，應該依循的相關讀取限制。

User-Agent: Googlebot

User-Agent 是指定套用規則的檢索器，在這裡設定的對象是 Google 爬蟲。

Allow: .js

Allow 記載可提供爬蟲檢索的網址路徑，允許開放對 JavaScript 檔案轉譯。

Allow: .css

Allow 記載可提供爬蟲檢索的網址路徑，允許開放對 CSS 檔案轉譯。

On-Page SEO 頁面優化

利用調整並改善網站內容的品質，達到更好的排名，就是頁面優化的主要目的，其中包含了兩個不同的環節需注意：

• 內容優化

  網頁內容具備高實用度及符合需求，是吸引使用者點擊瀏覽，並有意願停留更久的主因，用心提升內容的豐富性及價值，避免充斥太多廣告與不一致的內容，是經營 SEO 的不二法門。

   

• 架構優化

  無論是合理控制圖片尺寸、減少不必要的程式碼、還是調整網站架構，都能進一步提升網頁的加載速度，這對於不擅長花時間等待的使用者來說，是決定繼續瀏覽或關閉視窗的關鍵的因素之一。 

  同時也必須從視覺或網站結構設計上著墨，引導使用者或爬蟲能更清楚網頁之間的指向，輕鬆跳轉在各網頁之間。

使用 HTML 語法建立超連結

華麗酷炫的視覺效果，對於人類而言，或許是更具吸引力的設計，但對 Google 爬蟲來說，過多的 JavaScript 特效反而使轉譯工作負擔加重。

因為爬蟲無法像人類一樣享受與網頁的互動，不能直觀的理解並執行按鈕、展開、折疊、繼續滑動等動作，所以如果把一段網址藏在 JavaScript 語法當中，比如必須點擊按鈕後才能加載連結，爬蟲在還沒轉譯的階段，甚至無法轉譯的狀態下，就無法偵測到這個連結網頁的存在了。

正確示範：在 HTML 裡面添加連結網址

錯誤示範：在 JavaScript 裡面添加連結網址

引導錯誤頁面

無論是使用者還是爬蟲，在透過搜尋或網址連結到網站的過程當中，都有可能會遭遇到錯誤或意外，這個問題有可能源自於開發者對網站結構進行調整、設定超連結網址時發生輸入錯誤、網頁已經刪除卻仍有導向網頁的連結存在等，此時瀏覽器會顯示與 Http 相對應的狀態碼。

對使用者來說，面對顯示錯誤碼的畫面，對整體網站的體驗容易存有不好的印象。

另一方面對爬蟲來說，網頁如果存有錯誤，等同無法提供使用者獲得有幫助的搜尋結果，對於提升網頁排名只有扣分的效果。 

此時作為網站開發者或 SEO 專家，必須提供引導到新位址的方法，作為一種積極化解的解決方式，避免使用者因為停留在錯誤頁面，而選擇轉身離開或留下負評，以下列舉常見的狀況及作法：

• 遇到 404 錯誤

• 若是輸入網址錯誤造成的：使用重新導向或其他方式，把可能的拼寫錯誤，直接對應到網站上的同一個頁面。

• 網頁已搬移造成的：使用 JavaScript 轉址服務，重網址重新導向到新位址。

• 網頁已已刪除造成的：向爬蟲傳回 404 回應代碼，告訴搜尋引擎該網頁已不存在，且不要為內容建立索引。同時也明確告訴訪客網頁不存在的結果，考慮加入其他連結指引或提供回報方法，以設計自訂 404 網頁取代預設錯誤碼頁面。

• 301 轉址

• 網站全面搬移到新網域：屬於網頁永久遷移，必須永久性的啟動自動轉址服務，如果不進行網址的轉移工作，Google 將繼續以舊的網站作為權重和排名的依據，對 SEO 將造成影響。

網站地圖

在建構網站時，應用網站地圖（Sitemap）的概念，可以使網頁之間的結構更容易被理解，將網頁依內容相關性分門別類，讓規模龐大或階層較複雜的網站，不會有某些頁面被遺漏索引的狀況，而且網頁之間建立了從屬關係，可以更容易的依照邏輯順序的方式，從網頁 A 連結到網頁 B。

Google 會在什麼時間點收錄網站，其實受許多因素影響，在被動等待收錄的情況下，有時候需要秏費數小時，有時候甚至可能長達數個月，對於積極經營 SEO 的專家來說，這段等待網頁被收錄的時間愈長，則愈不利於提早進入索引排名。

這時候如果有建立網站地圖，就能從被動化為主動，只要到 Google Search Console 上傳並提交檔案，就能免於等待，讓網站或更新的網頁都能早點收錄到索引當中。

如何檢視 JavaScript SEO 有沒有問題？

針對 SEO 在 JavaScript 方面的優化，網路上提供了相當多的工具，幫助我們在檢視作業上，能更加得心應手。 

認識 JavaScript SEO 工具及操作

第一步：檢視網頁禁用 JavaScript 時的樣子

這個步驟的目的是為了知道網站對 JavaScript 的依賴程度有多少，所以最直接的方式，就是在瀏覽器裡面，直接將 JavaScript 設為禁用。

• 方法一：在 Chrome 瀏覽器加裝應用程式 Web Developer

• Web Developer：線上應用程式連結。

• 安裝完成後，在 Chrome 瀏覽器的擴充功能，點選Web Developer。

• 點選禁用 JavaScript 的選項，重新加載頁面。

• 可以看到網頁沒有使用 JavaScript 時的模樣 。

• 方法二：直接在 WWJD 網頁貼上網址查看

• WWJD： 網址連結。

• 選擇目前使用的裝置：電腦或行動裝置。

• 在輸入欄貼上想檢視的網址，點擊送出。

第二步：檢視網頁在行動裝置上看到的樣子

基於大多數的人都透過手機或行動裝置來查看網頁，所以網站在手機端的顯示是否正常或相容，這是網站經營者必須更加慎重看待的事。

Google 特別提供了行動裝置相容性的測試服務，針對網頁進行相關的檢測工作，最後還會提供建議，例如字型太小、Flash動畫格式將不支援等，作為針對行動裝置端的網頁優化參考。

Google 行動裝置相容性測試步驟：

• 行動裝置相容性測試：連結網址。

• 在輸入欄貼上想檢視的網址，點擊測試網址鈕。

• 查看檢測結果及建議。

第三步：透過 Google Search Console 檢查網頁

Google Search Console（GSC）是由 Google 提供的網站健檢服務，可全面性的評估網頁概況，包含最關注的網頁 SEO 成效分析、爬蟲回饋、網站地圖及網址編輯、檢視反向連結、行動裝置體驗成效等。

但進行 GSC 審查的前提條前，就是必須擁有該網站或網頁的權限，並且使用 Google 帳號登入作為資源連結的媒介，經過驗證程序後，Google 確保使用者身分符合管理員或擁有者，才能進一步提供分析網站數據。

GSC 使用步驟：

• Google Search Console：連結網址。

• 擁有完整的網站權限者，選擇網域驗證，並貼上網址。

• 擁有部分的網頁權限者，選擇網址前置字元，並貼上網址。

• 進行資源驗證程序，確認網站擁有權。

• 查看檢測分析結果。

圖片引用自Google搜尋中心

修復 JavaScript SEO 問題的解決方案

robot.txt設定

如果是因為 robots.txt 誤將爬蟲拒之門外，那麼首先必須把大門重新打開，歡迎爬蟲進來。

1. 找到 robots.txt 檔案，檔案位置在網站主機的根目錄下，不可存放在其他子目錄裡，並且只能有一個 robots.txt 檔案的存在。

2. 打開編輯 robots.txt 檔案，確認將其設定為 UTF-8 編碼的文字檔案。

3. 將 User-Agent 加入 Googlebot，並設定為 Allow 允許爬讀網站相關的 JavaScript 與 CSS 檔案。

4. 上傳 robots.txt 檔案至網站伺服器

5. 測試 robots.txt，直接在瀏覽器輸入 https://example.com/robots.txt 的方式進行查看，確認可以公開存取。

Google 看不到內部連結

爬蟲不會像我們人類一樣，以視覺去理解頁面之間的關聯，在畫面上的「上一頁/下一頁」不是它賴以遵從網頁導航的主要方式。

對網頁全面蒐集所有連結網址，並再一層層反覆執行搜索，才是它實際工作的模式。

爬蟲認得 HTML 語法，所以我們要確保在 <a>  與  </a> 之間給它一個明確的網址，讓它知道何去何從，若將連結語法設計在 JavaScript 當中，則可能不被發現。

錯誤的連結語法範例（使用 JavaScript ）:

正確的連結語法範例（使用 HTML ）:

網頁支援無限滾動Infinite Scroll時的設定

在瀏覽網頁的時候，若已瀏覽到頁面底端，這時繼續向下滑動（滾動），網頁則會自動繼續加載內容，資訊內容有如源源不絕、永無止境般，這個技術稱之為無限滾動（Infinite Scroll），對於內容多元又無限量的社交媒體來說，是常常應用的技術，例如 Facebook、Pinterest、Instagram 等皆有使用。

對人類而言，自然而然的往下滑動，看取更多內容是很直覺的事情，但對爬蟲來說，它無法與 JavaScript 產生互動，它不知道只要對網頁做「滾動的動作」，就能繼續往下看。

所以如果必須讓爬蟲成功爬完全部（從頭到尾），就要進一步對網頁內容做分割及設定，否則爬蟲不會自動抓取到所有的內容。

無限滾動解決方案及步驟：

1. 將無限頁面進行切割及分組。

2. 建立可支援無限滾動結構的網址。

3. 確保每個網址都能正常運作顯示。

4. 設定每個分頁之間下一頁<rel=”next”>、上一頁<rel=”prev”>屬性。

優化 JavaScript 幫忙縮減瘦身 

若在網頁當中使用大量的 JavaScript，將有可能影響網頁加載速度，因為過於複雜的程式碼，可能會增加網頁加載以及轉譯的時間，將對用戶體驗和搜尋引擎排名造成影響。

因此下列介紹一款縮減 JavaScript 的工具，透過線上編譯工具，協助去除不必要的字元、符號、註解及更改變數名稱，將 JavaScript 語法進行全面的優化，同時達到提高網頁載入速度與效能的目的。

優化 JavaScript 工具使用步驟：

1. JavaScript Minifier：連結網址。

2. 將 JavaScript 語法貼到輸入框，點擊 Minify 按鈕。。

3. 查看下方縮減後的 JavaScript 語法，點擊複製按鈕貼到網頁編輯端，取代原本的語法。

除了幫 JavaScript 縮減瘦身這個方法之外，延遲 JavaScript 加載，或必要時才使用 JavaScript，外觀效果盡量使用 CSS 取代，也都是不錯的選擇。