Facebook_Pixel
首頁 / 連啓佑老師專欄 / 【連啓佑老師專欄】在GEO 時代,談談JavaScript 渲染問題

【連啓佑老師專欄】在GEO 時代,談談JavaScript 渲染問題

【連啓佑老師專欄】在GEO 時代,談談JavaScript 渲染問題

在搜尋行銷從傳統 SEO 逐漸進入 GEO(Generative Engine Optimization,生成式搜尋優化)的時代後,許多過往被認為「已解決」的老問題,正一個個被重新翻出來檢視,JavaScript 渲染(JavaScript)就是最典型的例子之一。

Thank you for reading this post, don't forget to subscribe!

有很多網站明明排名還在,流量卻開始下滑;或者內容品質其實不差,卻沒有被 AI 摘要引用,這些光怪陸離的現象,其實背後往往有個因為 Java Script 渲染引起的原因,就是「內容對人可見,卻讓 AI 不好理解」。

透過這篇文章,筆者會用 SEO 與 GEO 的視角,重新談一次 JavaScript 渲染,並且讓你理解為什麼這個老問題,在今天 GEO 時代反而變得更重要。

一、什麼是 JavaScript 渲染?

(一)JavaScript 渲染的定義

在傳統網站中,瀏覽器打開一個頁面時,會直接讀取伺服器送來的 HTML,畫面與內容幾乎立刻出現。

但在大量使用 JavaScript 的網站裡,流程會變成:

先讀取 HTML → 再執行 JavaScript → 最後才顯示真正的內容

這個「把 JavaScript 程式碼執行後,才把畫面畫出來」的過程,就叫作「JavaScript 渲染」。換句話說,使用者或搜尋引擎一開始看到的,往往只是一個空殼。

(二)渲染與傳統 HTML 的差異

用最簡單的方式來說:

靜態 HTML 網頁是伺服器一次把完整內容送出來,誰來看都一樣。

JavaScript 渲染網頁伺服器只送出骨架,真正的文字、標題、內容,是由 JavaScript 在瀏覽器端「再補上去」。

對人來說,只要最後畫面有出來,不會感覺到差異;但對搜尋引擎與 AI 來說,這中間差別非常大。

(三)一個容易理解的比喻

我們可以把原始 HTML 想成「食材」,把渲染想成「下廚烹調」,食材放在桌上,不等於一道菜,要經過烹調,才能端上桌給人吃。而問題在於如果廚房還沒煮完,搜尋引擎或 AI 就走進來,它看到的只會是「生食材」。

二、JavaScript 渲染如何影響 SEO?

(一)搜尋引擎也要「渲染」

很多人會忽略一件事:搜尋引擎其實不是人,它是一種瀏覽器,它也需要「跑 JavaScript」,才能看到完整內容。

實務上,如果 JavaScript 沒有順利執行,搜尋引擎抓到的可能是空白頁,或者是只有選單,沒有正文,看不到真正的文字與連結。

(二)被搜尋引擎「看見」vs「看不見」

在 SEO 的世界裡,最殘酷的現實是:

你內容寫得再好,只要搜尋引擎看不到,就等於不存在。

當關鍵內容仰賴 JavaScript 動態生成時,就存在「看不見」的風險,因為看不見,就可能造成:

  • 內容沒被收錄
  • 收錄了,但權重不足
  • 排名不穩,波動很大

(三)結構化資料與互動性

現在不少網站會用 JavaScript 動態產生 Schema,這樣的做法理論上很方便,但它存在一個基本前提,就是「搜尋引擎真的有看到我們的內容」。如果搜尋引擎在渲染前就結束抓取,那這些 Schema 對 SEO 或 AI 摘要來說,跟完全不存在沒什麼差別。

三、為什麼很長一段時間人們淡忘這個問題?

(一)你的歲月靜好,來自 Google 為你負重前行

老實說,很多網站表面上「看起來沒問題」,是因為 Google 幫大家做了很多事。

過去幾年,Google 不斷強化對 JavaScript 網站的理解能力,甚至一再對外溝通:

「放心,我們看得懂JavaScript。」

結果就是,大家真的放心了,甚至完全忘記這個問題本來存在。

(二)傳統 SEO 對網頁的要求較低

過去 SEO 的標準其實很低,就是要求網頁能被檢索、索引、後續有搜尋排名,並不要求語意是否清楚、內容是否可拆解,以及是否適合被引用或重組。

因此,在傳統 SEO 的世界裡,只要最後畫面有內容,多數人就會覺得「網頁沒問題」。

(三)傳統 SEO 的目標是「點擊上站」

傳統搜尋的流程是:

查詢 → 顯示連結 → 點進網站 → 使用者自己看

在傳統搜尋的運作模式下,Google 不需要先「理解並消化」你的內容,再替你重新說一遍。

所以JavaScript 渲染的問題,在傳統 SEO 長期被視為「技術細節」,而不是攸關成效的問題。

四、為什麼現在 GEO 時代它又變成問題?

(一)AI 搜尋引擎需要理解你的內容

GEO 時代最大的改變,是 AI 搜尋應用不只是提供參考連結,而是直接回答問題。而 AI 在生成摘要或答案時,需要的是:

  • 清楚的定義
  • 明確的結構
  • 可拆解、可引用的內容

如果內容是由大量 JavaScript 動態產生出來的,AI 可能無法有效理解。

(二)AI 抓取不像傳統搜尋引擎

並非每一個 AI 搜尋系統,都會像 Google 一樣完整執行 JavaScript,等到網頁渲染完成,再慢慢分析內容。有些 AI 搜尋系統抓的是「原始 HTML」,有些只給很短的渲染時間。結果就是內容對人存在,卻在 AI 搜尋的世界裡完全不可見。

(三)AI 搜尋更重視結構與可索引性

對 AI 搜尋而言,網頁的結構混亂,意味著不值得花時間理解;內容沒寫在 HTML 裡,意味著很難引用。所以在 SEO 到 GEO 的轉換過程中,如何處理 JavaScript 渲染不只是個工程效率問題,而是「你能不能被AI 理解與飲用」的問題。

五、我們應該怎麼做?

(一)選擇合適的渲染方法

從 GEO 與 SEO 讀取網頁內容的角度來看,SSR(伺服器端渲染)、SSG(靜態網站生成),都比都比純 CSR(客戶端渲染)來得保險。重點不是不能用 JavaScript,而是不要把「核心內容」全部交給它。

(二)確保核心內容在初始 HTML 就看得到

確保以下內容,不需要等 JS 執行才出現:

  • 主標題
  • 關鍵段落
  • 定義說明
  • 結論與重點清單

這不只對 SEO 重要,對 GEO 更是基本門檻。

(三)結構化資料盡量不要仰賴 JS

如果可以,請在伺服器端就輸出 Schema,不要等 JavaScript 執行再補,這能大幅提升結構化資料被搜尋引擎與 AI 正確理解的機率。

(四)測試與驗證

最後,也是最常被忽略的一步,一定要實際測試網頁是否因為 JavaScript 渲染造成問題。例如我們可以使用 Google Search Console 網址審查工具的「螢幕截圖」確認搜尋引擎看到的是什麼、渲染後內容是否完整,以及關鍵元素是否真的存在。

Google-Search-Console-網址審查工具的「螢幕截圖」功能

【圖1 Google Search Console 網址審查工具的「螢幕截圖」功能】

結語:

在 GEO 時代,JavaScript 渲染的問題,不再只是「網頁會不會被搜尋引擎索引」,而是「網頁能不能被 AI 理解與引用」。這也是為什麼,一個被忽略多年的老問題,現在正重新成為 GEO 時代的重要議題。

購物車