w

範例

本節提供在不同內容類型與使用情境下使用 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" />

部落格文章

輸入

產生的 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" />

電商商品頁面

輸入

產生的 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" />

影片內容頁面

輸入

產生的 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"
/>

個人介紹頁面

輸入

產生的 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" />

新聞文章

輸入

產生的 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 頁面

輸入

產生的 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 帳號
  • 維持一致的品牌呈現
  • 針對行動裝置瀏覽進行最佳化

測試你的範例

在實作這些範例之後:

  1. 使用社群媒體除錯工具測試:
    • Facebook Sharing Debugger
    • Twitter Card Validator
    • LinkedIn Post Inspector
  2. 檢查行動裝置顯示:
    • 在不同裝置上測試
    • 驗證圖片縮放效果
    • 檢查文字可讀性
  3. 驗證 HTML:
    • 使用 W3C validator
    • 檢查是否正確轉義
    • 確認 meta 標籤放置位置
  4. 監控成效:
    • 追蹤點擊率
    • 監控互動指標
    • 針對不同版本進行 A/B 測試

自訂技巧

產業特定範例

  • E-commerce: 聚焦產品效益與價格
  • News: 強調時效性與可信度
  • Education: 突出學習成果與專業性
  • Entertainment: 使用更吸睛的視覺與描述

季節性變化

  • 在節慶期間更新圖片
  • 依季節調整描述內容
  • 針對不同時期調整行動呼籲
  • 面向國際受眾時考慮文化差異

這些範例展現了 Open Graph 中繼標籤生成器的靈活性與實用性。你可以將它們作為起點,再依照自己的需求與受眾進一步調整。

這個頁面對您有幫助嗎?