Vue SPA 預渲染與 OpenGraph 完整指南：從問題到解決方案
前言 在現代 Web 開發中，Vue 單頁應用程式（SPA）帶來了優秀的使用者體驗，但同時也面臨著 SEO 和社交媒體分享的挑戰。當用戶在 Facebook、LINE 或其他社交平台分享你的網站連結時，你希望顯示的是精美的預覽卡片，而不是空白或錯誤的資訊。然而，搜尋引擎爬蟲和社交媒體爬蟲無法執行 JavaScript，導致只能抓到空白的 HTML 骨架，Open Graph 標籤也無法正確顯示。 本文將深入探討兩種預渲染策略：Run-time Prerender（動態預渲染） 和 Build-time Prerender（靜態預渲染），並分享實際的實作經驗與部署過程中遇到的挑戰。 問題發現與場景 典型的問題場景 當開發一個基於 Vue.js 3 + Strapi 的網頁平台時，可能會發現一個重要問題： 當用戶分享服務頁面（如 https://www.abc.com/service-us/6）到 Facebook 或 LINE 時，顯示的預覽資訊總是預設值，而非該服務的實際標題和描述。 使用 Facebook 的 Open Graph Debugger 測試後發現，爬蟲抓取到的 HTML 只包含基本的模板，動態生成的 meta 標籤完全沒有被識別。 SPA 的 SEO 困境 典型的 Vue SPA 在未預渲染前，HTML 長這樣： <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>範例網站</title> <meta name="description" content="預設描述"> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> 問題： Facebook 爬蟲抓不到動態產生的 Open Graph 標籤 Google 爬蟲雖然能執行 JS，但會降低 SEO 排名 分享連結到社群媒體時無法顯示預覽圖 我們需要什麼？ 針對不同的路由，回傳不同的 meta 標籤： ...