--- title: "Webflow 轉 Astro：匯出、重建與 SEO 指南" description: "Webflow 轉 Astro：Webflow 的程式碼匯出不含 CMS 內容、表單與多語系頁面。該匯出什麼、重建什麼，以及如何保住網址與 SEO。" url: "https://dardo.studio/zh-Hant/blog/webflow-to-astro/" language: "zh-Hant" translations: {"en":"https://dardo.studio/en/blog/webflow-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-webflow-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-webflow-vers-astro/","de":"https://dardo.studio/de/blog/webflow-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-webflow-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-webflow-para-astro/","nl":"https://dardo.studio/nl/blog/webflow-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-webflow-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-webflow-do-astro/","uk":"https://dardo.studio/uk/blog/webflow-to-astro/","ru":"https://dardo.studio/ru/blog/webflow-to-astro/","ar":"https://dardo.studio/ar/blog/webflow-to-astro/","hi":"https://dardo.studio/hi/blog/webflow-to-astro/","th":"https://dardo.studio/th/blog/webflow-to-astro/","ja":"https://dardo.studio/ja/blog/webflow-to-astro/","ko":"https://dardo.studio/ko/blog/webflow-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/webflow-to-astro/"} updated: "2026-10-13T02:23:29.526Z" --- [部落格](https://dardo.studio/zh-Hant/blog/) # Webflow 轉 Astro：如何遷移 Webflow 網站，同時保住內容、設計與排名 Webflow 轉 Astro 之前要知道：程式碼匯出不含 CMS、表單、搜尋與多語系頁面。本文說明該從 Webflow 匯出什麼、在 Astro 重建什麼，以及如何保住排名。 作者： [Nicolás Cerón](https://dardo.studio/zh-Hant/studio/) ·2026年10月12日 ![夜晚，一座古老的石造運河水閘敞開著木製閘門，一艘深紅色的小船正從水流湍急的運河駛入平靜的港灣，山丘上有一座亮著燈的天文台。](https://dardo.studio/_astro/01M4SGD5R7TZ48H2M3RJ9DSK7D_Z2nrI.webp) ## 重點 - 在付費的 Workspace 方案中，Webflow 可以匯出 HTML、CSS、JavaScript 與圖片，但不包含 CMS 內容、表單處理、站內搜尋、密碼保護與次要語系。 - 將每個 CMS Collection 匯出為 CSV（每個語系各匯出一次），或透過 Webflow Data API 讀取，並下載所有圖片：匯出的圖片欄位仍然指向 Webflow 的代管服務。 - 將程式碼匯出當作參考，而不是新網站：它會帶著 Webflow 的 JavaScript、jQuery 與空白的 Collection 清單。 - Webflow 的網址結尾不帶斜線；請設定 Astro 的 trailingSlash 與 build.format 以保持一致，並為所有有變動的網址加上一對一的伺服器端 301 轉址。 - 關閉 Webflow 專案前，確認沒有任何圖片、PDF 或 Open Graph 圖片仍從 website-files.com 載入。 ## 簡短回答 離開 Webflow 比離開 Framer 容易（Framer 完全沒有 HTML 匯出功能），但也只容易一部分。在付費的 Workspace 方案中，你可以匯出網站的 HTML、CSS、JavaScript 與圖片，並放在任何地方代管。Webflow 的說明中心也同樣清楚說明了哪些東西帶不走：CMS 內容、表單處理、站內搜尋、密碼保護、在地化頁面和程式碼元件（code components）都不在匯出範圍內，Collection 清單只會顯示空白狀態（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)）。 因此，從 Webflow 轉到 Astro，一半是匯出，一半是重建。先匯出 Webflow 能給你的部分，再透過 CSV 或 API 取出 CMS 內容，將每個範本重建為 Astro 元件、替換表單與搜尋、重新製作想保留的互動效果，並為每個有變動的網址設定永久轉址。照這個順序進行，新網站就能保住原本的設計、內容與排名。 ## 為什麼團隊會從 Webflow 轉到 Astro Webflow 是很強大的視覺化網站建置工具，許多行銷團隊也應該繼續使用它。離開的理由通常與所有權和成本有關，而不是設計： - **網站改由工程團隊負責。**當大部分修改都由開發人員進行時，放在自己儲存庫中的程式碼比視覺化畫布更有效率，而且可以和你的產品、後端與測試放在一起。 - **每個網站的方案費用。**根據 Webflow 的[價格頁面](https://webflow.com/pricing)（2026 年 10 月 13 日查閱），Basic 網站方案每月 15 美元，包含 Webflow CMS 的 Premium 方案每月 25 美元，兩者皆按年計費。在地化則是加購項目，每月 9 美元起。 - **需要真正後端的功能：**寫入 CRM 的表單、限定存取的內容、跨多個網站的搜尋，或任何必須在你自己的基礎架構上運行的功能。 - **光靠匯出無法真正搬離。**程式碼匯出需要付費的 Workspace 方案，只有網站方案並不夠，而且匯出內容不含 CMS。無論如何，想要乾淨地搬離都需要事先規劃。 如果你的行銷團隊每週都以視覺化方式發布頁面，網站也運作良好，繼續留在 Webflow 是合理的選擇。遷移應該換來某個具體的好處。 ## Webflow 程式碼匯出包含什麼、不包含什麼 | 網站組成 | 程式碼匯出中有嗎？ | 在 Astro 中怎麼做 | | -------------------- | --------------------------------------- | ------------------- | | 靜態頁面 | 有，匯出為 .html 檔案，僅限主要語系 | 重建為 Astro 頁面與元件 | | 樣式 | 有：網站本身的 CSS、webflow.css 與 normalize.css | 當作參考，只保留需要的 CSS | | 互動效果與元件 | 有，透過 Webflow 的 JavaScript 檔案運作 | 用 CSS 或一小段腳本重新製作 | | Assets 面板中的圖片 | 有 | 用 astro:assets 最佳化 | | CMS Collection 項目與清單 | 沒有；清單顯示空白狀態 | 匯出為 CSV 或透過 API 讀取 | | 表單提交 | 不處理 | 將每個表單指向你自己的端點 | | 站內搜尋 | 沒有 | 加入靜態搜尋索引或搜尋服務 | | 密碼保護 | 沒有 | 在主機或你的應用程式中保護頁面 | | 次要語系 | 沒有；僅限主要語系 | 用 Astro 的 i18n 路由重建 | | 電子商務、使用者帳號、程式碼元件 | 沒有 | 將每一項當作獨立專案來規劃 | 來源：Webflow 說明中心關於[匯出網站程式碼](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)的文章。 ## 檢查已發布的 Webflow 網站時，我們看到了什麼 2026 年 10 月 13 日，我們下載了七個以 Webflow 建置的網站首頁（包括 webflow.com 本身），檢視一次遷移需要帶走哪些東西： - **七個網站都從 Webflow 的伺服器載入 jQuery 與圖片。**圖片來自 cdn.prod.website-files.com，而 Webflow 自己的說明中心也指出，匯出成 CSV 的圖片與檔案欄位是指向原專案代管位置的連結，一旦該專案被刪除，連結就會失效（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS)）。每個資源檔都必須下載後重新代管。 - **七個網站的社群分享圖片也都由 Webflow 提供。**Open Graph 圖片很容易被遺忘，舊專案一關閉，LinkedIn 或 WhatsApp 上的連結預覽就會少了圖片。 - **七個網站都直接在已發布的 HTML 中呈現 CMS 清單**，每個首頁有 3 到 19 個 Collection 清單。這是個好消息：我們的 [Framer 轉 Astro 指南](https://dardo.studio/zh-Hant/blog/framer-to-astro/)提到，Framer 網站會在載入後由執行環境重新組成；已發布的 Webflow 頁面則不同，它是一份完整的參考，能準確告訴你哪些內容放在哪裡，即使程式碼匯出會讓這些清單變成空白。 - **七個網站中有五個使用 Webflow Interactions**，以 data-w-id 屬性標記，單一首頁上最多有 109 個元素帶有這個屬性。每一個都是需要重新製作的小型行為，或是需要決定是否捨棄。 ## Webflow 轉 Astro 的步驟 1. **盤點每個網址。**啟用相關選項後，Webflow 會自動產生 /sitemap.xml（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow)）。加入每個 Collection 頁面，以最長的可用時間範圍從 Google Search Console 匯出「網頁」報表，並從 Site settings 的 Publishing 區塊，將現有的 301 轉址匯出為 CSV（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects)）。 2. **匯出內容。**從 CMS 面板將每個 CMS Collection 匯出為 CSV；如果使用 Localize，每個語系各匯出一次，並保留 Item ID 欄。CSV 會把結構攤平：參照欄位變成純文字，多重參照變成以逗號分隔的文字，富文字則變成 HTML。凡是有參照的內容，[Webflow Data API](https://developers.webflow.com/data/reference/cms/collection-items) 能列出項目及其欄位與語系，通常比把多個 CSV 檔案重新拼湊起來更乾淨。 3. **下載所有資源檔。**圖片、PDF、你有授權可自行代管的字型、Open Graph 圖片與網站圖示（favicon）。在新網站不再指向 website-files.com 之前，不要關閉 Webflow 專案。 4. **將匯出的程式碼當作參考。**如果你使用付費的 Workspace 方案，就匯出 HTML 與 CSS。不要把它部署成新網站：它會帶著 webflow.js、jQuery 與空白的 CMS 清單。用它來查看精確的間距、斷點與 class 結構。 5. **在 Astro 中建立內容模型。**將每個 Collection 轉換為 Astro 的 [content collection](https://docs.astro.build/en/guides/content-collections/) 或 headless CMS 模型，參照關係仍維持為參照，接著將每個範本重建為 Astro 元件，並將圖片改用 [astro:assets](https://docs.astro.build/en/guides/images/) 處理。 6. **重新製作有意義的互動效果。**大多數 Webflow Interactions 都能改用 CSS transition、keyframes 或幾行 JavaScript 實現。若需要更複雜的動態效果，自從 Webflow 在 2025 年 4 月將 GSAP 免費開放後，GSAP 已可免費用於商業用途（[Webflow](https://webflow.com/blog/gsap-becomes-free)）。無論採用哪種方式，都請遵循 prefers-reduced-motion 設定。 7. **替換表單、搜尋與受保護的頁面。**為每個表單設定真正的端點（Cloudflare Worker、表單服務或你的 CRM）；如果網站需要搜尋，就加入 [Pagefind](https://pagefind.app/) 這類靜態搜尋索引；並將所有密碼保護移到你的主機或應用程式上。 8. **好好重建在地化頁面。**程式碼匯出只包含主要語系，因此請用 [Astro 的 i18n 路由](https://docs.astro.build/en/guides/internationalization/)建置每種語言，每種語言各有一個網址，並在彼此之間設定 hreflang。 9. **維持相同的網址格式。**Webflow 提供的頁面結尾不帶斜線，並會將 /pricing/ 轉址到 /pricing。請設定 Astro 的 trailingSlash 與 build.format，讓新網站產生相同的網址（[Astro 設定參考](https://docs.astro.build/en/reference/configuration-reference/)）；每一處不一致，都是一個原本不需要的轉址。 10. **在伺服器端轉址，然後上線並持續觀察。**沒有使用 adapter 的靜態 Astro 建置，會把設定的轉址變成 meta refresh 頁面，因此請在網站代管的地方設定一對一的 301 轉址，例如透過 Cloudflare 的 \_redirects 檔案。切換 DNS，在新網站驗證完成前保留 Webflow 專案，並在接下來幾週追蹤 Search Console 的索引報表。我們的[網站遷移 SEO 檢查清單](https://dardo.studio/zh-Hant/blog/website-migration-seo-checklist/)涵蓋了上線當天及之後 90 天的工作。 ## 遷移後有哪些改變 | 項目 | 在 Webflow 上 | 在 Astro 上 | | ---- | ------------------------------ | ---------------------------------- | | 編輯 | 視覺化 Designer 與 Webflow CMS 編輯器 | CMS 欄位或程式碼，取決於你的選擇 | | 主機代管 | Webflow 代管，按網站計費 | 任何靜態主機或邊緣平台，例如 Cloudflare | | CMS | Webflow Collections | Content collections 或 headless CMS | | 表單 | Webflow 的表單處理 | 你自己的端點與資料儲存 | | 搜尋 | Webflow 站內搜尋（Premium 方案） | 靜態索引或搜尋服務 | | 在地化 | Webflow Localize 加購項目 | Astro i18n 路由，每種語言一個網址 | | 動態效果 | Webflow Interactions 與 GSAP | 由你掌控、可以衡量的 CSS 與 JavaScript | ## 保住 SEO Google 的[變更網址的網站搬遷指南](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)在這裡同樣適用：將每個舊網址對應到最相近的新網址、使用伺服器端永久轉址，並至少保留一年。如果網址完全不變（對 Webflow 網站來說，細心的重建通常做得到），你主要需要確認標題、描述、canonical 標籤、結構化資料與 Open Graph 圖片都已完整沿用。 Webflow 特有的陷阱，是殘留的東西：仍從 website-files.com 載入的 Open Graph 圖片或 PDF、仍被索引的 webflow.io 測試網址，或是在遷移中 slug 改變了的 CMS 頁面。關閉 Webflow 專案前，請把這三項都檢查一遍。 ## Dardo 如何執行 Webflow 遷移 我們將 Webflow 遷移納入[網站遷移](https://dardo.studio/zh-Hant/services/website-migration/)服務中執行：盤點網址與內容、匯出 CMS，先重建一個具代表性的頁面並在約定的寬度下審查，接著再處理其餘的範本、表單與轉址。建置本身屬於以 Astro 進行的[網站開發](https://dardo.studio/zh-Hant/services/web-development/)，動態效果則屬於[創意開發](https://dardo.studio/zh-Hant/services/creative-development/)。dardo.studio 這個網站本身就是以 Astro 建置、運行於 Cloudflare Workers，內容放在 headless CMS 中，我們也是透過這個 CMS 撰寫並發布這個部落格。 如果你正在評估是否要遷移，[把網站和你想改變的地方告訴我們](https://dardo.studio/zh-Hant/contact/?service=website-migration)。在報價之前，我們會先告訴你離開 Webflow 是否值得。 ## 常見問題 **可以把 Webflow 網站匯出成 HTML 嗎？** 可以，但需要付費的 Workspace 方案：Webflow 會匯出 HTML、CSS、JavaScript 與圖片，你可以放在任何地方代管，無須標示出處。單有網站方案並不包含程式碼匯出，而且匯出內容不包含 CMS 內容、表單處理、站內搜尋、密碼保護與次要語系。 **Webflow 的程式碼匯出包含 CMS 內容嗎？** 不包含。Collection 清單會顯示空白狀態，Collection 頁面也會失去綁定在欄位上的內容。請從 CMS 面板將每個 Collection 匯出為 CSV，或透過 Webflow Data API 讀取，它會將欄位與語系保留在一起。 **從 Webflow 轉到 Astro，會讓 Google 排名下降嗎？** 只要每個帶來流量的網址都持續有回應，就不會。維持相同的路徑（包括 Webflow 結尾不帶斜線的格式），為有變動的網址加上 301 永久轉址，沿用標題、描述與結構化資料，並在上線後幾週持續關注 Search Console。 **Webflow 的互動效果可以在 Astro 中使用嗎？** 無法直接使用。它們是靠 Webflow 的 JavaScript 運作，因此每個想保留的互動效果都要用 CSS 或一小段腳本重新製作。若需要更複雜的動態效果，GSAP 自 2025 年 4 月起已可免費用於商業用途。 **遷移後，Webflow 的表單會怎麼樣？** 匯出的表單不會把資料送到任何地方，因為 Webflow 是在自己的代管服務上處理提交內容。請將每個表單指向你自己的端點，例如 Cloudflare Worker、表單服務或你的 CRM，上線前測試能否順利送達，並另外從 Webflow 匯出過去的提交資料。 **離開 Webflow 後，團隊還能不寫程式就編輯網站嗎？** 可以，只要 Astro 網站使用 headless CMS。編輯人員在網頁介面中作業，網站再根據這些內容重新建置。dardo.studio 就是這樣運作的。 ## 資料來源與延伸閱讀 本頁內容的資料來源，並附上原始發布者提供的更多詳情。 - [Webflow Help：如何匯出 Webflow 網站程式碼？（英文）](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code) · help.webflow.com - [Webflow Help：匯入與匯出 CMS Collection 內容（英文）](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS) · help.webflow.com - [Webflow Help：匯入與匯出 301 轉址（英文）](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects) · help.webflow.com - [Webflow Help：在 Webflow 中建立 sitemap（英文）](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow) · help.webflow.com - [Webflow 價格方案（英文）](https://webflow.com/pricing) · webflow.com - [Webflow Data API：列出 Collection 項目（英文）](https://developers.webflow.com/data/reference/cms/collection-items) · developers.webflow.com - [Webflow：Webflow 讓 GSAP 100% 免費（英文）](https://webflow.com/blog/gsap-becomes-free) · webflow.com - [Astro 文件：Content collections（英文）](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Astro 文件：圖片（英文）](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Astro 文件：國際化（i18n）路由（英文）](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Astro 文件：設定參考（英文）](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Pagefind：靜態搜尋（英文）](https://pagefind.app/) · pagefind.app - [Google 搜尋中心：變更網址的網站搬遷](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/zh-Hant/studio/) Nicolás Cerón 是 Dardo 的創辦人。Dardo 是一間位於哥倫比亞波哥大的品牌、網頁設計與開發工作室。 ## 相關文章 - [**Framer 轉 Astro：如何遷移 Framer 網站，同時保住設計與排名**Framer 沒有 HTML 匯出功能，所以改用 Astro 等於重建網站。本文說明該先擷取什麼、哪些地方會出問題，以及如何保住設計、網址與排名。](https://dardo.studio/zh-Hant/blog/framer-to-astro/) - [**網站改版與搬遷 SEO 檢查清單：更換平台或網域，也不掉排名**排名下滑，通常不是因為換了新平台，而是原本帶來流量的網址不再有回應。這份檢查清單從網址盤點一路帶你走到第 90 天。](https://dardo.studio/zh-Hant/blog/website-migration-seo-checklist/) - [**WordPress 轉 Astro：如何遷移 WordPress 網站，採用 headless 或完全搬離，同時保住排名**WordPress 轉 Astro 的兩種做法：該匯出什麼、如何保住 Yoast 標題、永久連結與上傳的圖片，以及多數遷移都會遺漏的 WordPress 網址。](https://dardo.studio/zh-Hant/blog/wordpress-to-astro/) - [**WordPress vs 客製化網站：該怎麼選？各自在什麼情況下值得投資**WordPress vs 客製化網站：什麼時候該選 WordPress、什麼時候客製化網站更划算，以及 headless WordPress 這條中間路線，從成本、速度、更新與所有權全面比較。](https://dardo.studio/zh-Hant/blog/wordpress-vs-custom-website/) ## 繼續探索。 - [服務 · **網站遷移，不流失 SEO 成果**](https://dardo.studio/zh-Hant/services/website-migration/) - [您的專案 · **開始聊聊**](https://dardo.studio/zh-Hant/contact/)