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

更新於 發佈於 閱讀時間約 7 分鐘

最近承接的網站 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 追蹤碼埋放:

  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 追蹤碼埋放了!

avatar-img
7會員
14內容數
喜歡日劇、繪本和文化體驗的 MAIA 出發了!2023 年秋季,台灣女子一人獨遊日本東京的遊記部落格。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
MAIA的沙龍 的其他內容
東京自由行出發之前,並不特別熱衷於高樓夜景的我,並未把 SHIBUYA SKY ( 澀谷SKY )納入必訪景點。後來實際參觀的感想,雖然不巧遇雨沒有開放頂樓,但是望出去的東京風景還是很不錯。這篇文章除了 SHIBUYA SKY 遊記,也將分享網路購買門票的省錢攻略,以及個人推薦的鄰近澀谷景點和美食。
澀谷景點除了逛街購物,或者從 SHIBUYA SKY 瞭望繁華美景之外,這裡其實還藏了一座厲害的美術館!在出發前往東京自由行之前,偶然發現了位於澀谷和惠比壽之間、專門展示日本畫的「山種美術館」。如果你是繪畫或者日本傳統文化的藝文愛好者,很推薦納入東京行程當中,細細品味日本畫的美麗。
美好的假日,拿不定主意要去山上還是去海邊?既然如此,何不兩個都要!位在新北市瑞芳區的鼻頭角步道,三面環海,一路上既能享受綠意,又能欣賞遼闊的大海景色。鼻頭角步道原本就算是輕鬆的健行路線,再加上療癒的美景,疲憊一掃而空。下了山品嚐海鮮,再到鼻頭角公園戲水或是咖啡店坐坐,享受放鬆愉悅的東北角一日遊行程
PIGMENT TOKYO 是一間美術畫具專賣店。店內有一大面色彩繽紛的色粉牆,使其成為東京知名景點。這裡每週舉辦工作坊,增進知識之外,還能親手製作顏料,非常有趣!這一趟日本自由行,我在 PIGMENT TOKYO 度過愉快的午後。本篇遊記將分享 workshop 體驗心得,提供給藝文愛好者參考。
今年的日本自由行有三大心願:能劇、落語、2.5次元舞台劇/2.5次元音樂劇。實際走入位在東京品川區的天王洲銀河劇場觀賞之後,只能說真是太過癮了!一躍而成我在東京最好玩的一天。本文將分享此行觀賞2.5次元舞台劇的事前準備(包含蒐集節目資訊的管道、如何訂票)和體驗心得,若你是舞台劇愛好者,向你強力推薦!
規畫 台中旅遊 行程的時候,發現近年來 台中藝文活動 發展真是蓬勃!隨便一查,地圖上就密密麻麻佈滿了 展覽 、 獨立書店 、 選物 、 古蹟 、 美術館 、 咖啡廳 等地標。從琳琅滿目的景點當中,本文精選6個 台中文青景點 並串連成一條散步路線。如果你也喜歡 設計 小物或是 藝文活動 ,千萬別錯過!
東京自由行出發之前,並不特別熱衷於高樓夜景的我,並未把 SHIBUYA SKY ( 澀谷SKY )納入必訪景點。後來實際參觀的感想,雖然不巧遇雨沒有開放頂樓,但是望出去的東京風景還是很不錯。這篇文章除了 SHIBUYA SKY 遊記,也將分享網路購買門票的省錢攻略,以及個人推薦的鄰近澀谷景點和美食。
澀谷景點除了逛街購物,或者從 SHIBUYA SKY 瞭望繁華美景之外,這裡其實還藏了一座厲害的美術館!在出發前往東京自由行之前,偶然發現了位於澀谷和惠比壽之間、專門展示日本畫的「山種美術館」。如果你是繪畫或者日本傳統文化的藝文愛好者,很推薦納入東京行程當中,細細品味日本畫的美麗。
美好的假日,拿不定主意要去山上還是去海邊?既然如此,何不兩個都要!位在新北市瑞芳區的鼻頭角步道,三面環海,一路上既能享受綠意,又能欣賞遼闊的大海景色。鼻頭角步道原本就算是輕鬆的健行路線,再加上療癒的美景,疲憊一掃而空。下了山品嚐海鮮,再到鼻頭角公園戲水或是咖啡店坐坐,享受放鬆愉悅的東北角一日遊行程
PIGMENT TOKYO 是一間美術畫具專賣店。店內有一大面色彩繽紛的色粉牆,使其成為東京知名景點。這裡每週舉辦工作坊,增進知識之外,還能親手製作顏料,非常有趣!這一趟日本自由行,我在 PIGMENT TOKYO 度過愉快的午後。本篇遊記將分享 workshop 體驗心得,提供給藝文愛好者參考。
今年的日本自由行有三大心願:能劇、落語、2.5次元舞台劇/2.5次元音樂劇。實際走入位在東京品川區的天王洲銀河劇場觀賞之後,只能說真是太過癮了!一躍而成我在東京最好玩的一天。本文將分享此行觀賞2.5次元舞台劇的事前準備(包含蒐集節目資訊的管道、如何訂票)和體驗心得,若你是舞台劇愛好者,向你強力推薦!
規畫 台中旅遊 行程的時候,發現近年來 台中藝文活動 發展真是蓬勃!隨便一查,地圖上就密密麻麻佈滿了 展覽 、 獨立書店 、 選物 、 古蹟 、 美術館 、 咖啡廳 等地標。從琳琅滿目的景點當中,本文精選6個 台中文青景點 並串連成一條散步路線。如果你也喜歡 設計 小物或是 藝文活動 ,千萬別錯過!
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
免費SEO優化電子書, 省下5000元, 一萬七千多字完全免費送! SEO優化電子書目錄 【SEO基礎知識】 什麼是SEO? SEO搜尋引擎的運作原理 【關鍵字研究】 SEO關鍵字研究的方法有哪些? SEO關鍵字分析工具 在進行關鍵字研究時,使用一些專門的關鍵字分析工具可以幫
在當今以 SEO 搜尋引擎優化為主導的數位行銷時代中,有效地進行關鍵字管理和佈局已成為網站操作人員不可少的策略之一,若有適合的關鍵字規劃工具作為輔助,一定能夠為網站排名帶來相當大的幫助。本文將除了說明 SEO 對網站的重要性,也將介紹 6 款常用的 SEO 工具,幫助大家在關鍵字規劃上事半功倍!
Thumbnail
本文章介紹了搜尋引擎優化 (SEO) 策略,包括關鍵字策略、內容品質、行動相容性、頁面載入速度等。此外,也談及內容行銷、社群媒體互動、電子郵件行銷、付費廣告、影響者合作 (Influencer Partnership) 及使用者體驗 (UX) 優化。提供了優化網站流量的建議。
Thumbnail
產出一篇 SEO 文章時應該要注意什麼?如何下筆? 此篇文章以我過去的經驗,分享有關 SEO 文章內容產出的架構與邏輯。
Thumbnail
在現今數位時代,學習編寫引人入勝的META描述標籤成為網站優化的重要一環。透過SEO(搜尋引擎優化)技術,提升網站在搜尋引擎中的排名,而META描述標籤則是影響點擊率的關鍵元素。以下是有關如何編寫META描述標籤的一些建議。 首先,了解SEO的基礎原理是必要的。SEO公司和Google SEO教學
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
免費SEO優化電子書, 省下5000元, 一萬七千多字完全免費送! SEO優化電子書目錄 【SEO基礎知識】 什麼是SEO? SEO搜尋引擎的運作原理 【關鍵字研究】 SEO關鍵字研究的方法有哪些? SEO關鍵字分析工具 在進行關鍵字研究時,使用一些專門的關鍵字分析工具可以幫
在當今以 SEO 搜尋引擎優化為主導的數位行銷時代中,有效地進行關鍵字管理和佈局已成為網站操作人員不可少的策略之一,若有適合的關鍵字規劃工具作為輔助,一定能夠為網站排名帶來相當大的幫助。本文將除了說明 SEO 對網站的重要性,也將介紹 6 款常用的 SEO 工具,幫助大家在關鍵字規劃上事半功倍!
Thumbnail
本文章介紹了搜尋引擎優化 (SEO) 策略,包括關鍵字策略、內容品質、行動相容性、頁面載入速度等。此外,也談及內容行銷、社群媒體互動、電子郵件行銷、付費廣告、影響者合作 (Influencer Partnership) 及使用者體驗 (UX) 優化。提供了優化網站流量的建議。
Thumbnail
產出一篇 SEO 文章時應該要注意什麼?如何下筆? 此篇文章以我過去的經驗,分享有關 SEO 文章內容產出的架構與邏輯。
Thumbnail
在現今數位時代,學習編寫引人入勝的META描述標籤成為網站優化的重要一環。透過SEO(搜尋引擎優化)技術,提升網站在搜尋引擎中的排名,而META描述標籤則是影響點擊率的關鍵元素。以下是有關如何編寫META描述標籤的一些建議。 首先,了解SEO的基礎原理是必要的。SEO公司和Google SEO教學