Framer SEO 怎麼設定？從 meta、sitemap 到 AI 搜尋可見度的完整指南
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 已經幫你做完的那一半
先講一件會讓你鬆一口氣的事。用 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
動態頁的 SEO 是綁出來的，不是填出來的
如果你的站有部落格、作品列表、商品目錄這類由 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
轉址、canonical 與結構化資料
這三個東西聽起來很工程，但操作都在同一個地方：Site Settings。
轉址是搬家時的保命符。改路徑、重整資訊架構、從別的平台搬過來，都要在 Redirects 面板把舊網址對到新網址。少了這一步，你之前累積的所有外部連結會全部指向 404，排名歸零重來。清單有順序性，上面的優先。
Canonical是告訴搜尋引擎「同樣的內容，請以這個網址為準」。多數單站專案用不到，但只要你有同一份內容出現在兩個網址的情況——例如做了多站台或內容鏡像——就要指定，否則會被判定重複內容。
JSON-LD 結構化資料是讓你的頁面在搜尋結果上長出星星評分、麵包屑、FAQ 折疊清單那種東西。Framer 沒有現成欄位，要走 Custom Code 貼進 head。懶得手寫的話，Framer 的 Agents現在也能幫你產一份草稿，你只要檢查欄位有沒有填錯。文章型網站至少放 Article 跟 FAQPage 兩種，這是投報率最高的兩個。
CHAPTER 06 · AEO
2026 的新戰場：讓 AI 讀得懂你的網站
今年開始，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
按下 Publish 之前的六個動作
按順序做，前面沒做完不要跳下一步。整套第一次跑大約半小時，之後每個新站十五分鐘。
全站 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
重點整理
TAKEAWAYS
→
Framer 把技術層的 SEO 全自動化了，你要處理的是內容層——那也正是決定排名的那一層。
→
Page Settings 的五格全部填滿，比任何進階技巧都有效。留空的欄位系統會自己亂補。
→
動態頁綁 CMS 變數是全站槓桿最大的一步：設定一次，五百頁同時受惠。
→
語意標籤是設計師的專屬盲點，畫布上看起來像標題的東西，不指定 Tag 就不是標題。
→
2026 要多顧一層 AEO：llms.txt、結構化資料、每段第一句能單獨成立。
做完這些不會讓你隔天衝上第一名。SEO 的回報週期以月計，而且前三個月常常看起來完全沒動靜。但這些欄位的特性是，你填了就一直在那裡幫你工作，跟廣告停了流量就歸零剛好相反。設計師最容易犯的錯，是把網站當成一次性的視覺交付——它其實是一個會長大的資產，而這篇講的就是怎麼幫它把根扎進土裡。
RELATED READS · 延伸閱讀
Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學
本篇第三章的前置知識。先把 Collection 建對，SEO 變數才綁得起來。
閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具
還在評估要不要跳進 Framer 的話，從這篇開始。
閱讀文章 →Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂
Agents 現在也能掃 SEO 問題、改標題與 alt text，這篇拆解它的能力邊界。
閱讀文章 →Claude Code 怎麼做出沒有 AI 感的網站？
如果你的專案已經跨出 Framer，這套調教方法能接上。
閱讀文章 →Rive 是什麼？設計師終於等到能寫程式的動效工具
動效做得漂亮又不拖累 Core Web Vitals，Rive 是目前最好的解。
閱讀文章 →Figma Agent 是什麼？直接在 canvas 上動手的設計 AI
設計端的 AI 現況，跟 Framer Agents 是同一場競賽的兩邊。
閱讀文章 →EXTRA · 官方資源
常見問題
Q：Framer 的 SEO 真的比 WordPress 差嗎？
技術面不會，Framer 的靜態輸出、CDN 與圖片壓縮開箱就贏過沒調校的 WordPress。差別在生態系——WordPress 有大量 SEO 外掛幫你自動檢查，Framer 要你自己記得填。所以真正的差距是流程紀律，不是平台能力。
Q：免費方案的網站可以做 SEO 嗎？
可以設定，但免費方案是 framer.website 的子網域，權重累積在 Framer 而不是你身上，而且沒有自訂網域就沒辦法建立品牌搜尋。真的要經營 SEO，綁自己的網域是第一步。
Q：動效跟動畫會不會拖累 SEO 分數？
會影響的是 CLS，也就是版面位移。進場動畫如果讓元素從無到有推擠版面，分數就會掉。解法是用不觸發 reflow 的動畫屬性，並且給圖片與影片明確的尺寸，讓瀏覽器先把位置留好。
Q：改了頁面路徑，舊網址會怎樣？
Framer 會自動幫你在新舊路徑之間建 301 轉址，這點比多數工具貼心。但從別的平台搬過來的舊網址不在此列，要自己去 Redirects 面板逐條補。
Q：llms.txt 現在做了真的有用嗎？
還沒有任何一家 AI 公司把它列為正式標準，所以短期效益不明確。但它的成本只有一份純文字檔，而且順著寫的過程會逼你把網站結構講清楚——光是這個副作用就值得做一次。
Q：全部設定好之後多久會有效果？
收錄大概幾天到兩週，排名要三到六個月。新站前三個月幾乎看不到動靜是正常的，這段期間該做的是持續產出內容，而不是反覆調整設定。