範例
本節提供在不同內容類型與使用情境下使用 Open Graph 中繼標籤生成器的真實範例。
基本網站頁面
輸入
- 頁面類型: Website
- 標題: "Welcome to TechCorp - Leading Software Solutions"
- 描述: "TechCorp provides innovative software solutions for businesses of all sizes. Discover our cutting-edge technology and expert services."
- URL: "https://techcorp.com"
- 網站名稱: "TechCorp"
- 圖片: "https://techcorp.com/images/hero-image.jpg"
- 圖片 Alt: "TechCorp office building with modern technology"
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Welcome to TechCorp - Leading Software Solutions" />
<meta
property="og:description"
content="TechCorp provides innovative software solutions for businesses of all sizes. Discover our cutting-edge technology and expert services."
/>
<meta property="og:url" content="https://techcorp.com" />
<meta property="og:site_name" content="TechCorp" />
<meta property="og:image" content="https://techcorp.com/images/hero-image.jpg" />
<meta property="og:image:alt" content="TechCorp office building with modern technology" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Welcome to TechCorp - Leading Software Solutions" />
<meta
name="twitter:description"
content="TechCorp provides innovative software solutions for businesses of all sizes. Discover our cutting-edge technology and expert services."
/>
<meta name="twitter:image" content="https://techcorp.com/images/hero-image.jpg" />
部落格文章
輸入
- 頁面類型: Article
- 標題: "10 Essential JavaScript Tips for Beginners"
- 描述: "Master JavaScript with these 10 essential tips that every beginner should know. From variables to functions, learn the fundamentals."
- URL: "https://blog.techcorp.com/javascript-tips-beginners"
- 網站名稱: "TechCorp Blog"
- 圖片: "https://blog.techcorp.com/images/javascript-tips.jpg"
- 圖片 Alt: "JavaScript code on a computer screen"
- Twitter 創作者: "@johndoe"
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="10 Essential JavaScript Tips for Beginners" />
<meta
property="og:description"
content="Master JavaScript with these 10 essential tips that every beginner should know. From variables to functions, learn the fundamentals."
/>
<meta property="og:url" content="https://blog.techcorp.com/javascript-tips-beginners" />
<meta property="og:site_name" content="TechCorp Blog" />
<meta property="og:image" content="https://blog.techcorp.com/images/javascript-tips.jpg" />
<meta property="og:image:alt" content="JavaScript code on a computer screen" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@johndoe" />
<meta name="twitter:title" content="10 Essential JavaScript Tips for Beginners" />
<meta
name="twitter:description"
content="Master JavaScript with these 10 essential tips that every beginner should know. From variables to functions, learn the fundamentals."
/>
<meta name="twitter:image" content="https://blog.techcorp.com/images/javascript-tips.jpg" />
電商商品頁面
輸入
- 頁面類型: Website
- 標題: "Premium Wireless Headphones - Noise Cancelling"
- 描述: "Experience crystal-clear audio with our premium wireless headphones. Features active noise cancellation and 30-hour battery life."
- URL: "https://store.techcorp.com/products/wireless-headphones"
- 網站名稱: "TechCorp Store"
- 圖片: "https://store.techcorp.com/images/headphones-product.jpg"
- 圖片 Alt: "Premium wireless headphones in black"
- 圖片尺寸: 1200x630
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Premium Wireless Headphones - Noise Cancelling" />
<meta
property="og:description"
content="Experience crystal-clear audio with our premium wireless headphones. Features active noise cancellation and 30-hour battery life."
/>
<meta property="og:url" content="https://store.techcorp.com/products/wireless-headphones" />
<meta property="og:site_name" content="TechCorp Store" />
<meta property="og:image" content="https://store.techcorp.com/images/headphones-product.jpg" />
<meta property="og:image:alt" content="Premium wireless headphones in black" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Premium Wireless Headphones - Noise Cancelling" />
<meta
name="twitter:description"
content="Experience crystal-clear audio with our premium wireless headphones. Features active noise cancellation and 30-hour battery life."
/>
<meta name="twitter:image" content="https://store.techcorp.com/images/headphones-product.jpg" />
影片內容頁面
輸入
- 頁面類型: Video
- 標題: "How to Build a React App from Scratch"
- 描述: "Learn how to create a complete React application step by step. This comprehensive tutorial covers everything from setup to deployment."
- URL: "https://tutorials.techcorp.com/react-app-tutorial"
- 網站名稱: "TechCorp Tutorials"
- 圖片: "https://tutorials.techcorp.com/images/react-tutorial-thumbnail.jpg"
- 圖片 Alt: "React tutorial video thumbnail"
- Twitter Card 類型: Player
- Twitter 網站帳號: "@techcorp"
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="video" />
<meta property="og:title" content="How to Build a React App from Scratch" />
<meta
property="og:description"
content="Learn how to create a complete React application step by step. This comprehensive tutorial covers everything from setup to deployment."
/>
<meta property="og:url" content="https://tutorials.techcorp.com/react-app-tutorial" />
<meta property="og:site_name" content="TechCorp Tutorials" />
<meta
property="og:image"
content="https://tutorials.techcorp.com/images/react-tutorial-thumbnail.jpg"
/>
<meta property="og:image:alt" content="React tutorial video thumbnail" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@techcorp" />
<meta name="twitter:title" content="How to Build a React App from Scratch" />
<meta
name="twitter:description"
content="Learn how to create a complete React application step by step. This comprehensive tutorial covers everything from setup to deployment."
/>
<meta
name="twitter:image"
content="https://tutorials.techcorp.com/images/react-tutorial-thumbnail.jpg"
/>
個人介紹頁面
輸入
- 頁面類型: Profile
- 標題: "John Doe - Senior Software Engineer"
- 描述: "Experienced software engineer specializing in full-stack development. Passionate about creating innovative solutions and mentoring junior developers."
- URL: "https://profiles.techcorp.com/john-doe"
- 網站名稱: "TechCorp Profiles"
- 圖片: "https://profiles.techcorp.com/images/john-doe-profile.jpg"
- 圖片 Alt: "John Doe professional headshot"
- Twitter 創作者: "@johndoe"
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="profile" />
<meta property="og:title" content="John Doe - Senior Software Engineer" />
<meta
property="og:description"
content="Experienced software engineer specializing in full-stack development. Passionate about creating innovative solutions and mentoring junior developers."
/>
<meta property="og:url" content="https://profiles.techcorp.com/john-doe" />
<meta property="og:site_name" content="TechCorp Profiles" />
<meta property="og:image" content="https://profiles.techcorp.com/images/john-doe-profile.jpg" />
<meta property="og:image:alt" content="John Doe professional headshot" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@johndoe" />
<meta name="twitter:title" content="John Doe - Senior Software Engineer" />
<meta
name="twitter:description"
content="Experienced software engineer specializing in full-stack development. Passionate about creating innovative solutions and mentoring junior developers."
/>
<meta name="twitter:image" content="https://profiles.techcorp.com/images/john-doe-profile.jpg" />
新聞文章
輸入
- 頁面類型: Article
- 標題: "Breaking: New AI Technology Revolutionizes Healthcare"
- 描述: "Revolutionary AI technology promises to transform healthcare delivery. Early trials show 40% improvement in diagnostic accuracy."
- URL: "https://news.techcorp.com/ai-healthcare-revolution"
- 網站名稱: "TechCorp News"
- 圖片: "https://news.techcorp.com/images/ai-healthcare.jpg"
- 圖片 Alt: "AI technology in healthcare setting"
- Twitter 網站帳號: "@techcorpnews"
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Breaking: New AI Technology Revolutionizes Healthcare" />
<meta
property="og:description"
content="Revolutionary AI technology promises to transform healthcare delivery. Early trials show 40% improvement in diagnostic accuracy."
/>
<meta property="og:url" content="https://news.techcorp.com/ai-healthcare-revolution" />
<meta property="og:site_name" content="TechCorp News" />
<meta property="og:image" content="https://news.techcorp.com/images/ai-healthcare.jpg" />
<meta property="og:image:alt" content="AI technology in healthcare setting" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@techcorpnews" />
<meta name="twitter:title" content="Breaking: New AI Technology Revolutionizes Healthcare" />
<meta
name="twitter:description"
content="Revolutionary AI technology promises to transform healthcare delivery. Early trials show 40% improvement in diagnostic accuracy."
/>
<meta name="twitter:image" content="https://news.techcorp.com/images/ai-healthcare.jpg" />
行動 App 頁面
輸入
- 頁面類型: Website
- 標題: "TechCorp Mobile - Productivity on the Go"
- 描述: "Boost your productivity with TechCorp Mobile. Access all your tools and data from anywhere with our powerful mobile app."
- URL: "https://techcorp.com/mobile-app"
- 網站名稱: "TechCorp"
- 圖片: "https://techcorp.com/images/mobile-app-screenshot.jpg"
- 圖片 Alt: "TechCorp mobile app interface"
- Twitter Card 類型: App
產生的 Meta 標籤
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="TechCorp Mobile - Productivity on the Go" />
<meta
property="og:description"
content="Boost your productivity with TechCorp Mobile. Access all your tools and data from anywhere with our powerful mobile app."
/>
<meta property="og:url" content="https://techcorp.com/mobile-app" />
<meta property="og:site_name" content="TechCorp" />
<meta property="og:image" content="https://techcorp.com/images/mobile-app-screenshot.jpg" />
<meta property="og:image:alt" content="TechCorp mobile app interface" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="app" />
<meta name="twitter:title" content="TechCorp Mobile - Productivity on the Go" />
<meta
name="twitter:description"
content="Boost your productivity with TechCorp Mobile. Access all your tools and data from anywhere with our powerful mobile app."
/>
<meta name="twitter:image" content="https://techcorp.com/images/mobile-app-screenshot.jpg" />
從範例歸納的最佳實務
1. 標題最佳化
- 將標題控制在 60 個字元以內
- 納入相關關鍵字
- 讓標題夠吸引人且表意清楚
- 適當使用行動導向字詞
2. 描述撰寫
- 目標長度為 150-160 個字元
- 摘要說明核心價值或關鍵資訊
- 加入行動呼籲
- 保持吸引力與資訊量
3. 圖片選擇
- 使用高品質且相關的圖片
- 確保尺寸正確(1200x630px)
- 提供有意義的 Alt 文字
- 維持一致的品牌風格
4. URL 結構
- 使用簡潔且具描述性的 URL
- 納入相關關鍵字
- 長度保持適中
- 使用 HTTPS 協定
5. Twitter 整合
- 選擇合適的卡片類型
- 加入相關的 Twitter 帳號
- 維持一致的品牌呈現
- 針對行動裝置瀏覽進行最佳化
測試你的範例
在實作這些範例之後:
- 使用社群媒體除錯工具測試:
- Facebook Sharing Debugger
- Twitter Card Validator
- LinkedIn Post Inspector
- 檢查行動裝置顯示:
- 在不同裝置上測試
- 驗證圖片縮放效果
- 檢查文字可讀性
- 驗證 HTML:
- 使用 W3C validator
- 檢查是否正確轉義
- 確認 meta 標籤放置位置
- 監控成效:
- 追蹤點擊率
- 監控互動指標
- 針對不同版本進行 A/B 測試
自訂技巧
產業特定範例
- E-commerce: 聚焦產品效益與價格
- News: 強調時效性與可信度
- Education: 突出學習成果與專業性
- Entertainment: 使用更吸睛的視覺與描述
季節性變化
- 在節慶期間更新圖片
- 依季節調整描述內容
- 針對不同時期調整行動呼籲
- 面向國際受眾時考慮文化差異
這些範例展現了 Open Graph 中繼標籤生成器的靈活性與實用性。你可以將它們作為起點,再依照自己的需求與受眾進一步調整。