跳到主要內容
Cypher's Practical Coding
正在準備工作環境...

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 →