使用步驟
- 輸入網址(不寫協議時預設 https)。
- 點「查詢」,檢視三種預覽效果。
- 按「檢查結果」補全或修改頁面的 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 地址和請求地址,僅用於防止濫用。