Open Graph 預覽

Open Graph 預覽工具會向您顯示在發布之前共享連結的外觀。您輸入 og:title、og:description、og:image、og:url 和 Twitter 卡欄位 - 或貼上您已有的元標籤區塊 - 並且該工具會呈現 Facebook、X/Twitter、LinkedIn、Slack 和Discord 並排。您無需即時推送頁面、分享頁面並發現標題被切成兩半或圖像永遠不會加載,而是可以在仍然可以修復問題的同時看到問題。

Open Graph 協定是幾乎每個平台用來建立這些卡片的共享詞彙。刮刀訪問您的頁面,讀取<head> 中的 og: 元標籤,並從中組裝預覽。問題是每個平台都會以不同的方式呈現這些相同的標籤:X 截斷大約110 個字元的描述,而Facebook 顯示接近155 個字符,LinkedIn 將描述完全隱藏在某些表面上,而Slack 將所有內容折疊成一個緊湊的附件。一張卡片中看起來不錯的欄位可能會在另一張卡片中損壞,這就是為什麼同時預覽所有卡片是唯一可靠的檢查。

這是一個帶有實數的開放圖預覽。將 og:標題設為「我們如何在不重寫的情況下將頁面載入時間減半」(55 個字符,一次通過),並給出 125 個字符的 og:描述。驗證傳遞標題並在描述上發出警告:Facebook 和 LinkedIn 很好,但 X 截斷了大約 110。X 大圖像卡在「從 4.1 秒開始。。」之後剪切文本,而 Facebook 卡顯示整個句子。開放圖形圖像預覽將您的og:圖像加載到每張卡片中,因此在任何人分享之前,損壞的連結會顯示「圖像無法加載」。

該工具運行客戶端,永遠不會獲取或抓取您的頁面。它可以從您提供的標籤中運行,可以輸入到表單中,也可以貼上為原始 HTML 並在本地解析。這意味著您可以驗證登入後面、暫存網域上或根本未部署的頁面的元資料。它向您的伺服器發出的請求是載入 og:image URL,以便您的瀏覽器可以在卡片中顯示圖片。