← Blog

Open Graph是什麼？完整的初學者指南

您在社交媒體上分享連結。預覽看起來很糟。這就是原因 - 以及 Open Graph 標籤如何修復它。

想看看您的連結實際上是什麼樣子嗎？

快速解答

  • Open Graph 是一組 HTML 元標記，用於控制連結在社群媒體上的外觀
  • 核心標籤：og:title、og:description、og:image、10og:image、⦦9⟧10og:image1⦧
  • 沒有 OG 標籤，平台就會猜測——而且他們猜得很糟糕
  • 設定OG標籤+Twitter Card標籤實現全覆蓋

Open Graph實際上是什麼

Open Graph是Facebook在2010年發明​​的協定。在Open Graph之前，當有人在Facebook上分享連結時，預覽是不可預測的。 Facebook 會抓取頁面尋找圖像和文本，結果通常是隨機的——有時是一個很小的圖標，有時是頁面上的隨機照片，有時什麼都沒有。

Facebook 说：“让我们给站长一个标准的方式来告诉我们要展示什么。”他们引入了一组元标记，任何网站都可以将其添加到其 HTML 中。其他平台 - X、LinkedIn、Slack、Discord、WhatsApp、Reddit - 採用了相同的標準。如今，Open Graph 是網路上連結預覽的通用語言。

這不是您安裝的技術。它只是頁面 部分中的 HTML 元標記。就是這樣。

核心Open Graph標籤

在社群媒體上分享的每個頁面都應至少有以下四個標籤：

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

以下是每個人所做的事情：

还有其他可选标签，例如 og:type（通常是“网站”或“文章”）、og:site_name（您的品牌名称）和 og:locale（语言）。但以上四個是對於連結預覽最重要的。

Open Graph 的工作原理 — 一步一步

當有人共享連結時會發生以下情況：

  1. 有人將 URL 貼到 X、LinkedIn、Slack、Discord 或任何地方。
  2. 平台的機器人取得URL並從上到下讀取HTML。
  3. 它在部分查找og:tags。
  4. 它使用og:title、og:description和og:image值來建立預覽卡。
  5. 該卡片會顯示給看到共享連結的任何人。

如果平台找不到 og: 標籤，它就會退回到自己的啟發式方法 - 選擇隨機圖像，使用 </code> 標籤等。這種後備行為就是為什麼這麼多共享連結看起來很糟糕。</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph 與 Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter 在 Open Graph 出現之前創建了自己的標籤系統，稱為「Twitter Cards」。 Twitter Cards 使用 <code>twitter:card</code>、<code>twitter:title</code>、<code>twitter:description</code> 和 ⟦9<code>twitter:description⦦8⟧ 和 ⟦9<code>⦧⧟11⧟屬性代替<code>og:</code> 前綴。</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>如今，大多數平台都支援這兩種方式。但 X/Twitter 仍然更喜歡 <code>twitter:card</code> 標籤而不是 OG 標籤。這就是為什麼最佳實踐是設定 <strong>both</strong>：</p> <pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) --> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" /> <!-- Twitter/X (works on X/Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">為什麼這對您的網站很重要</h2> <p data-i18n="b.what-is-open-graph.35">如果您在社交媒體上的任何地方分享您的內容（如果您有網站，您可能會這樣做），您的連結預覽就是您的第一印象。精心設計的預覽，具有清晰的標題、引人注目的描述和良好的圖像，可顯著提高點擊率。</p> <p data-i18n="b.what-is-open-graph.36">損壞的預覽（圖像遺失、標題被截斷或描述混亂）會讓您的內容看起來不專業。人們滾動過去。</p> <p data-i18n="b.what-is-open-graph.37">Open Graph標籤是兩者的區別。它們需要 5 分鐘的時間來設置，並且會對您的內容在社交媒體上的表現產生不成比例的影響。</p> <h2 data-i18n="b.what-is-open-graph.38">快速清單</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>在每個頁面上加入<code>og:title</code>、<code>og:description</code>、<code>og:image</code>和<code>10og:image</code>和<code>10og:image</code>和<code>10og:image11⟧</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>加入 <code>twitter:card</code> 和 <code>twitter:image</code> 以實現 X/Twitter 相容性</li> <li data-i18n="b.what-is-open-graph.41">將影像尺寸設定為1200×630像素</li> <li data-i18n="b.what-is-open-graph.42">對所有圖像路徑使用絕對 URL（https://...)）</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>使用 <a href="https://proovd.in/zh-hant/">Proovd</a> 進行測試，看看您的頁面在所有平台上的外觀</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">常見問題解答</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">如果我不在社群媒體上分享，是否需要 Open Graph 標籤？</h3> <p data-i18n="b.what-is-open-graph.46">如果您不在任何地方共享鏈接，則不需要它們。但如果您有一個網站並在社交媒體上分享一次，那麼 OG 標籤就必不可少。</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Open Graph標籤會影響Google排名嗎？</h3> <p data-i18n="b.what-is-open-graph.48">不直接。 Google 不使用 OG 標籤作為排名因素。但它們會影響搜尋結果和社交分享的點擊率，間接影響流量和可見度。</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">我可以為不同的頁面設定不同的OG標籤嗎？</h3> <p data-i18n="b.what-is-open-graph.50">是的。每個頁面都應該有與其內容相符的自己的 OG 標籤。關於狗的部落格文章應該具有與關於貓的頁面不同的 og:title 和 og:image。</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">相關文章</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/zh-hant/blog/discord-link-preview-not-working">Discord 連結預覽不起作用？ 7 個可嘗試的修復 (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/zh-hant/blog/how-to-add-open-graph-tags">如何新增Open Graph標籤</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/zh-hant/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card：有什麼差別？ </a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/zh-hant/blog/og-image-size-guide">Open Graph 圖片尺寸：2026 年完整指南</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>在幾秒鐘內檢查您的Open Graph標籤</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>使用 <a href="https://proovd.in/zh-hant/">Proovd</a> 免費檢查您的 Open Graph 標籤 — 貼上 URL 並查看 X、LinkedIn、Slack、Discord、WhatsApp 和 ⟦6 上的預覽。</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>