開場直接說結論好了
老實說，搞定單頁應用程式（SPA）的 SEO，核心就一句話：「想辦法讓爬蟲在第一時間就看到完整的 HTML」。對，就這麼簡單。現在的 Googlebot 雖然越來越會跑 JavaScript，但你不能把所有希望都賭在它身上。 整個過程就像是，你不能期待每個來訪的貴賓都很有耐心等你把家裡整理好，你最好一開門就讓他看到客廳是乾淨的。
所以，所有的方法，不管是伺服器端渲染（SSR）、預渲染（Prerendering）還是動態渲染（Dynamic Rendering），都是為了這個目的服務。 差別只在於「何時」跟「為誰」準備好這個整理乾淨的客廳而已。這篇就是要來聊聊這些方法的眉角，還有一些很多人會忽略的坑。
為什麼現有的教學文章總讓我看得霧煞煞？
我看了一下現在網路上的文章，大部分都把 SSR、Prerendering 講得跟神主牌一樣，好像用了就能上天堂。但很少有人真的去聊它們背後的成本跟取捨。例如，SSR 會增加你伺服器的負擔跟複雜度，這點對於小型專案來說，根本是殺雞用牛刀。還有啊，Prerendering 雖然簡單，但如果你的頁面超多、內容又常常變，那每次 build 都要等天荒地老。
更少人提到的是，就算你用了這些酷東西，一些基礎的 SEO 還是要做啊！像是 URL 結構、Meta 標籤的動態更新、還有最重要的「內部連結」。 我看過太多 SPA 網站，整個站內的導覽都是用 `
解決爬蟲問題的 5 個關鍵策略（以及我的碎碎念）
好了，來談談具體要怎麼做。我整理了五個策略，與其說是策略，不如說是我自己踩過坑之後的心得整理。
1. 渲染策略三選一：SSR、SSG/預渲染、動態渲染
這是最大條的決定，選錯了後面會很痛苦。我直接做個表格，用我的大白話解釋一下。
| 渲染策略 | 這是什麼？ | 適合情境 | 我的真心話（缺點） |
|---|---|---|---|
| 伺服器端渲染 (SSR) | 每次有請求進來，伺服器就即時產生一次帶有內容的完整 HTML 給你。 | 內容變動頻繁、需要高度個人化的頁面，像是電商的商品頁、新聞網站。 | 伺服器會很累，真的。成本比較高，而且設定起來很煩，尤其要處理 Node.js 環境。 |
| 靜態網站生成 (SSG) / 預渲染 | 在「打包部署」的時候，就把所有頁面都先產生好一份份的靜態 HTML 檔案。 | 內容不太常變的網站，比如部落格、公司官網、文件站。 | 如果你的網站有幾千幾萬頁，每次改個小東西就要全部重新產生一次，你會等到想哭。不適合大型動態網站。 |
| 動態渲染 (Dynamic Rendering) | 很賊的一招。判斷來的連線是爬蟲還是真人，是爬蟲就給它一個預渲染好的版本，是真人就給它正常的 SPA。 | 舊的、很難改架構的 SPA 專案想救 SEO 的時候。或是你真的不想動前端架構。 | Google 官方說這只是個過渡方案。而且你等於要維護兩套東西，有點精神分裂，要小心兩邊內容不一致，會被當成作弊（Cloaking）。 |
2. 客戶端路由與內部連結：別再用 div 當按鈕了！
這點真的要用紅筆畫起來。SPA 最大的優點是切換頁面很流暢，這是因為它攔截了瀏覽器的預設行為，用 JavaScript 來改變內容跟 URL。但很多人在實作的時候就亂掉了。
請務必、絕對要用
`<a href="/your-page">` `<div onClick={() => goToPage('/your-page')}>`然後，URL 要用 `history` 模式，讓它看起來像 `example.com/about`，而不是 `example.com/#/about` 這種帶有 hash 的。 現在大部分的爬蟲雖然能處理 hash，但乾淨的 URL 結構絕對是 SEO 的基本功。
1001YA Expert Team
service@1001ya.com
Related to this topic:
Comments
-
Guest 2025-07-05 Reply嘿，國際SEO夥伴！這篇文章真的戳中痛點。想跟大家分享歐美站點經驗，特別是動態路由那塊。有沒有機會線上交流？我這邊有幾個超實用的優化小撇步，很想聽聽你們的看法。
