w
文檔 核心工具 Open Graph Meta Generator

API 參考

本文檔提供 Open Graph 中繼標籤生成器的技術細節與其底層功能說明。

工具概覽

Open Graph 中繼標籤生成器是一款在用戶端執行的工具，用於產生適用於 Open Graph 與 Twitter Card 協定的 HTML meta 標籤。它會處理使用者輸入，並輸出格式正確的 HTML meta 標籤。

輸入參數

一般資訊

參數類型必填說明範例
pageTypestring是內容類型"website", "article", "book"
titlestring否頁面標題"My Awesome Website"
descriptionstring否頁面描述"A great website for developers"
urlstring否頁面 URL"https://example.com/page"
siteNamestring否網站名稱"My Company"

圖片設定

參數類型必填說明範例
imageUrlstring否圖片 URL"https://example.com/image.jpg"
imageAltstring否圖片 Alt 文字"Company logo"
imageWidthstring否圖片寬度（像素）"1200"
imageHeightstring否圖片高度（像素）"630"

Twitter 設定

參數類型必填說明範例
twitterCardTypestring是Twitter 卡片類型"summary_large_image"
twitterSitestring否網站 Twitter 帳號"@example"
twitterCreatorstring否作者 Twitter 帳號"@author"

輸出格式

此工具會產生如下格式的 HTML meta 標籤：

Open Graph 標籤

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter 標籤

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

內容類型

支援的頁面類型

類型說明使用情境
website一般網站頁面首頁、關於頁、聯絡頁
article部落格文章、新聞文章部落格文章、新聞文章、教學
book書籍頁面、電子書書籍列表頁、電子書頁面
profile個人或企業介紹頁使用者個人頁、公司頁面
music音樂曲目、專輯音樂串流、專輯頁面
video影片內容影片頁面、電影列表頁

Twitter Card 類型

類型說明最適合
summary含縮圖的基本卡片部落格文章、新聞文章
summary_large_image含大圖的卡片視覺內容、產品
app行動 App 推廣App Store 頁面
player影片/音訊內容影片頁面、Podcast

資料處理

HTML 轉義

所有使用者輸入都會自動轉義，以防止 XSS 攻擊：

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

URL 驗證

系統會驗證 URL，確保其格式正確：

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

內容長度限制

此工具會套用建議的長度限制：

  • 標題：最多 60 個字元
  • 描述：最多 160 個字元
  • URL：必須為有效的 URL 格式

瀏覽器相容性

支援的瀏覽器

瀏覽器版本支援情況
Chrome60+完整支援
Firefox55+完整支援
Safari12+完整支援
Edge79+完整支援

必要功能

  • ES6+ 支援
  • Clipboard API 支援
  • Local Storage 支援
  • CSS Grid 支援

效能考量

用戶端處理

  • 所有處理皆在瀏覽器中完成
  • 不需伺服器請求
  • 可即時產生並預覽
  • 記憶體占用極低

快取

  • 產生的 meta 標籤會快取於瀏覽器儲存空間中
  • 歷史記錄會儲存在本機
  • 無外部相依套件

錯誤處理

輸入驗證錯誤

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

圖片載入錯誤

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

整合範例

WordPress 整合

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

React 整合

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Next.js 整合

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

測試與驗證

社群媒體除錯工具

自動化測試

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

疑難排解

常見問題

  1. 圖片未顯示: 檢查 URL 格式與可存取性
  2. 標籤未生效: 使用社群媒體除錯工具驗證
  3. 內容被截斷: 檢查字元長度限制
  4. 快取問題: 使用除錯工具重新整理快取

除錯模式

啟用除錯模式以查看詳細資訊：

// Enable debug logging
localStorage.setItem("debug", "true");

後續增強

規劃中的功能

  • 支援 Schema.org 結構化資料
  • 支援多語系
  • 支援批次產生
  • 提供伺服器端產生的 API 端點
  • 提供進階圖片最佳化
  • 整合分析能力

貢獻方式

若你想為 Open Graph 中繼標籤生成器做出貢獻：

  1. Fork 儲存庫
  2. 建立功能分支
  3. 提交你的變更
  4. 加入測試
  5. 提交 pull request

支援

如需技術支援或有相關問題：

  • 查看 FAQ
  • 查看 Examples
  • 透過主網站聯絡支援團隊
這個頁面對您有幫助嗎？