進階功能

<!-- Custom properties -->
<meta property="og:locale" content="en_US" />
<meta property="og:updated_time" content="2024-01-15T10:00:00Z" />
<meta property="article:author" content="John Doe" />
<meta property="article:published_time" content="2024-01-15T09:00:00Z" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="web development" />

結構化資料整合

將 Open Graph 標籤與結構化資料結合，以提升 SEO：

<!-- Open Graph tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Advanced Web Development" />

<!-- Structured data -->
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Advanced Web Development",
    "author": {
      "@type": "Person",
      "name": "John Doe"
    }
  }
</script>

多語系支援

依語系設定標籤

針對國際化網站，可使用 locale 相關標籤：

<!-- English version -->
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="Welcome to Our Site" />

<!-- Spanish version -->
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:title" content="Bienvenido a Nuestro Sitio" />

為不同語言使用不同 URL

/en/page 用於英文
/es/page 用於西班牙文
/fr/page 用於法文

效能最佳化

圖片載入

使用 CDN 加速圖片傳遞
對非關鍵圖片採用 lazy loading
最佳化圖片檔案大小
選擇合適的圖片格式

元標籤放置

將元標籤放在 <head> 區塊
盡量靠前，以便更快解析
避免重複或衝突的標籤

分析與追蹤

社群媒體分析

追蹤 Open Graph 元標籤的實際表現：

監測社群平台的點擊率
分析哪些內容表現最好
針對圖片與描述進行 A/B 測試

UTM 參數

在連結加入 UTM 參數以追蹤社群流量：

https://yoursite.com/page?utm_source=facebook&utm_medium=social&utm_campaign=article_share

疑難排解常見問題

圖片無法顯示

常見原因與解法：

URL 格式錯誤: 使用 https:// 的絕對 URL
圖片太小: 至少 600x315 像素
檔案過大: 控制在 8MB 以內
存取權限問題: 確保圖片可公開存取

標題與描述被截斷

標題太長: 控制在 60 個字元以內
描述太長: 控制在 160 個字元以內
特殊字元: 避免在元標籤中使用 HTML 實體

平台特定問題

Facebook: 使用其除錯工具刷新快取
Twitter: 使用其驗證工具檢查卡片
LinkedIn: 使用其 Post Inspector 檢查

不同行業最佳實務

電商

使用高品質產品圖片
在描述中加入價格資訊
強調關鍵功能與效益
維持一致的品牌風格

新聞與媒體

使用吸引人的標題
加入發布日期
使用相關新聞圖片
補充作者資訊

科技

使用清楚、偏技術的描述
可在圖片中加入程式碼或技術元素
強調關鍵特性
使用專業風格圖像

個人品牌

使用專業頭像
強調個人成就
維持一致的訊息與定位
展現專業能力

自動化與整合

CMS 整合

許多 CMS 都支援 Open Graph：

WordPress: 使用 Yoast SEO 等外掛
Drupal: 使用 Metatag 模組
Joomla: 使用 Open Graph 擴充套件

API 整合

針對動態內容，可考慮：

伺服器端生成
範本化系統
以資料庫管理元標籤

下一步

了解進階功能後，可前往範例章節，查看實際情境的做法與用例。

這個頁面對您有幫助嗎？

On this page

內容類型最佳化圖片最佳化策略 Twitter Card 最佳化進階元標籤自訂多語系支援效能最佳化分析與追蹤疑難排解常見問題不同行業最佳實務自動化與整合下一步