Framer 轉 Astro：如何遷移 Framer 網站，同時保住設計與排名

簡短回答

Framer 的說明中心明確表示，Framer 不提供可供自行代管的 HTML 匯出功能（Framer Help）。因此，從 Framer 轉到 Astro 是重建，而不是匯出。你要先把已發布的網站擷取下來當作參考，再將每個範本重建為 Astro 元件、把 CMS 內容搬進 collections、重新製作真正需要的動態效果，並為每個有變動的網址設定永久轉址。

照這個順序進行，新網站可以維持相同的外觀、載入更少的 JavaScript，並保住排名。若跳過擷取或轉址對照表，結果就是一次沒人要求的改版，外加搜尋流量下滑。

為什麼團隊會離開 Framer

Framer 很適合快速設計並發布行銷網站。離開的理由通常是實務上的考量，而不是美感問題：

• 主機代管與所有權。Framer 網站運行在 Framer 的伺服器上。想把程式碼放在自己的儲存庫、自己的主機上，或放在自家後端旁邊的團隊，就必須重建。
• 每個網站的方案費用。根據 Framer 的價格頁面（2026 年 10 月 12 日查閱），Basic 方案每月 10 美元，加入網站轉址功能的 Pro 方案每月 30 美元，兩者皆按年計費。在地化則是付費加購項目。
• 轉址限制。Framer 的轉址只適用於同一網域內的路徑（Framer Help）。
• 需要真正後端的表單、資料與整合：CRM、預約系統、限定存取的內容，或任何必須在你自己的基礎架構上運行的功能。

如果你的行銷團隊每週都以視覺化方式建立和編輯頁面，而網站也運作良好，繼續留在 Framer 可能才是正確的決定。遷移需要投入設計與開發時間，應該換來某個具體的好處。

開發 Framer 擷取工具學到的事

Dardo 開發了一套內部工具，可以擷取已發布的 Framer 頁面（限你擁有的網站），並將其轉換為一個獨立的參考檔案，外加一份 Astro 遷移追蹤表，每個需要重建的項目各佔一列。開發這套工具，讓我們看清 Framer 網站把複雜度藏在哪裡：

• 資源檔放在 Framer 的 CDN 上。圖片、字型與程式碼都從 framerusercontent.com 及相關網域載入。響應式圖片會以多種寬度（?width=512、?width=1024）請求同一個檔案，因此擷取時每張圖片只保留一個本機檔案，也就是最大的那個。
• JavaScript 是分層載入的。Framer 會載入一些只負責重新匯出真正 bundle 的小型模組，所以只掃描一次會漏掉部分程式碼。這套工具會反覆重新掃描，直到不再出現新的模組為止。
• CMS 內容是另一種檔案格式。Framer CMS 的 collections 以 .framercms 檔案提供，頁面會從 CDN 以位元組範圍（byte range）分段取得。在一般的靜態主機上，這些請求會回傳整個檔案，而負責組成這些檔案網址的模組仍然指回 Framer。
• 執行環境會在載入後改寫頁面。Framer 的 React 執行環境（runtime）會對 HTML 進行 hydration，並可能把你刪除的元素重新插入。例如「Made in Framer」徽章，就會被 hydrate 到它自己的容器中。
• 表單依賴 Framer。擷取下來的表單沒有 HTML action 屬性；只有透過 Framer 的用戶端執行環境才能送出。
• SEO 標籤指向 Framer。除非改寫，否則 canonical 與 Open Graph 網址會繼續標示原本的 Framer 網址。
• 動態效果其實是資料。出現效果（Appear effects）以 JSON 資料的形式儲存在頁面中，因此這套工具會把它們連同每個執行中動畫的關鍵影格與時間設定一併記錄下來。

我們得出的結論是：匯出的檔案是證據，而不是交付成果。我們從不上線擷取下來的 HTML 或 Framer 的執行環境。它們的用處，是準確告訴我們該重建什麼。

Framer 轉 Astro 的步驟

1. 盤點每個網址。從網站的 sitemap.xml 開始，加入每個 CMS 頁面，並以最長的可用時間範圍，從 Google Search Console 匯出「網頁」報表。記下已在 Framer 的 Site Settings 中 Hosting 區塊設定的所有轉址。
2. 匯出 Framer 允許匯出的內容。Framer 表示，CMS 內容可以透過外掛匯出為 CSV 或 JSON 等格式（Framer Help）。下載所有圖片與檔案，並在自行代管每款字型之前確認其授權。
3. 將已發布的網站擷取下來作為參考。記錄每個範本在各個斷點的樣貌，以及每個你想保留的動畫的時間設定。我們的工具會以 1440、810 與 390 像素寬擷取頁面，再針對網站 CSS 中找到的每個斷點，在斷點前 1 像素、斷點本身與斷點後 1 像素各擷取一次。
4. 將範本重建為 Astro 元件。把 CMS collections 搬進 content collections 或 headless CMS，圖片改用 astro:assets，在地化頁面則改用 Astro 的 i18n 路由，每種語言各有一個網址。
5. 重新製作有意義的動態效果。大多數 Framer 效果都能改用 CSS transition、keyframes 或一小段腳本實現。請遵循 prefers-reduced-motion 設定。在我們自己的一個 Framer 轉 Astro 重建專案中（一個有 18 條路由、並非客戶專案的網站），219 個捲動與互動狀態中，有 217 個與原版的像素差異在 1% 以內。
6. 為每個表單設定真正的端點。將每個表單指向你自己的處理程式（Cloudflare Worker、表單服務或你的 CRM），並在測試環境中確認資料能順利送達。
7. 沿用搜尋中繼資料。每個頁面都要有標題、描述、Open Graph 標籤、結構化資料，以及指向自身的 canonical，並另外產生一份新的 XML sitemap。
8. 在伺服器端轉址，而不是在 HTML 中轉址。沒有使用 adapter 的靜態 Astro 建置，會把設定的轉址變成沒有 HTTP 狀態碼的 meta refresh 頁面（Astro 設定參考）。請在網站代管的地方設定一對一的 301 轉址，例如透過 Cloudflare 的 _redirects 檔案或 Worker。
9. 上線，然後持續觀察。切換 DNS，在新網站驗證完成前保留 Framer 專案，並在接下來幾週追蹤 Search Console 的索引與「網頁」報表。我們的網站遷移 SEO 檢查清單涵蓋了上線當天及之後 90 天的工作。

遷移後有哪些改變

保住 SEO

Google 的變更網址的網站搬遷指南在這裡同樣適用：將每個舊網址對應到最相近的新網址、使用伺服器端永久轉址，並至少保留一年。如果網址完全不變（細心的重建通常做得到），你只需要確認新頁面帶有相同的內容與中繼資料。

Framer 特有的陷阱，是殘留的 Framer 網址。請確認沒有任何 canonical、sitemap 項目或 Open Graph 標籤仍然指向舊的 Framer 網址，並在新網站上線後，將 Framer 專案取消發布或設定轉址。

Dardo 如何執行 Framer 遷移

我們將 Framer 遷移納入網站遷移服務中執行：盤點、擷取，先重建一個具代表性的頁面並在約定的寬度下審查，接著再處理其餘的範本、表單與轉址。建置本身屬於以 Astro 進行的網站開發，動態效果則屬於創意開發。dardo.studio 這個網站本身就是以 Astro 建置、運行於 Cloudflare Workers，內容則放在 headless CMS 中，這也是我們最常使用的架構。

如果你正在評估是否要遷移，把網站和你想改變的地方告訴我們。在報價之前，我們會先告訴你重建是否值得。