正在準備工作環境...
Meta Tags 實戰
你有沒有注意過,在 Google 搜尋結果上,每個網頁都有一個藍色標題和一段灰色描述?那段文字不是 Google 自己寫的,而是你的網頁透過 Meta Tags 告訴 Google 的。如果你沒寫好,Google 就會自己亂截一段——通常不會是你想要的樣子。
Title Tag — 搜尋結果上的藍色標題
<title> 是搜尋結果中最顯眼的元素,也是 Google 排名的重要訊號之一。
Title 撰寫原則:
- 控制在 30~60 字元(超過會被截斷)
- 把最重要的關鍵字放前面
- 包含品牌名稱(通常放最後,用
|或-分隔) - 每頁的 title 都要不同
Meta Description — 搜尋結果的灰色描述
Description 撰寫原則:
- 控制在 70~155 字元
- 包含核心關鍵字(會被加粗顯示)
- 加入行動呼籲(限時優惠、免運費、立即選購)
- 每頁的 description 都要不同
OG Tags — 社群分享的門面
當你的商品頁被分享到 LINE、Facebook、Twitter 時,顯示的標題、描述、圖片是由 Open Graph (OG) Tags 控制的。
OG 圖片建議:
- 尺寸至少 1200 x 630 px
- 圖片上放商品主圖 + 價格或促銷標語
- 避免太多文字(Facebook 會降低觸及)
Canonical Tag — 告訴 Google「正版在這裡」
電商網站常常一個商品有多個網址(不同顏色、不同排序參數),canonical 告訴 Google 哪個才是「正版」。
為什麼 Canonical 重要?
- 避免重複內容(Duplicate Content)稀釋排名
- 常見情境:
?color=red、?sort=price、?page=2這些參數產生的不同網址
完整的電商商品頁 Head
把上面學到的全部組合起來:
AI 協作:學了這個,跟 AI 怎麼配合?
Meta Tags 的格式是固定的,但內容需要你的行銷腦。AI 幫你快速產出模板,你來調整關鍵字和文案。
你的人類優勢:
- 你知道目標客群會搜什麼關鍵字
- 你能判斷 description 的文案是否吸引人點擊
- 你知道 OG 圖片該用什麼素材
可以這樣跟 AI 說:
幫我為這個電商商品頁寫完整的 meta tags(title、description、OG tags、canonical)。商品是「有機棉嬰兒連身衣」,售價 $590,賣點是透氣舒適、台灣製造、滿 $1000 免運。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
DEMO 4可以修改程式碼試玩
DEMO 5可以修改程式碼試玩
挑戰任務
Task 1
為一個賣「手工皮革錢包」的商品頁寫 title tag,包含商品名稱、賣點和品牌名。控制在 60 字元以內
Task 2
為同一個商品頁寫 meta description,包含材質特色、價格和促銷訊息
Task 3
為這個商品頁寫完整的 OG tags(og:title、og:description、og:image、og:url),讓它在 LINE 分享時顯示正確
← BackNext Lesson →