跳至主內容

什麼是Twitter Card?

image

定義​

Twitter Card是一個元資料系統,用於在Twitter(現已更名為X)上分享連結時提供豐富的媒體體驗。通常,在推文中包含URL只會顯示簡單的連結,但設定了Twitter Card後,會以包含圖片、標題和描述的視覺吸引力卡片格式顯示。

Twitter Card在HTML文件的<head>部分使用<meta name="twitter:xxx">格式的標籤實作。類似於開放圖譜(Open Graph),它提供Twitter平台特有的功能。Twitter支援四種主要卡片類型,各有不同的用途和版面配置:摘要卡(Summary Card)、帶大圖的摘要卡(Summary Card with Large Image)、應用程式卡(App Card)和播放器卡(Player Card)。

正確設定的Twitter Card可以顯著提高連結點擊率。研究顯示,帶圖片的推文比純文字推文的轉發率高達150%。Twitter Card已成為必不可少的行銷工具,特別是對新聞媒體、部落格和電商網站而言。如果沒有Twitter Card,您的連結很容易在時間軸中被忽略。

特點​

  • 多種卡片類型: 可根據內容類型在Summary、Summary with Large Image、App和Player中選擇合適的卡片。每種類型提供不同的版面配置和功能。
  • 高互動率: 帶Twitter Card的連結比普通連結的點擊率和轉發率高2-3倍。視覺元素吸引使用者注意力。
  • 與開放圖譜相容: 如果沒有Twitter Card標籤,Twitter會使用開放圖譜標籤作為備選。但為了獲得最佳效果,建議使用Twitter Card專用標籤。
  • 提供驗證工具: Twitter提供名為Card Validator的官方工具來預覽卡片的顯示方式。
  • 富媒體支援: Player Card允許在Twitter時間軸中直接播放影片和音訊,大大提升使用者體驗。

使用方法​

以下是有效實作和使用Twitter Card的方法。

步驟1: 選擇卡片類型 選擇與內容性質相符的Twitter Card類型。對於部落格文章或新聞文章,帶大圖的摘要卡最有效。大圖卡片也適合產品頁面或作品集。影片內容使用Player Card,行動應用程式推廣使用App Card。

步驟2: 新增基本Twitter Card標籤 在網頁的<head>部分新增Twitter Card元標籤。至少必須包含四個標籤:twitter:card、twitter:title、twitter:description和twitter:image。

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="部落格SEO完整指南">
  <meta name="twitter:description" content="提升搜尋排名的實戰SEO策略">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

步驟3: 包含附加資訊標籤 新增網站或作者的Twitter帳號會在卡片上顯示,有助於增加追蹤者。twitter:site是網站的Twitter帳號,twitter:creator是內容作者的帳號。

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@zhangsan">

步驟4: 圖片最佳化 Twitter Card圖片非常重要。摘要卡需要至少120x120px(1:1比例),帶大圖的摘要卡需要至少300x157px(2:1比例)。最佳尺寸為1200x628px,檔案大小必須低於5MB。支援JPG、PNG和WEBP格式。

步驟5: 使用Card Validator測試 在Twitter Card Validator(https://cards-dev.twitter.com/validator)中輸入URL以檢查卡片是否正確顯示。如有錯誤立即修正並重新測試。預覽顯示在實際Twitter上的外觀。

步驟6: 與開放圖譜一起使用 雖然Twitter優先使用Twitter Card標籤,但如果缺失會使用開放圖譜標籤。為了最佳化其他社群平台,也要實作開放圖譜。同時使用兩者是可以的,這是推薦的最佳實務。

範例​

範例1: 帶大圖的摘要卡(最常見)

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>反向連結建設策略指南</title>

  <!-- Twitter Card基本標籤 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@zhangsan">
  <meta name="twitter:title" content="反向連結建設策略: 達到第1頁排名">
  <meta name="twitter:description" content="透過真實案例學習有效的反向連結建設方法和應避免的錯誤。">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="反向連結建設策略資訊圖">

  <!-- 同時使用開放圖譜(用於其他平台) -->
  <meta property="og:title" content="反向連結建設策略: 達到第1頁排名">
  <meta property="og:description" content="透過真實案例學習有效的反向連結建設方法和應避免的錯誤。">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- 頁面內容 -->
</body>
</html>

範例2: 摘要卡(小圖)

<head>
  <!-- 適合小縮圖的內容 -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="今日SEO新聞摘要">
  <meta name="twitter:description" content="Google演算法更新、搜尋趨勢、業界新聞一覽">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="新聞網站標誌">
</head>

範例3: 播放器卡(影片內容)

<head>
  <!-- 直接播放影片的卡片 -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="部落格變現完整指南(15分鐘)">
  <meta name="twitter:description" content="用部落格每月賺3萬元。從AdSense到聯盟行銷">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

範例4: 應用程式卡(行動應用程式推廣)

<head>
  <!-- 行動應用程式下載推廣 -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="部落格管理器 - 一目瞭然查看部落格統計">
  <meta name="twitter:description" content="在手機上即時查看部落格表現">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- iOS應用程式資訊 -->
  <meta name="twitter:app:name:iphone" content="部落格管理器">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Android應用程式資訊 -->
  <meta name="twitter:app:name:googleplay" content="部落格管理器">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

範例5: 電商產品頁面

<head>
  <!-- 產品頁面最佳化 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="高級無線耳機XYZ-2000 - 50%特別折扣">
  <meta name="twitter:description" content="降噪、30小時播放。僅限今日NT$3,900 → NT$1,950">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="XYZ-2000無線耳機產品照片">

  <!-- 產品標籤(可選) -->
  <meta name="twitter:label1" content="價格">
  <meta name="twitter:data1" content="NT$1,950">
  <meta name="twitter:label2" content="庫存">
  <meta name="twitter:data2" content="數量有限">
</head>

範例6: 新聞文章

<head>
  <!-- 為新聞文章最佳化的卡片 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="2024年SEO趨勢: AI搜尋改變遊戲規則">
  <meta name="twitter:description" content="Google的SGE和Bing的AI聊天正在從根本上改變搜尋格局。SEO策略也必須演變。">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="AI搜尋引擎介面">

  <!-- 同時使用開放圖譜文章標籤 -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="記者金">
  <meta property="article:section" content="技術">
</head>

範例7: 活動/網路研討會推廣

<head>
  <!-- 活動推廣頁面 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="2024 SEO會議 | 9月15日COEX">
  <meta name="twitter:description" content="20位國內外SEO專家的實戰經驗。早鳥票50%折扣!">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="SEO會議2024主視覺">

  <!-- 用標籤強調關鍵資訊 -->
  <meta name="twitter:label1" content="日期">
  <meta name="twitter:data1" content="2024年9月15日">
  <meta name="twitter:label2" content="地點">
  <meta name="twitter:data2" content="COEX會展中心">
</head>

優缺點​

優點​

  • 點擊率大幅增加: 帶Twitter Card的連結比普通連結的點擊率高2-3倍。視覺吸引力的卡片在時間軸中吸引使用者注意力。

  • 品牌知名度提升: 用一致的圖片和訊息專業地表達品牌。Twitter帳號資訊顯示在卡片上,有助於增加追蹤者。

  • 富媒體體驗: Player Card允許在Twitter上直接播放影片,讓使用者無需造訪網站即可消費內容。這大大增加了互動。

缺點​

  • 需要額外工作: 除開放圖譜外還要新增單獨的Twitter Card標籤,增加了工作量。最佳化所有社群平台會產生許多元標籤。

  • 平台依賴性: Twitter Card僅在Twitter(X)上運作。其他平台需要開放圖譜或各自的專有標籤。

  • 圖片製作負擔: 有效的Twitter Card需要高品質圖片。為每個內容建立或選擇合適的圖片需要時間和資源。

常見問題​

問: 應該使用Twitter Card還是開放圖譜? 答: 最好兩者都使用。Twitter優先使用Twitter Card標籤,如果缺失則使用開放圖譜標籤作為備選。但開放圖譜也被Facebook、LinkedIn、KakaoTalk等平台使用,所以要同時實作兩者。Twitter Card標籤用於Twitter最佳化,而開放圖譜用於通用社群媒體最佳化。

問: 我的Twitter Card沒有顯示。為什麼? 答: 可能有幾個原因:1)元標籤語法錯誤 - 用Card Validator檢查。2)圖片尺寸問題 - 確認滿足最小尺寸要求。3)圖片存取被封鎖 - 確保robots.txt沒有封鎖圖片。4)HTTPS問題 - 儘可能使用HTTPS URL。5)快取問題 - 在Card Validator中重新抓取URL可能會解決。

問: 摘要卡和帶大圖的摘要卡有什麼區別? 答: 摘要卡是緊湊格式,在文字旁邊顯示小正方形縮圖(120x120px+)。主要適合標誌或圖示。帶大圖的摘要卡在卡片頂部突出顯示大長方形圖片(推薦1200x628px)。對於大多數情況,包括部落格文章、新聞文章和產品頁面,帶大圖的摘要卡更有效。它有更大的視覺衝擊力和更高的點擊率。

問: 我更改了Twitter Card但沒有反映更改。 答: Twitter會快取卡片資訊,因此更改可能不會立即反映。在Card Validator(https://cards-dev.twitter.com/validator)中輸入URL並點擊「Preview card」按鈕,用最新資訊重新抓取。已發推文連結上的卡片不會更新,因此重要更改應該用新推文分享。Twitter的快取通常會保留約7天。