2026年8月18日 下午 10:51
AI 設計✱ FRAMER · SEO · 2026
QUICK ANSWER
Framer SEO 的設定分成兩層：技術層 Framer 已經全自動處理，包含 sitemap.xml、robots.txt、301 轉址、WebP 壓縮與 CDN；內容層則要你自己填，包含每一頁的 Title、Description、Social Preview、Slug、語意標籤與 alt text。2026 年還多了第三層——AEO，也就是讓 AI 搜尋引擎讀得懂你的網站。這篇把三層逐一拆開。
✱ CHAPTER 01 · WHAT IS BUILT IN
先講一件會讓你鬆一口氣的事。用 Framer 做的網站，SEO 的起跑點比大部分工具高，而且高的那一段你完全不用動手。
sitemap.xml 跟 robots.txt 是自動生成的，你發佈一個新頁面，它自己會進地圖。圖片自動轉 WebP、自動 lazy load、走全球 CDN。改一個頁面的路徑，Framer 自動幫你留一條 301 轉址，舊網址不會變死連結。Core Web Vitals 那三個指標——LCP、INP、CLS——在編輯器裡就看得到，不用切去 PageSpeed Insights。
這些是十年前需要一整個前端工程師團隊處理的事。現在是預設值——如果你還在評估要不要跳進 Framer，這篇有完整的工具定位。
但「起跑點高」跟「會贏」是兩回事。Framer 把技術債清乾淨了，剩下的欄位它不會替你填——而排名恰好是由那些欄位決定的。
✱ CHAPTER 02 · PAGE SETTINGS
每一個頁面右鍵進 Page Settings，裡面的每一格都直接對應搜尋結果上的一塊。這是整篇最高投報率的一段，五分鐘看完，一輩子受用。
TITLE · 搜尋結果的藍色那一行
六十個字元以內，超過會被截斷成刪節號。把最重要的關鍵字放前面，品牌名放後面——因為手機版的截斷點更早。留空的話 Framer 會拿頁面名稱頂上，那通常是「Home」或「未命名」。
DESCRIPTION · 藍色那行下面的灰字
一百五十字元左右。它不直接影響排名，但它決定使用者要不要點。寫法上不要寫「我們是一家專業的設計公司」，要寫「這一頁能給你什麼」。留空的話，Google 會自己從內文抓一段，抓到什麼你控制不了。
URL · 三到六個英文單字
單字之間用連字號，不要用底線——這是 Google 白紙黑字寫的建議。中文標題自動生成的路徑會變成一長串編碼，難看又不利搜尋，建完頁面手動改掉。已經發佈過的頁面要改路徑，記得補一條轉址。
SOCIAL PREVIEW · 1200 × 630
貼到 Threads、LINE、Slack 時跳出來的那張圖。沒設的話多數平台會抓頁面第一張圖，比例常常是歪的。這一張是點擊率的隱形槓桿，尤其在社群導流佔比高的站。
索引開關 · 兩個獨立勾選
「是否讓搜尋引擎收錄」跟「是否出現在站內搜尋」是兩個開關。感謝頁、測試頁、只給特定客戶看的提案頁，記得把第一個關掉，不然它們會跟你的主要頁面互相稀釋。
官方有一支三分鐘的影片示範這幾格怎麼填，看完就能直接動手：
Framer 官方教學 — 更新網站的標題、描述與社群分享圖
SEO 最貴的成本從來不是做，
是漏掉之後才發現。
✱ CHAPTER 03 · CMS PAGES
如果你的站有部落格、作品列表、商品目錄這類由 Framer CMS 生成的動態頁，這一段的優先順序高過前面所有東西。
原因很簡單：靜態頁你有五頁，動態頁你可能有五百頁。一個設定影響五百頁，槓桿差了兩個數量級。
做法是在動態頁的 Page Settings 裡把 Title 和 Description 綁成 CMS 欄位變數——用雙大括號包住欄位名稱，每一筆資料就會生出屬於自己的標題和描述。
實務上建議在 Collection 裡多開一個獨立的 SEO 描述欄位，不要直接綁摘要。摘要是寫給讀者看的，開場常常是氣氛句；搜尋結果需要的是資訊密度。兩者混用的結果是兩邊都不好。
分享圖同理，綁縮圖欄位就好。這樣客戶每發一篇新文章，SEO 跟社群預覽都自動長出來，不用回來找你。
✱ CHAPTER 04 · SEMANTIC TAGS
這一段是我認為 Framer SEO 裡最被低估的部分，而且它剛好是設計師的盲點。
在畫布上，你的標題只是「一段字級 48 的粗體文字」。它看起來像標題，但輸出成 HTML 之後，如果你沒有指定標籤，它就只是一個普通的文字節點。搜尋引擎看不到層級，只看到一堆一樣重的字。
Framer 把這個設定放在圖層的 Accessibility 面板裡，一個叫 Tag 的下拉選單。導覽列選 nav、頁尾選 footer、文章主體選 article、每個大段落選 section。文字圖層則是選 H1 到 H6。一頁只能有一個 H1，而且它應該是這一頁的主標題，不是你的 logo。
alt text 順帶提一個小規則：描述要具體，而且用句號結尾。「一張圖片」不算 alt text，「Framer 編輯器的 Page Settings 面板」才算。也不要塞關鍵字，那會被判定為作弊。
✱ CHAPTER 05 · TECHNICAL
這三個東西聽起來很工程，但操作都在同一個地方：Site Settings。
轉址是搬家時的保命符。改路徑、重整資訊架構、從別的平台搬過來，都要在 Redirects 面板把舊網址對到新網址。少了這一步，你之前累積的所有外部連結會全部指向 404，排名歸零重來。清單有順序性，上面的優先。
Canonical是告訴搜尋引擎「同樣的內容，請以這個網址為準」。多數單站專案用不到，但只要你有同一份內容出現在兩個網址的情況——例如做了多站台或內容鏡像——就要指定，否則會被判定重複內容。
JSON-LD 結構化資料是讓你的頁面在搜尋結果上長出星星評分、麵包屑、FAQ 折疊清單那種東西。Framer 沒有現成欄位，要走 Custom Code 貼進 head。懶得手寫的話，Framer 的 Agents現在也能幫你產一份草稿，你只要檢查欄位有沒有填錯。文章型網站至少放 Article 跟 FAQPage 兩種，這是投報率最高的兩個。
✱ CHAPTER 06 · AEO
今年開始，SEO 這個詞已經不夠用了。越來越多人的搜尋行為結束在 AI 給的那段答案裡，根本沒有點進任何網站。你的排名再高，如果 AI 沒有引用你，流量還是不會來。
這件事有一個新名字叫 AEO，答案引擎最佳化，也是AI 正在重寫設計師獲客方式的其中一條線。它衡量的不是排名，是「AI 找不找得到你、看不看得懂你、願不願意引用你」。
Framer 在這件事上動作很快，Site Settings 裡直接支援上傳 llms.txt——一份寫給 AI 模型看的網站說明書，用純文字講清楚你這個站是什麼、有哪些重點頁面。robots.txt 是給爬蟲看的規則，llms.txt 是給模型看的導覽。
Framer 官方另外做了一個免費的 AEO 掃描器，丟網址進去幾秒就給你四個面向的分數：找得到、可引用、看得懂、可信任。我拿自己的站掃過，最弱的那一項通常都是「看得懂」——原因幾乎都是結構化資料沒補齊。
要提高 AEO 分數，做法其實跟好的 SEO 高度重疊：清楚的標題層級、開頭就給結論的段落、明確的 FAQ、完整的結構化資料。差別在於 AI 更吃「這段話能不能單獨被抽出來當答案」。所以每一個章節的第一句，盡量寫成可以獨立成立的完整句子。
✱ CHAPTER 07 · CHECKLIST
按順序做，前面沒做完不要跳下一步。整套第一次跑大約半小時，之後每個新站十五分鐘。
全站 Title 與 Description
Site Settings 先設一組全站預設，再逐頁覆寫。順手把 favicon 一起上傳。
逐頁檢查路徑與索引開關
路徑改成英文連字號格式，感謝頁與測試頁關掉搜尋引擎收錄。
動態頁綁 CMS 變數
標題、描述、分享圖三個都綁。這一步的槓桿最大，別跳過。
掃一遍語意標籤與 alt text
每一頁確認只有一個 h1，導覽列與頁尾指定標籤，所有圖片補上描述。
補結構化資料與 llms.txt
Article 與 FAQPage 兩種 JSON-LD 貼進 Custom Code，llms.txt 上傳到 Files。
發佈後送 Search Console
驗證網域、提交 sitemap.xml、對重點頁面按一次手動索引。不送的話收錄要等好幾週。
✱ CHAPTER 08 · TAKEAWAYS
✱ 這一篇的黑板
✱ Framer 把技術層的 SEO 全自動化了，你要處理的是內容層——那也正是決定排名的那一層。
✱ Page Settings 的五格全部填滿，比任何進階技巧都有效。留空的欄位系統會自己亂補。
✱ 動態頁綁 CMS 變數是全站槓桿最大的一步：設定一次，五百頁同時受惠。
✱ 語意標籤是設計師的專屬盲點，畫布上看起來像標題的東西，不指定 Tag 就不是標題。
✱ 2026 要多顧一層 AEO：llms.txt、結構化資料、每段第一句能單獨成立。
做完這些不會讓你隔天衝上第一名。SEO 的回報週期以月計，而且前三個月常常看起來完全沒動靜。但這些欄位的特性是，你填了就一直在那裡幫你工作，跟廣告停了流量就歸零剛好相反。設計師最容易犯的錯，是把網站當成一次性的視覺交付——它其實是一個會長大的資產，而這篇講的就是怎麼幫它把根扎進土裡。
✱ RELATED READS ／ 延伸閱讀
Framer 網域怎麼綁？DNS 設定、SSL 憑證與五個最常卡關的地方
做 SEO 之前的前置作業。網域沒綁好，後面全部白做。
閱讀文章 →Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學
本篇第三章的前置知識。先把 Collection 建對，SEO 變數才綁得起來。
閱讀文章 →Framer 表單怎麼做？從原生 Form 元件到通知、防垃圾與成效追蹤
人找到你之後，要有一條路把他留下來。
閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具
還在評估要不要跳進 Framer 的話，從這篇開始。
閱讀文章 →Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂
Agents 現在也能掃 SEO 問題、改標題與 alt text，這篇拆解它的能力邊界。
閱讀文章 →Claude Code 怎麼做出沒有 AI 感的網站？
如果你的專案已經跨出 Framer，這套調教方法能接上。
閱讀文章 →✱ EXTRA ／ 官方資源
✱ FAQ
技術面不會，Framer 的靜態輸出、CDN 與圖片壓縮開箱就贏過沒調校的 WordPress。差別在生態系——WordPress 有大量 SEO 外掛幫你自動檢查，Framer 要你自己記得填。所以真正的差距是流程紀律，不是平台能力。
可以設定，但免費方案是 framer.website 的子網域，權重累積在 Framer 而不是你身上，而且沒有自訂網域就沒辦法建立品牌搜尋。真的要經營 SEO，綁自己的網域是第一步。
會影響的是 CLS，也就是版面位移。進場動畫如果讓元素從無到有推擠版面，分數就會掉。解法是用不觸發 reflow 的動畫屬性，並且給圖片與影片明確的尺寸，讓瀏覽器先把位置留好。
Framer 會自動幫你在新舊路徑之間建 301 轉址，這點比多數工具貼心。但從別的平台搬過來的舊網址不在此列，要自己去 Redirects 面板逐條補。
還沒有任何一家 AI 公司把它列為正式標準，所以短期效益不明確。但它的成本只有一份純文字檔，而且順著寫的過程會逼你把網站結構講清楚——光是這個副作用就值得做一次。
收錄大概幾天到兩週，排名要三到六個月。新站前三個月幾乎看不到動靜是正常的，這段期間該做的是持續產出內容，而不是反覆調整設定。
