跳至主內容

什麼是開放圖譜(Open Graph)?

image

定義​

開放圖譜協議(Open Graph Protocol)是Facebook在2010年開發的元資料協議,用於控制網頁在社群媒體上分享時的顯示方式。簡單來說,它是HTML元標籤,預先定義了在Facebook、KakaoTalk、LinkedIn等平台上分享部落格連結時顯示的標題、描述和圖片。

使用開放圖譜,您可以將網頁轉換為社群媒體的「物件(Object)」。例如,當您分享部落格文章時,不僅僅顯示URL,還會顯示吸引人的縮圖以及標題和摘要描述,以精美的卡片格式呈現。這大大提高了點擊率,已成為社群媒體行銷的核心要素。

開放圖譜在<head>部分使用<meta property="og:xxx">格式的標籤實作。雖然始於Facebook,但現在已被包括Twitter(X)、LinkedIn、Slack、KakaoTalk和Line在內的大多數社群平台採用為標準。如果沒有開放圖譜,社群平台會隨意提取頁面內容,可能顯示意外的圖片或文字。

特點​

  • 社群媒體最佳化: 精確控制分享連結時的標題、描述和圖片,顯著提高點擊率。研究顯示,帶有開放圖譜圖片的連結可獲得高達200%的互動率。
  • 標準協議: 由Facebook開發,但現在是幾乎所有社群平台支援的事實行業標準。設定一次即可在多個平台上使用。
  • 簡單實作: 技術上不複雜,只需在HTML <head>部分新增元標籤。任何人都可以輕鬆應用,無需程式設計知識。
  • 提供除錯工具: Facebook、LinkedIn等提供官方除錯工具來測試和預覽開放圖譜標籤。
  • 對搜尋引擎有用: 開放圖譜資訊也被搜尋引擎引用,間接有助於SEO。特別對圖片搜尋最佳化有效。

使用方法​

以下是有效利用開放圖譜的方法。

步驟1: 新增必需的開放圖譜標籤 在網頁的<head>部分新增基本的開放圖譜標籤。至少必須包含四個標籤:og:title、og:type、og:url和og:image。這是開放圖譜的四個核心要素。

<head>
  <meta property="og:title" content="部落格SEO最佳化完整指南">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

步驟2: 新增可選標籤 新增描述、網站名稱、語言等資訊以提供更豐富的資訊。og:description特別重要,應包含鼓勵點擊的有吸引力的文字。

<meta property="og:description" content="即使初學者也能輕鬆跟隨的部落格SEO最佳化方法分步指南。">
<meta property="og:site_name" content="Zero-Coke部落格">
<meta property="og:locale" content="zh_TW">

步驟3: 圖片最佳化 開放圖譜中最重要的元素是圖片。縮圖決定第一印象,因此要仔細選擇。Facebook推薦1200x630px,最小600x314px。檔案大小保持在8MB以下。

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SEO最佳化指南縮圖">

步驟4: 內容類型特定的附加標籤 對於部落格文章(article),可以提供作者、發布日期、類別等附加資訊。這有助於在動態消息中顯示更豐富的資訊。

<meta property="article:author" content="張三">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="部落格">
<meta property="article:tag" content="SEO">

步驟5: 除錯和測試 新增標籤後一定要測試。在Facebook分享除錯器(https://developers.facebook.com/tools/debug/)中輸入URL,可以預覽開放圖譜的顯示方式。如有錯誤立即修正。

步驟6: 重新整理快取 如果更改了已分享URL的開放圖譜,需要重新整理社群平台的快取。在Facebook分享除錯器中點擊「重新抓取」按鈕可更新為最新資訊。各平台都提供類似的工具。

範例​

範例1: 部落格文章的基本開放圖譜

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>什麼是反向連結? SEO初學者指南</title>

  <!-- 基本開放圖譜標籤 -->
  <meta property="og:title" content="什麼是反向連結? SEO初學者完整指南">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="以初學者也能輕鬆理解的方式解釋反向連結的定義、重要性和獲取方法。">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="zh_TW">

  <!-- 文章相關附加標籤 -->
  <meta property="article:author" content="張三">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="反向連結">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="搜尋引擎最佳化">
</head>
<body>
  <!-- 頁面內容 -->
</body>
</html>

範例2: 包含圖片最佳化的開放圖譜

<head>
  <!-- 基本資訊 -->
  <meta property="og:title" content="2024年數位行銷趨勢">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- 詳細圖片資訊 -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="2024年數位行銷趨勢資訊圖">

  <!-- 多張圖片(平台選擇) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- 附加資訊 -->
  <meta property="og:description" content="分析2024年值得關注的數位行銷趨勢,包括AI、影響者行銷和短影音內容。">
  <meta property="og:site_name" content="行銷洞察">
</head>

範例3: 電商產品頁面

<head>
  <!-- 產品基本資訊 -->
  <meta property="og:title" content="高級無線藍牙耳機 - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="配備降噪功能的高品質無線耳機。最長可播放30小時。">

  <!-- 產品特定資訊 -->
  <meta property="product:price:amount" content="3900">
  <meta property="product:price:currency" content="TWD">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- 附加圖片 -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

範例4: 影片內容

<head>
  <!-- 影片基本資訊 -->
  <meta property="og:title" content="部落格變現完整指南(2024最新)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="用部落格每月賺3萬元。從AdSense到聯盟行銷和數位產品銷售的所有方法。">

  <!-- 影片特定資訊 -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- YouTube嵌入URL -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

範例5: 網站首頁

<head>
  <!-- 整體網站資訊 -->
  <meta property="og:title" content="Zero-Coke - 部落格SEO最佳化專業媒體">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="分享部落格SEO、搜尋引擎最佳化和網頁開發的專業知識。從初學者到專家的實用指南。">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="zh_TW">
  <meta property="og:locale:alternate" content="en_US">

  <!-- 社群媒體資料 -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

優缺點​

優點​

  • 點擊率大幅提升: 帶有吸引人縮圖和描述的連結比純文字連結的點擊率高2-3倍。這是增加社群媒體流量最有效的方法。

  • 品牌形象增強: 使用一致的開放圖譜圖片和描述可以建立專業可信的品牌形象。精心設計的縮圖能提高品牌知名度。

  • 通用性和相容性: 設定一次即可自動應用於包括Facebook、Twitter、LinkedIn、KakaoTalk和Slack在內的大多數平台。無需為每個平台單獨設定。

缺點​

  • 圖片製作負擔: 需要設計資源,因為每個頁面都需要製作合適的開放圖譜圖片。如果部落格文章很多,工作量會相當大。

  • 快取問題: 社群平台會快取開放圖譜資訊,因此更改不會立即反映。需要手動重新整理快取,已分享的連結可能無法更新。

  • 平台差異: 雖然大多數平台支援開放圖譜,但有些平台更喜歡自己的標籤。例如Twitter優先使用Twitter Card,因此要實現完美最佳化可能需要額外工作。

常見問題​

問: 沒有開放圖譜會怎樣? 答: 即使沒有開放圖譜標籤也可以分享連結,但社群平台會隨意提取頁面資訊。這可能導致顯示意外的圖片或文字,或者根本不顯示縮圖。這會大大降低點擊率。

問: 開放圖譜圖片的最佳尺寸是多少? 答: Facebook推薦1200x630px(寬高比1.91:1)。最小尺寸為600x314px;更小的尺寸會降低品質。同時提供正方形圖片(1200x1200px)可以在各種平台上更好地顯示。檔案大小應低於8MB,首選JPG或PNG格式。

問: og:title和HTML title標籤有什麼區別? 答: HTML <title>標籤是顯示在瀏覽器分頁和搜尋結果中的標題,而og:title是在社群媒體分享時顯示的標題。兩者可以相同,但在社群媒體上使用更短更有吸引力的標題可能更有效。例如:<title>是「什麼是反向連結? 定義、特點、獲取方法完整指南 | Zero-Coke」,而og:title是「如何用反向連結提升部落格排名」。

問: 我更改了開放圖譜但沒有更新。該怎麼辦? 答: 社群平台為了效能會快取開放圖譜資訊。在Facebook分享除錯器(https://developers.facebook.com/tools/debug/)中點擊「重新抓取」按鈕重新整理快取。LinkedIn使用Post Inspector(https://www.linkedin.com/post-inspector/),Twitter有Card Validator。已分享的貼文不會更新,因此重要更改可能需要重新分享。