最近承接的網站 SEO 案件，業主官網使用的是近年新興的架站工具 Framer，因此有機會摸索到 Framer 的後台，並進行相關的 SEO 操作。過程中發現 Framer 雖然提供了影片與文章等學習資源，但都是以英文為主，中文教學還很少見。因此撰寫本篇文章，期待對於利用 Framer 架站並希望提升網站 SEO 表現的中文使用者有幫助。
以下會先簡單說明 SEO 的好處，接著整理 Framer 官方提供的 SEO 教學文章（英文），最後是 SEO 基礎設定的中文教學，包含：如何在 Framer 設定 meta title、meta description、語意標籤／H標籤（h1、h2⋯⋯）以及圖片 alt 文字。特別加碼：如何在 Framer 埋放 GA4 追蹤碼的教學。
SEO 是什麼？有什麼好處？
SEO，全稱為 Search Engine Optimization，是指通過優化網站內容和結構，以提升在搜尋引擎結果頁（SERP）中的自然排名。一個網站的自然排名如果愈前面，通常能獲得更多的網站流量，大大提高網站的曝光率和品牌知名度。
Framer 官方提供的 SEO 教學
Framer 本身提供超過 15 篇與 SEO 有關的教學文章，從中精選三篇如下列表。如果是想要自行閱讀官方說明文件的讀者，歡迎參考。如果是想要直接跟著中文教學操作，進行後設資料（metadata）、H標籤（h1、h2⋯⋯）相關設定的讀者，可以直接跳到下一個段落。
此篇文章主要說明 Framer 提供哪一些對於 SEO 有幫助的技術，例如：符合 GDPR 的網站分析工具、自動產生網站地圖（sitemap）、H標籤設定、後設資料設定等。
此篇文章為讀者建立 SEO 基本觀念，包含 SEO 的重要性、評估指標、運作方式以及制定 SEO 策略的重點等。
此篇文章彙整使用者可以透過 Framer 進行的 SEO 相關操作，也針對各項操作提供更多延伸的影片或文章連結。
除了以上推薦文章，Framer 還有十餘篇 SEO 教學針對各種 SEO 措施有更深入的說明，可以逕行查看他們的幫助頁面。
Framer 的 SEO 基礎設定中文教學
以下將依序介紹如何在 Framer 設定 metadata、H標籤、圖片 alt 文字以及埋放 GA4 追蹤碼。你可以利用左側的「目錄」功能，快速跳到想要了解的段落。
✦ 後設資料（meta title、meta description、keywords）
登入 Framer 後台，選擇要編輯的網站。點擊右上角的齒輪圖示，進入設定頁面。在 Page Settings 區塊，你可以為每一個頁面設定個別的 meta title 與 meta description。
meta title 和 meta description 在 Framer 的後台介面，分別被稱為「Title」和「Page description」。依據目標關鍵字撰寫好相關文案之後，你可以把內容分別貼入這兩個欄位。
輸入之後，Framer 還會在下方貼心地提供預覽畫面，看看 meta title 和 meta description 的顯示效果如何。不過，個人建議可以預先利用其他的免費 SEO 工具來檢查標題與描述的長度，例如：highervisibility 的 Google SERP Snippet Optimization Tool 或是 PORTENT 的 SERP Preview Tool。這些工具通常會在內容過長的時候，轉為紅字警示，使用上更為直觀方便。
有一些經驗的讀者至此可能會好奇：meta keywords 要去哪裡設定呢？事實上，Framer 目前並沒有提供 meta keywords 的設定欄位，使用者僅能透過後台設定 meta title 和 meta description。
根據 Framer 官方提供的 SEO 功能與工具指南還有 Google 搜尋中心的說法，Google 搜尋引擎在為網頁排名的時候，並不會參考 keywords 的內容，而是根據網頁的內文來抓取關鍵字。因此，雖然無法設定 meta keywords，但是我們可以專注於充實網頁內容，並在其中適時安插目標關鍵字。
以上填寫完成之後，別忘了按下 Save 和 Publish，正式儲存並發布唷！
✦ 語意標籤／H標籤（h1、h2⋯⋯）
登入 Framer 後台，選擇要編輯的網站，進入要編輯的頁面。
輕點文字一下，右方會跳出文字設定項目，往下拉到「Accessibility」，其中的「Tag」就是我們可以設定H標籤的位置。
稍有不慎，這一部分可能會與「Text」的「Styles」欄位搞混，然而 Styles 設定的是各個文字層級的樣式，影響的只是文字外觀，並不能實際改變 H 標籤，可別設定錯誤囉！
編輯完成之後，記得按下 Publish 以更新網頁。
✦ 圖片 alt 文字
登入 Framer 後台，選擇要編輯的網站，進入要編輯的頁面。
輕點圖片兩下，會跳出圖片設定項目，在「Alt Text」欄位輸入替代文字，再點擊頁面的空白處就完成囉！
填寫完畢之後，還要點擊 Publish，網頁才會正式更新唷！
✦ 埋放 GA4 追蹤碼
在 Framer 埋放 GA4 追蹤碼可以說是相當簡單。在埋放 GA4 追蹤碼之前，需要先建立 Google Analytics 的帳戶與資源，這部分網路上已經有許多中文教學，在此會先略過。以下直接進入「如何與 Framer 網站串流」的說明。
只要 3 個步驟，就可以輕鬆完成 GA4 追蹤碼埋放：
- 登入 Google Analytics，切換到網站欲連接的帳戶與資源。
- 點擊左下角的齒輪圖示，切換到「管理」頁面。接著點擊以下路徑「資源設定 > 資料收集和修改 > 資料串流」，來到「資料串流頁面」。在資料串流頁面點擊要串流的網站，畫面會滑出「網頁串流詳情」，然後複製出現的「評估 ID」（Measurement ID）。評估 ID 應該會是一串以「G-」開頭的英數字。
- 登入 Framer 後台，選擇要串流的網站。點擊右上角的齒輪圖示，進入設定頁面。在左側選單，點擊「Site Settings > General」，進入 Site Settings 頁面，往下拉到「Google Analytics」區塊，在「Google Analytics Measurement ID」欄位貼上評估 ID，按下 Save，接著按下 Publish。
以上，這樣就完成 GA4 追蹤碼埋放了！
