跳到正文
馬克工具箱

網頁分享卡片預覽與 meta 檢測

輸入網址,讀取網頁的標題、描述和 Open Graph、Twitter Card 標籤,預覽它在搜尋結果、社交平臺大卡片和聊天分享裡的樣子,並指出缺少分享圖片、標題過長、沒有 canonical、誤設 noindex 等問題。

在伺服器上處理,處理完不儲存

使用步驟

  1. 輸入網址(不寫協議時預設 https)。
  2. 點「查詢」,檢視三種預覽效果。
  3. 按「檢查結果」補全或修改頁面的 meta 標籤,改完再查一次確認。

引數說明

讀取範圍
只讀取網頁的 <head> 部分,最多 1 MB;自動辨識 UTF-8、GBK 等編碼。
長度建議
標題不超過 60(漢字按 2 計),描述 50~160。搜尋引擎按顯示寬度截斷,這只是近似值。
訪問限制
只能訪問公網地址的 80、443、8080、8443 埠,最多跟隨 5 次跳轉。

預覽用到哪些標籤

三種預覽中的每一段文字,都取自按下面順序最先出現的標籤:

預覽部分 取自,找到的第一個
標題 og:title,其次 twitter:title,再其次頁面標題
描述 og:description,其次 twitter:description,再其次 meta description
圖片 og:image,其次 twitter:image

「檢查結果」列表會標出缺少 og:title、og:description、og:image 或 twitter:card,og:image 不是絕對的 http 或 https 地址,以及標題或描述不在長度建議範圍內的情況。下面這組最精簡的標籤可以通過所有檢查,放在頁面的 head 裡:

<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences about the page.">
<meta property="og:image" content="https://example.com/share.png">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">

Open Graph 協議(ogp.me)把 og:title、og:type、og:image 和 og:url 定義為基本屬性。twitter:card 的取值有 summary(小卡片)和 summary_large_image(文字上方顯示大圖)。

常見問題

為什麼改了標籤,微信或社交平臺裡還是舊的卡片?

各平臺會快取分享卡片,通常要等幾小時到幾天才會重新整理。Facebook、LinkedIn、X 都提供了官方的除錯工具,可以手動讓它們重新抓取。

og:image 用多大的圖片?

常用 1200×630 畫素(約 1.91:1),檔案小於 5 MB,使用完整的 https 地址。正方形的小圖在大卡片裡會被裁切或顯示成小卡片。

頁面是前端渲染的,為什麼查不到標籤?

這裡和大多數社交平臺的抓取程式一樣,只讀取伺服器返回的 HTML,不執行 JavaScript。標籤需要在服務端渲染或靜態生成時就寫進 HTML。

微信裡的分享卡片也是按這些標籤顯示的嗎?

微信內建瀏覽器開啟的網頁,自訂分享卡片需要接入微信 JS-SDK;直接貼上連結時顯示的標題和圖片以微信自己抓取的結果為準,這裡的聊天卡片只是近似預覽。

隱私說明

這個工具需要伺服器完成:你輸入的內容或檔案通過 HTTPS 傳送到我們的伺服器,處理完立即丟棄,不做儲存。伺服器訪問日誌會記錄 IP 地址和請求地址,僅用於防止濫用。

相關工具