Framer 中文教學 | SEO 基礎設定篇 | 如何設定 metadata、keywords、GA4 追蹤碼看這篇

最近承接的網站 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⋯⋯）相關設定的讀者，可以直接跳到下一個段落。

• SEO & Performance in Framer

此篇文章主要說明 Framer 提供哪一些對於 SEO 有幫助的技術，例如：符合 GDPR 的網站分析工具、自動產生網站地圖（sitemap）、H標籤設定、後設資料設定等。

• SEO strategy for startups

此篇文章為讀者建立 SEO 基本觀念，包含 SEO 的重要性、評估指標、運作方式以及制定 SEO 策略的重點等。

• Guide to SEO features and tools

此篇文章彙整使用者可以透過 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 追蹤碼埋放：

1. 登入 Google Analytics，切換到網站欲連接的帳戶與資源。
   
2. 點擊左下角的齒輪圖示，切換到「管理」頁面。接著點擊以下路徑「資源設定 > 資料收集和修改 > 資料串流」，來到「資料串流頁面」。在資料串流頁面點擊要串流的網站，畫面會滑出「網頁串流詳情」，然後複製出現的「評估 ID」（Measurement ID）。評估 ID 應該會是一串以「G-」開頭的英數字。
   
3. 登入 Framer 後台，選擇要串流的網站。點擊右上角的齒輪圖示，進入設定頁面。在左側選單，點擊「Site Settings > General」，進入 Site Settings 頁面，往下拉到「Google Analytics」區塊，在「Google Analytics Measurement ID」欄位貼上評估 ID，按下 Save，接著按下 Publish。
   

以上，這樣就完成 GA4 追蹤碼埋放了！