Open Graph 與 AI 搜尋：程式設計師的實作指南

你是不是常常在社群媒體上分享連結，然後發現預覽圖、標題、描述都亂七八糟？或是，你辛苦寫的文章，在 Facebook 上分享出去卻像個沒穿衣服的原始人？別擔心，這不是你的錯，很可能是你還沒跟 Open Graph (OG) 這個「社群媒體形象大使」打好關係！

Open Graph 協議，簡單來說，就是一套讓你的網頁內容在社群媒體上「穿上漂亮衣服」的標準。它透過在網頁的 HTML <head> 區塊中塞入一些特殊的 <meta> 標籤，告訴 Facebook、LinkedIn、Pinterest 這些社群平台，你的網頁標題是什麼、描述是什麼、要用哪張圖片當預覽圖等等。這樣一來，當你的連結被分享出去時，就能呈現出專業又吸睛的預覽卡片，大大提升點擊率！

你可能會想，這跟 AI 搜尋有什麼關係？AI 搜尋引擎現在越來越聰明，它們不只看關鍵字，更要「理解」你的內容。而 OG 標籤提供的這些結構化資訊，就像是給 AI 搜尋引擎的一份「內容摘要」，讓它們能更快、更準確地搞懂你的網頁在講什麼。雖然 OG 標籤不直接影響搜尋排名，但它能讓你的內容在社群媒體上被更多人看到、分享，進而增加網站流量，這對 AI 搜尋引擎來說，也可能是衡量內容相關性和權威性的一個重要信號喔！

AI 搜尋與 OG 標籤的潛在火花：

內容理解的加速器： OG 標籤就像是網頁的「身分證」，明確告訴 AI 你的網頁主題、目的。有了這些明確的信號，AI 就能更快速、準確地理解你的內容，省去大海撈針的麻煩。
知識圖譜的拼圖： 想像一下，AI 搜尋引擎正在建立一個巨大的「知識圖譜」，把全世界的資訊都串聯起來。OG 標籤就像是這張圖譜上的一塊塊拼圖，幫助 AI 把你的網頁內容和相關的實體、概念連結起來，讓資訊的呈現更完整、更智慧。
豐富搜尋結果的預告片： 未來的 AI 搜尋結果可能會越來越「視覺化」，就像電影預告片一樣，呈現更多豐富的內容片段。OG 標籤正是這些豐富片段的「素材庫」，讓你的內容在搜尋結果中脫穎而出。
使用者體驗的間接加分： 好的 OG 設定能讓你的內容在社群媒體上被瘋狂轉發、點讚，這不只帶來流量，也可能讓 AI 搜尋引擎覺得：「哇，這個網站的內容很受歡迎，應該是個好東西！」進而提升你的網站權威性。

總之，Open Graph 不再只是社群媒體的專利，它正悄悄地成為 AI 搜尋時代，你提升內容可見度的秘密武器！

程式設計師，你的 Open Graph 實作手冊來了！

身為一個程式設計師，你可能覺得：「這些行銷的東西，跟我有什麼關係？」別傻了！在這個內容為王的時代，讓你的程式碼產出的內容能見度更高，就是你的價值！實作 Open Graph 標籤一點都不難，就像是在你的 HTML 檔案裡多加幾行程式碼而已。來，跟著我一步一步來！

Open Graph 核心標籤大解密：

首先，你需要把這些 <meta> 標籤放在你的 HTML 檔案的 <head> 區塊裡。想像一下，這就像是給你的網頁內容貼上了一張「社群媒體專用名片」：

<head>
    <!-- 你的網頁標題，分享時會顯示這個 -->
    <meta property="og:title" content="Open Graph 與 AI 搜尋：程式設計師的實作指南" />

    <!-- 你的網頁描述，通常顯示在標題下方 -->
    <meta property="og:description" content="深入探討 Open Graph 協議在 AI 搜尋時代的重要性，並提供程式設計師實作 Open Graph 標籤的詳細指南與最佳實踐。" />

    <!-- 分享時顯示的圖片 URL，這張圖很重要，決定了吸睛度！ -->
    <meta property="og:image" content="https://example.com/images/OpenGraphAI.png" />

    <!-- 網頁的標準 URL，避免重複內容問題 -->
    <meta property="og:url" content="https://example.com/blog/open-graph-ai-search" />

    <!-- 內容的類型，例如文章、網站、影片等，幫助社群媒體理解內容 -->
    <meta property="og:type" content="article" />

    <!-- 你的網站名稱 -->
    <meta property="og:site_name" content="我的技術部落格" />

    <!-- 內容的語言和地區，例如繁體中文，台灣 -->
    <meta property="og:locale" content="zh_TW" />
</head>

這些標籤的意義，你一定要搞懂：

og:title: 這是你的網頁在社群媒體上分享時的「大標題」。想想看，一個好的標題是不是能吸引人點擊？所以，別亂寫！
og:description: 這是標題下方的「小簡介」。用簡潔有力的文字，告訴大家你的內容有多精彩！
og:image: 這絕對是重中之重！一張吸睛的圖片，勝過千言萬語。這張圖片會是分享時的預覽圖，所以務必精心挑選，而且要符合建議的尺寸和比例，才能在各種裝置上都美美的。
og:url: 這是你網頁的「標準網址」。確保它是唯一的，這樣社群媒體才知道要連結到哪裡，也能避免搜尋引擎誤判為重複內容。
og:type: 告訴社群媒體你的內容是什麼類型，例如 article (文章)、website (網站)、video.movie (電影) 等等。這有助於平台更好地分類和呈現你的內容。
og:site_name: 你的網站名稱，讓大家知道這個內容是從哪裡來的。
og:locale: 內容的語言和地區，例如 zh_TW 代表繁體中文（台灣）。這對於多語言網站來說特別重要。

進階實作，讓你的 OG 標籤更智慧！

對於一個有追求的程式設計師來說，手動寫這些標籤當然不是長久之計。特別是當你的網站內容爆炸式增長時，動態生成才是王道！

動態生成 OG 標籤：

如果你使用的是部落格系統、內容管理系統 (CMS) 或是任何需要動態產生頁面的網站，你絕對需要讓 OG 標籤自動生成。這通常會在後端程式碼中實現，例如使用 Python、PHP、Node.js 等語言，在伺服器端渲染 (SSR) 或預渲染 (Prerendering) 時，根據文章內容自動填入 OG 標籤的資訊。

Python (以 Flask 為例，Django 概念類似)：

想像一下，你寫了一個 Flask 應用程式來管理你的部落格文章。當使用者請求某篇文章時，你可以從資料庫中取出文章的標題、描述、圖片等資訊，然後動態地將這些資訊填入 HTML 模板中的 OG 標籤。

from flask import Flask, render_template

app = Flask(__name__)

# 假設這是你的文章資料庫，實際應用中會從資料庫查詢
articles_db = {
    'open-graph-ai-search': {
        'title': 'Open Graph 與 AI 搜尋：程式設計師的實作指南',
        'description': '深入探討 Open Graph 協議在 AI 搜尋時代的重要性，並提供程式設計師實作 Open Graph 標籤的詳細指南與最佳實踐。',
        'image': 'https://example.com/images/OpenGraphAI.png',
        'url': 'https://example.com/blog/open-graph-ai-search'
    },
    'another-article': {
        'title': '另一篇文章的標題',
        'description': '這是一篇關於其他技術的文章。',
        'image': 'https://example.com/images/another-article.png',
        'url': 'https://example.com/blog/another-article'
    }
}

@app.route('/blog/<slug>')
def show_article(slug):
    article_data = articles_db.get(slug)
    if not article_data:
        # 處理文章不存在的情況，例如返回 404 頁面
        return "文章不存在", 404
    return render_template('article_template.html', article=article_data)

if __name__ == '__main__':
    app.run(debug=True)

然後，在你的 article_template.html 模板檔案中，你可以這樣使用這些動態資料：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ article.title }}</title>

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="{{ article.title }}" />
    <meta property="og:description" content="{{ article.description }}" />
    <meta property="og:image" content="{{ article.image }}" />
    <meta property="og:url" content="{{ article.url }}" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="我的技術部落格" />
    <meta property="og:locale" content="zh_TW" />

    <!-- 其他 SEO meta 標籤 -->
    <meta name="description" content="{{ article.description }}">
    <meta name="keywords" content="Open Graph, AI 搜尋, SEO, 程式設計">
</head>
<body>
    <h1>{{ article.title }}</h1>
    <p>這篇文章的內容會在這裡顯示...</p>
</body>
</html>

這樣，每當你新增一篇文章，只要在資料庫中填入相關資訊，OG 標籤就會自動生成，省去了手動修改 HTML 的麻煩！

圖片最佳化：你的 OG 圖片就是你的門面！
og:image 絕對是所有 OG 標籤中最重要的一個！一張好的圖片，能讓你的內容在社群媒體的茫茫大海中脫穎而出。所以，請務必注意以下幾點：
- 尺寸要夠大： 建議圖片尺寸至少為 1200x630 像素。這樣才能確保在各種高解析度螢幕上顯示清晰，不會模糊不清。
- 比例要正確： 建議使用 1.91:1 的圖片比例。這是 Facebook 等社群媒體推薦的比例，能確保圖片在預覽時不會被裁切或變形。
- 檔案大小要適中： 圖片檔案太大會影響網頁載入速度，使用者體驗會很差。盡量壓縮圖片，保持檔案大小在合理範圍內。
- 內容要吸睛： 圖片應該具有吸引力，並且能準確反映文章內容。不要放一張跟內容完全不相關的圖片，那會讓使用者感到困惑。
測試工具：發布前務必檢查！
辛辛苦苦寫好的 OG 標籤，如果沒有正確運作，那一切都白費了！所以，在你的內容發布之前，務必使用社群媒體平台提供的調試工具來檢查 OG 標籤是否正確設置。這些工具就像是你的「OG 標籤醫生」，能幫你找出問題所在：
- Facebook Sharing Debugger: 最常用的工具之一，輸入你的網址，它會告訴你 Facebook 會如何抓取和顯示你的 OG 資訊，並指出任何錯誤。
- LinkedIn Post Inspector: 類似 Facebook 的工具，用於檢查 LinkedIn 上的分享預覽。
- Twitter Card Validator: Twitter 有自己的 twitter: 標籤，但如果沒有設置，它會回退到使用 OG 標籤。這個工具可以幫助你預覽 Twitter Card 的效果。
小撇步： 每次修改 OG 標籤後，記得在這些工具中重新抓取一次，才能看到最新的效果！
與 SEO 策略整合：OG 標籤的間接影響力！
雖然 OG 標籤不直接影響搜尋引擎的排名演算法，但它們對 SEO 卻有著間接但重要的影響。想想看，如果你的內容在社群媒體上被更多人分享、點擊，這會帶來什麼？
- 更多流量： 更多的分享意味著更多的曝光，進而帶來更多的網站流量。流量是 SEO 的重要指標之一。
- 提升品牌知名度： 當你的內容在社群媒體上廣泛傳播時，你的品牌知名度也會隨之提升。
- 增加網站權威性： 如果你的內容被大量分享和引用，搜尋引擎可能會認為你的網站具有更高的權威性，這對排名是有幫助的。
所以，別小看 OG 標籤，它可是你 SEO 策略中不可或缺的一環！
Hugo 靜態網站生成器：為你的部落格量身打造！
如果你跟我一樣，是 Hugo 的愛好者，那麼在 Hugo 網站中實作 OG 標籤簡直是小菜一碟！Hugo 提供了強大的模板功能，讓你可以輕鬆地在 layouts/_default/baseof.html 或 layouts/partials/head.html 中添加 OG 標籤的模板代碼。這樣，你只需要在每篇文章的 front matter 中設定好相關資訊，Hugo 就會自動幫你生成正確的 OG 標籤。
以下是一個 Hugo 模板的範例，你可以將其添加到你的 layouts/partials/head.html 檔案中：
```

<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ .Permalink }}" />

{{ with .Title }}
<meta property="og:title" content="{{ . }}" />
{{ else }}
<meta property="og:title" content="{{ .Site.Title }}" />
{{ end }}

{{ with .Description }}
<meta property="og:description" content="{{ . }}" />
{{ else }}
{{ with .Summary }}
<meta property="og:description" content="{{ . }}" />
{{ else }}
<meta property="og:description" content="{{ .Site.Params.description }}" />
{{ end }}
{{ end }}

{{ with .Params.image }}
<meta property="og:image" content="{{ .Permalink }}" />
{{ else }}
{{ with .Site.Params.defaultImage }}
<meta property="og:image" content="{{ .Permalink }}" />
{{ end }}
{{ end }}
```
這段程式碼的貼心設計：
- 它會優先使用你文章 front matter 中定義的 title、description 和 image。這表示你可以為每篇文章設定獨特的 OG 資訊。
- 如果文章 front matter 中沒有這些資訊，它會自動回退到使用文章的 Summary (摘要) 或網站配置 (.Site.Params) 中的預設值。這樣即使你忘記設定，也不會出現空白。
- {{ .Permalink }} 會自動生成文章的完整 URL，非常方便。
- {{ .Site.Title }} 和 {{ .Site.Params.description }} 則會抓取你 config.toml 或 config.yaml 中設定的網站標題和描述。
記得！ 你的 image 欄位應該是圖片的完整 URL，這樣社群媒體才能正確抓取到圖片。你可以將圖片放在 static/images/ 目錄下，然後在 front matter 中這樣引用：image: /images/your-image.png。

Open Graph 與 AI 搜尋的未來展望

隨著 AI 技術的飛速發展，搜尋引擎不再只是簡單地匹配關鍵字，它們正在努力理解內容的「意義」和「上下文」。這意味著，提供結構化、語義化的資料變得越來越重要。Open Graph 雖然最初是為社群媒體設計的，但它所提供的這些豐富元資料，恰好能成為 AI 搜尋引擎理解網頁內容的「養分」。

想像一下，未來的 AI 搜尋可能會直接從 OG 標籤中提取資訊，生成更精準、更豐富的搜尋結果摘要，甚至直接回答使用者的問題，而不需要使用者點擊進入網頁。這將會是「零點擊搜尋」的時代，而你的 OG 標籤，將會是決定你的內容能否在這些新興搜尋模式中脫穎而出的關鍵。

此外，AI 也可以協助我們更有效地管理和優化 OG 標籤。例如，AI 可以分析你的內容，自動推薦最佳的 og:title 和 og:description；甚至可以根據你的文章內容，自動生成吸睛的 og:image。這將大大減輕程式設計師和內容創作者的工作負擔，讓他們能更專注於內容本身的創作。

總結：Open Graph，你的網站內容的超級英雄！

Open Graph 協議，這個看似簡單的 HTML 標籤集合，卻是現代網頁不可或缺的一部分。它不僅能讓你的內容在社群媒體上光彩奪目，更能為未來的 AI 搜尋引擎提供豐富的語義資訊，提升你的內容在數位世界中的可見度。

對於程式設計師而言，掌握 Open Graph 的實作技巧，不僅是提升網站分享效果的必備技能，更是為你的網站內容在 AI 搜尋時代做好準備的關鍵一步。所以，別再猶豫了，現在就開始為你的網站內容「穿上」Open Graph 的超級英雄戰袍吧！讓你的內容在社群媒體和 AI 搜尋的世界裡，都能閃閃發光！

Open Graph、社群媒體與 AI 搜尋的關係圖

為了更直觀地理解 Open Graph、社群媒體分享以及 AI 搜尋之間的關係，我們可以透過 Mermaid 流程圖來呈現這個互動過程。這張圖將展示一個網頁內容如何透過 Open Graph 標籤，在社群媒體上被優化呈現，以及這些優化如何間接影響 AI 搜尋引擎對內容的理解和評估。

圖表說明：

網頁內容 (A)：這是所有資訊的源頭，你辛苦創作的文章、產品頁面等。
HTML <head> (B)：網頁的頭部區域，Open Graph 標籤就放置在這裡。
Open Graph Meta Tags (C)：透過這些標籤，你定義了內容在社群媒體上的呈現方式。
社群媒體平台 (D)：Facebook、LinkedIn、Twitter 等平台會讀取這些 OG 標籤。
社群分享卡片 (E)：根據 OG 標籤，社群媒體會生成美觀的預覽卡片，包含標題、描述和圖片。
更多社群流量與互動 (F)：吸睛的分享卡片會吸引更多使用者點擊和分享，帶來更多的社群流量和互動。
AI 搜尋引擎 (G)：AI 搜尋引擎會直接讀取 Open Graph 標籤提供的結構化資訊，幫助它們更好地理解內容。同時，社群媒體的流量和互動也會作為間接信號，影響 AI 搜尋引擎對內容相關性和權威性的評估。
AI 搜尋結果呈現 (H)：基於對內容的理解和評估，AI 搜尋引擎會以更精準、更豐富的方式呈現搜尋結果，提升你的內容在搜尋結果中的可見度。

這張圖清晰地展示了 Open Graph 如何作為一個橋樑，連接了你的網頁內容、社群媒體的傳播，以及 AI 搜尋引擎的理解，最終形成一個正向循環，共同提升你的內容在數位世界中的影響力。

各大社群平台 Open Graph 實際操作方式：搞定你的社群預覽！

雖然 Open Graph 標籤的基礎語法是通用的，但不同的社群平台在處理和顯示這些標籤時，還是會有一些自己的「小脾氣」。了解這些平台的特性，並善用它們提供的工具，能讓你事半功倍！

1. Facebook：社群分享的霸主

Facebook 是 Open Graph 協議的發起者，所以它對 OG 標籤的支援度是最好的。當你在 Facebook 上分享一個連結時，它會自動抓取網頁中的 OG 標籤來生成預覽卡片。如果你發現預覽不正確，或是想更新預覽，Facebook 提供了非常方便的工具：

Facebook Sharing Debugger (分享偵錯工具)：這是你檢查 Facebook OG 標籤的「必殺技」！
- 用途：輸入你的網頁 URL，它會顯示 Facebook 抓取到的所有 OG 資訊，包括標題、描述、圖片、URL 等。如果你的 OG 標籤有錯誤或遺漏，它也會明確指出。
- 更新快取：當你修改了網頁的 OG 標籤後，Facebook 不會立即更新其快取。你可以在 Debugger 工具中點擊「再次抓取 (Scrape Again)」按鈕，強制 Facebook 重新抓取你的網頁，這樣就能看到最新的預覽效果了。
- 重要提示：確保你的 og:image 圖片尺寸符合 Facebook 的建議（至少 1200x630 像素，比例 1.91:1），這樣才能在各種裝置上顯示最佳效果。

2. LinkedIn：專業人士的交流平台

LinkedIn 也是一個非常重視內容分享的平台，特別是對於專業文章、公司新聞等。它同樣會讀取網頁的 Open Graph 標籤來生成分享預覽。LinkedIn 的預覽通常會比 Facebook 簡潔一些，但同樣需要確保 OG 標籤的正確性。

LinkedIn Post Inspector (貼文檢查器)：這是 LinkedIn 提供的官方工具，功能類似 Facebook 的 Debugger。
- 用途：輸入你的網頁 URL，它會顯示 LinkedIn 將如何呈現你的分享內容，並指出任何潛在問題。
- 更新快取：與 Facebook 類似，如果你修改了 OG 標籤，也可以透過這個工具來清除 LinkedIn 的快取，讓它重新抓取你的網頁。
- 建議：LinkedIn 的預覽圖片尺寸建議與 Facebook 類似，以確保清晰度。對於專業內容，og:title 和 og:description 的撰寫要更精準、專業。

3. Twitter (X)：短小精悍的資訊流

Twitter (現在稱為 X) 雖然也有自己的卡片系統 (Twitter Cards)，但它會優先檢查網頁是否有 Twitter Card 相關的 meta 標籤（例如 twitter:card, twitter:site, twitter:title 等）。如果沒有找到 Twitter Card 標籤，它就會回退 (fallback) 到使用 Open Graph 標籤來生成預覽。

Twitter Card Validator (Twitter 卡片驗證器)：這是檢查 Twitter Card 和 Open Graph 標籤在 Twitter 上預覽效果的工具。
- 用途：輸入你的網頁 URL，它會顯示 Twitter 將如何呈現你的推文卡片。你可以選擇不同的卡片類型（例如 summary, summary_large_image, app, player）來預覽效果。
- 更新快取：同樣，這個工具也提供重新抓取的功能，以更新 Twitter 的快取。
- 最佳實踐：為了在 Twitter 上獲得最佳效果，建議同時設置 Twitter Card 標籤和 Open Graph 標籤。如果你的內容有大圖，使用 summary_large_image 類型的 Twitter Card 會更吸睛。

4. Pinterest：視覺為王的靈感板

Pinterest 是一個高度視覺化的平台，圖片在其中扮演著核心角色。當你將網頁內容保存到 Pinterest 時，它會盡可能地抓取網頁中的圖片作為 Pin 的預覽圖。雖然 Pinterest 會讀取 OG 標籤，但它對 og:image 的處理方式可能與其他平台略有不同。

Rich Pins Validator (豐富 Pin 驗證器)：Pinterest 提供了 Rich Pins 功能，可以讓你的 Pin 顯示更多來自網頁的資訊（例如文章標題、作者、食譜配料等）。這需要你額外設置一些 Schema.org 標記，並透過驗證器進行驗證。
- 用途：檢查你的網頁是否符合 Rich Pins 的要求，並預覽 Rich Pin 的效果。
- 建議：對於 Pinterest，除了 og:image 外，確保網頁中有多張高質量、垂直比例的圖片，因為 Pinterest 用戶更喜歡垂直圖片。同時，考慮實作 Rich Pins，讓你的內容在 Pinterest 上更具吸引力。

5. 其他社群平台與通訊軟體

除了上述主流平台，許多其他社群平台（如 Telegram, Line, WhatsApp 等通訊軟體）在分享連結時，也會嘗試讀取網頁的 Open Graph 標籤來生成預覽。雖然它們可能沒有提供專門的 Debugger 工具，但只要你的 OG 標籤設置正確，通常也能正常顯示。

總結來說，無論在哪個平台，以下幾點都是通用的最佳實踐：

完整且正確的 OG 標籤：確保所有核心的 OG 標籤（og:title, og:description, og:image, og:url, og:type）都已設置且內容正確。
高品質的 og:image：圖片是吸引點擊的關鍵，務必使用高解析度、符合比例、內容吸睛的圖片。
善用平台提供的 Debugger/Validator 工具：發布前務必使用這些工具進行測試，並在修改後強制更新快取。
保持內容與 OG 標籤的一致性：確保 OG 標籤的內容與網頁實際內容相符，避免誤導使用者。

透過這些實際操作方式，你就能更好地掌控你的內容在各大社群平台上的「第一印象」，讓你的分享更有效率，吸引更多潛在讀者！

Open Graph 標籤大全：Markdown 表格總整理

為了方便你查閱和使用，我將所有常用的 Open Graph 標籤整理成一個 Markdown 表格。你可以直接複製使用，或是作為你實作時的參考。

`property` 屬性	說明	範例
`og:title`	（必要）內容的標題，是分享時最重要的文字。	`<meta property="og:title" content="Open Graph 與 AI 搜尋：程式設計師的實作指南" />`
`og:type`	（必要）內容的類型，例如 `website`, `article`, `video.movie` 等。	`<meta property="og:type" content="article" />`
`og:image`	（必要）分享時顯示的圖片 URL。	`<meta property="og:image" content="https://example.com/images/OpenGraphAI.png" />`
`og:url`	（必要）網頁的標準 URL。	`<meta property="og:url" content="https://example.com/blog/open-graph-ai-search" />`
`og:description`	內容的簡短描述，通常顯示在標題下方。	`<meta property="og:description" content="深入探討 Open Graph 協議在 AI 搜尋時代的重要性..." />`
`og:site_name`	網站的名稱。	`<meta property="og:site_name" content="我的技術部落格" />`
`og:locale`	內容的語言和地區，格式為 `語言_地區`。	`<meta property="og:locale" content="zh_TW" />`
`og:locale:alternate`	其他可用的語言版本。	`<meta property="og:locale:alternate" content="en_US" />`
`og:image:url`	與 `og:image` 相同，提供更明確的圖片 URL。	`<meta property="og:image:url" content="https://example.com/images/OpenGraphAI.png" />`
`og:image:secure_url`	如果你的網站支援 HTTPS，建議提供安全的圖片 URL。	`<meta property="og:image:secure_url" content="https://example.com/images/OpenGraphAI.png" />`
`og:image:type`	圖片的 MIME 類型，例如 `image/jpeg` 或 `image/png`。	`<meta property="og:image:type" content="image/png" />`
`og:image:width`	圖片的寬度（像素）。	`<meta property="og:image:width" content="1200" />`
`og:image:height`	圖片的高度（像素）。	`<meta property="og:image:height" content="630" />`
`og:image:alt`	圖片的替代文字，用於無障礙閱讀。	`<meta property="og:image:alt" content="Open Graph 與 AI 搜尋的關係圖" />`
`og:video`	影片的 URL。	`<meta property="og:video" content="https://example.com/videos/og-video.mp4" />`
`og:video:secure_url`	影片的安全 URL。	`<meta property="og:video:secure_url" content="https://example.com/videos/og-video.mp4" />`
`og:video:type`	影片的 MIME 類型，例如 `video/mp4`。	`<meta property="og:video:type" content="video/mp4" />`
`og:video:width`	影片的寬度（像素）。	`<meta property="og:video:width" content="1280" />`
`og:video:height`	影片的高度（像素）。	`<meta property="og:video:height" content="720" />`
`og:audio`	音訊的 URL。	`<meta property="og:audio" content="https://example.com/audio/og-audio.mp3" />`
`og:audio:secure_url`	音訊的安全 URL。	`<meta property="og:audio:secure_url" content="https://example.com/audio/og-audio.mp3" />`
`og:audio:type`	音訊的 MIME 類型，例如 `audio/mpeg`。	`<meta property="og:audio:type" content="audio/mpeg" />`
`article:published_time`	文章的發布時間 (ISO 8601 格式)。	`<meta property="article:published_time" content="2025-08-21T10:30:00Z" />`
`article:modified_time`	文章的修改時間 (ISO 8601 格式)。	`<meta property="article:modified_time" content="2025-08-22T11:00:00Z" />`
`article:expiration_time`	文章的過期時間 (ISO 8601 格式)。	`<meta property="article:expiration_time" content="2026-08-21T10:30:00Z" />`
`article:author`	文章作者的個人資料 URL。	`<meta property="article:author" content="https://example.com/author/manus" />`
`article:section`	文章所屬的分類。	`<meta property="article:section" content="技術" />`
`article:tag`	文章的標籤。	`<meta property="article:tag" content="SEO" />`

表格使用說明：

必要標籤：og:title, og:type, og:image, og:url 是 Open Graph 協議中建議務必提供的四個核心標籤，它們是構成一個基本分享卡片的基礎。
圖片相關標籤：og:image 的相關標籤（width, height, type, alt）可以提供更詳細的圖片資訊，幫助社群平台更好地呈現圖片。
影片與音訊標籤：如果你的內容是影片或音訊，使用 og:video 或 og:audio 相關標籤可以讓分享時直接嵌入播放器。
文章相關標籤：對於文章類型的內容，article: 相關的標籤可以提供更豐富的資訊，例如發布時間、作者、分類等，這對於新聞網站或部落格特別有用。

希望這個表格能幫助你更輕鬆地掌握 Open Graph 標籤的實作！

Open Graph 與 AI 搜尋：程式設計師的實作指南

AI 搜尋與 OG 標籤的潛在火花：

程式設計師，你的 Open Graph 實作手冊來了！

Open Graph 核心標籤大解密：

進階實作，讓你的 OG 標籤更智慧！

Open Graph 與 AI 搜尋的未來展望

總結：Open Graph，你的網站內容的超級英雄！

Open Graph、社群媒體與 AI 搜尋的關係圖

各大社群平台 Open Graph 實際操作方式：搞定你的社群預覽！

1. Facebook：社群分享的霸主

2. LinkedIn：專業人士的交流平台

3. Twitter (X)：短小精悍的資訊流

4. Pinterest：視覺為王的靈感板

5. 其他社群平台與通訊軟體

Open Graph 標籤大全：Markdown 表格總整理

LATEST POST

TAG

CATEGORIES

Open Graph 與 AI 搜尋：程式設計師的實作指南

AI 搜尋與 OG 標籤的潛在火花：

程式設計師，你的 Open Graph 實作手冊來了！

Open Graph 核心標籤大解密：

進階實作，讓你的 OG 標籤更智慧！

Open Graph 與 AI 搜尋的未來展望

總結：Open Graph，你的網站內容的超級英雄！

Open Graph、社群媒體與 AI 搜尋的關係圖

各大社群平台 Open Graph 實際操作方式：搞定你的社群預覽！

1. Facebook：社群分享的霸主

2. LinkedIn：專業人士的交流平台

3. Twitter (X)：短小精悍的資訊流

4. Pinterest：視覺為王的靈感板

5. 其他社群平台與通訊軟體

Open Graph 標籤大全：Markdown 表格總整理

LATEST POST

TAG

CATEGORIES

訂閱我們的電子報