基礎用法指南
本指南會帶你逐步了解如何使用我們的工具產生 Open Graph 中繼標籤。
第 1 步：進入工具
從主工具頁面進入 Open Graph 中繼標籤產生器，或直接輸入對應 URL 開啟。
第 2 步：填寫一般資訊
頁面類型
為你的頁面選擇合適的內容類型：
- Website：一般網站頁面
- Article：部落格文章、新聞報導、教學
- Book：書籍頁面、電子書
- Profile：個人或企業檔案頁面
- Music：音樂曲目、專輯、播放清單
- Video：影片內容、電影、電視節目
標題
為頁面輸入一個有吸引力的標題：
- 為了獲得最佳顯示效果，建議控制在 60 個字元以內
- 標題要清楚且具吸引力
- 自然加入相關關鍵字
描述
為內容撰寫清楚的描述：
- 建議長度為 150 到 160 個字元
- 概括使用者將在頁面中看到的內容
- 文案要夠吸引人，以提高點擊意願
頁面 URL
輸入頁面的完整 URL：
- 使用絕對 URL（包含 https://）
- 確保該 URL 可以被存取
- 盡量使用乾淨且具描述性的 URL
網站名稱
填寫你的網站或品牌名稱：
- 此名稱會顯示在社群媒體貼文中
- 在所有頁面中保持一致
- 使用正式品牌名稱
第 3 步：設定圖片
圖片 URL
提供社群分享圖片的 URL：
- 使用絕對 URL（包含 https://）
- 確保圖片可公開存取
- 建議尺寸：1200x630 像素
圖片 Alt 文字
為無障礙需求加入描述性的 Alt 文字：
- 描述圖片中的內容
- 保持精簡，但要足夠清楚
- 對螢幕閱讀器使用者尤其重要
圖片尺寸
填寫圖片的寬度與高度：
- 寬度：通常為 1200 像素
- 高度：通常為 630 像素
- 這些資訊可協助社群平台優化顯示效果
第 4 步：設定 Twitter 選項
卡片類型
選擇合適的 Twitter Card 類型：
- Summary：含標題、描述與縮圖的基本卡片
- Summary with Large Image：帶大圖的加強版卡片
- App：用於行動應用程式推廣
- Player：用於影片或音訊內容
網站帳號
輸入你網站的 Twitter 帳號：
- 格式：@yourhandle
- 這會顯示在 Twitter 貼文中
- 可選填，但建議設定
創作者帳號
輸入內容創作者的 Twitter 帳號：
- 格式：@authorhandle
- 對文章與部落格內容特別實用
- 可選填
第 5 步：產生並複製中繼標籤
填寫完所有資訊後：
- 中繼標籤會即時自動產生
- 在輸出區查看產生的 HTML
- 點擊「複製中繼標籤」按鈕，將內容複製到剪貼簿
- 預覽區會顯示內容在社群媒體上的呈現方式
第 6 步：整合到網站中
將複製好的中繼標籤加入網站 HTML 的 <head> 區塊：
<head>
<!-- Your existing head content -->
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Page Title" />
<!-- ... other meta tags ... -->
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<!-- ... other Twitter meta tags ... -->
</head>
快速提示
若要獲得最佳效果：
- 一律使用高品質且與內容相關的圖片
- 使用社群媒體除錯工具測試中繼標籤
- 將標題與描述控制在建議字數內
- 在所有頁面維持一致的品牌風格
需要避免的常見錯誤：
- 使用相對 URL，而不是絕對 URL
- 忘記填寫圖片 Alt 文字
- 使用尺寸過小或過大的圖片
- 沒有在不同平台測試標籤呈現效果
測試你的中繼標籤
完成部署後，可以使用以下工具測試中繼標籤：
- Facebook Sharing Debugger：developers.facebook.com/tools/debug
- Twitter Card Validator：cards-dev.twitter.com/validator
- LinkedIn Post Inspector：linkedin.com/post-inspector
這些工具會顯示你的內容在分享時的實際呈現方式，並幫助你找出潛在問題。
下一步
現在你已掌握基礎用法，可以繼續閱讀 高級功能 指南，了解更多進階選項與自訂能力。