為什麼我的連結預覽在我更新標籤後會顯示舊圖像？

每個主要平台都會快取抓取頁面的結果,通常持續一周或更長時間,因此您在修復之前共享的連結會不斷顯示過時的卡片。更新標籤不會使該快取本身失效。重新抓取平台偵錯器中的 URL - Facebook 共享偵錯器、LinkedIn Post Inspector 或透過在 Slack 中重新共享 - 以強制重新取得。向 URL 新增無害的查詢字串也會產生無快取的預覽以供測試。

我需要 OG: 和 Twitter: 標籤嗎？

並非總是如此,但同時包含兩者會更安全。當 twitter: 等效項遺失時,X 會回退到 Open Graph 標籤,因此僅包含 og:title、og:description 和 og:image 的頁面仍會產生一張卡片。您無法用Open Graph 表達的是卡片樣式:twitter:card 在大橫幅和緊湊摘要佈局之間做出決定,而 twitter:site 和 twitter:creator 將卡片歸因於您的帳戶。新增這三個並讓 og: 標籤覆蓋其餘部分。

我的 og:title 和 og:description 應該多久？

保持 og:標題等於或低於大約 60 個字元 - 大多數卡片都會截斷超過該字符,並且較窄的行動卡片會更快地剪輯。對於og:描述限制有所不同:X 顯示大約110 個字符,Facebook 和LinkedIn 顯示接近155 到200 個字符。如果您寫入更嚴格的X 限制,您的描述將完全讀取到所有地方。任何過去未遺失的內容,它只是隱藏在省略號後面,因此請預先載入重要單字。

為什麼我的預覽是空白的或只顯示 URL？

通常的原因是 og:圖像是相對路徑而不是絕對 URL、透過純 http 提供的圖像、放置在外部的標籤、由用戶端 JavaScript 注入的刮刀從未運行的標籤,或頁面返回非200 狀態或登入重定向到刮刀。檢查標籤是否出現在原始 HTML 中,您的伺服器會傳回 - 查看來源而不是瀏覽器檢查器,因為檢查器在 JavaScript 運行後顯示 DOM。

這個工具是否會取得我的網址來檢查標籤？

不。它根本不發出網路請求。它可以從您輸入的表單或貼上 HTML 中的標籤來工作，並且所有內容都在瀏覽器中解析和呈現。這是一個深思熟慮的設計選擇：瀏覽器無法取得因 CORS 的任意第三方頁面，而伺服器端獲取者意味著將未發布的 URL 發送給其他人。因為沒有取得任何內容，所以您可以驗證 Localhost、暫存或登入後面的頁面。

我可以預覽尚未發布的頁面嗎？

是的,這是使用這樣的工具而不是平台偵錯器的主要原因。官方偵錯器必須取得您的即時 URL,因此它們對於未部署的頁面毫無用處。在這裡,您只需貼上您打算附帶的標籤(從模板、框架元資料物件或本機建置),然後預覽立即渲染,無需部署。

如果我留下標籤會怎樣？

刮刀會後退,後退是不可預測的。沒有 og:title,他們通常使用標籤,沒有 og:description,他們可能會使用元描述或抓取正文。如果沒有 og:image,大多數平台都會顯示純文字卡,儘管有些平台會從頁面中抓取任意圖像 - 通常是徽標或追蹤像素。如果沒有 og:url,共享位址將按原樣使用,這意味著追蹤參數可能會分割您的共享計數。明確設定標籤是控制結果的唯一方法。

Open Graph 標記對我的搜尋排名有幫助嗎?

不是直接的。 Open Graph 標籤由社交和聊天平台讀取,搜尋引擎不將其用作排名因素。它們確實會影響連結每個份額的點擊率,這會驅動流量,並且隨著時間的推移,驅動重要的訊號。將它們視為共享連結的轉換優化,而不是 SEO 排名槓桿。

Open Graph 預覽工具是免費且私有的嗎?

是的。它是完全免費的，無需註冊，並且每個解析、驗證和預覽都發生在瀏覽器中的 JavaScript 中。您輸入的標題、URL 和圖像連結永遠不會發送到伺服器，並且一旦頁面載入，該工具將繼續離線工作。

Open Graph 預覽

Q: 正確的 Open Graph 影像大小是多少?

使用 1200x630 像素，縱橫比為 1.91:1。 這就是 Facebook、LinkedIn 和 X 的大小，都可以乾淨地渲染到大圖像卡上，它足夠大，可以在高密度螢幕上保持清晰。 將檔案保持在大約 5 MB 以下，以絕對 URL 的形式透過 HTTP 提供服務，並讓重要文字遠離邊緣，因為有些表面會稍微裁剪。 對於緊湊型 X 摘要卡，請提供至少 144x144 的方形圖像。

Q: 為什麼我的預覽是空白的或只顯示 URL？

通常的原因是 og:圖像是相對路徑而不是絕對 URL、透過純 http 提供的圖像、放置在 外部的標籤、由用戶端 JavaScript 注入的刮刀從未運行的標籤,或頁面返回非200 狀態或登入重定向到刮刀。檢查標籤是否出現在原始 HTML 中,您的伺服器會傳回 - 查看來源而不是瀏覽器檢查器,因為檢查器在 JavaScript 運行後顯示 DOM。

Q: 這個工具是否會取得我的網址來檢查標籤？

不 。 它根本不發出網路請求。 它可以從您輸入的表單或貼上 HTML 中的標籤來工作，並且所有內容都在瀏覽器中解析和呈現。 這是一個深思熟慮的設計選擇：瀏覽器無法取得因 CORS 的任意第三方頁面，而伺服器端獲取者意味著將未發布的 URL 發送給其他人。 因為沒有取得任何內容，所以您可以驗證 Localhost、暫存或登入後面的頁面。

Q: 如果我留下標籤會怎樣？

刮刀會後退,後退是不可預測的。沒有 og:title,他們通常使用 標籤,沒有 og:description,他們可能會使用元描述或抓取正文。如果沒有 og:image,大多數平台都會顯示純文字卡,儘管有些平台會從頁面中抓取任意圖像 - 通常是徽標或追蹤像素。如果沒有 og:url,共享位址將按原樣使用,這意味著追蹤參數可能會分割您的共享計數。明確設定標籤是控制結果的唯一方法。

Q: Open Graph 預覽工具是免費且私有的嗎?

是的。 它是完全免費的，無需註冊，並且每個解析、驗證和預覽都發生在瀏覽器中的 JavaScript 中。 您輸入的標題、URL 和圖像連結永遠不會發送到伺服器，並且一旦頁面載入，該工具將繼續離線工作。

預覽您的連結在 Facebook、X、LinkedIn、Slack 和 Discord 上的外觀、驗證您的 OG：標籤，並複製正確的元塊

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook