網頁與分享檢查

分享活動連結前,怎麼核對卡片上的標題、日期與縮圖?

活動網頁已更新,分享卡片卻可能仍用另一組文案。用公開報名頁的示例分別核對 OG 與 Twitter 欄位、縮圖和實際落地頁,辨識抓取失敗與預覽限制,再決定能否分享。

撰文: 3sec 編輯部 資料查證日期: 4 分鐘閱讀 1786 字

先拿核准文案對照卡片,不要只看網址能否開啟

分享前應把卡片標題、描述、圖片上的日期,逐一與報名頁核對。只要有一處讓人誤認活動時間、地點或報名狀態,就先交回網站管理者修正,不能因為連結可開啟便視為通過。

例如工作坊改期後,頁面正文已換成新日期,但分享用標題仍是上一場活動。負責寄信的人通常只檢查報名按鈕,群組讀者卻可能只看縮圖便把錯誤日期記進行事曆。事先準備一份簡短核對基準:活動名稱、日期時間、報名狀態、指定圖片,以及真正要分享的公開網址。

先在未登入的瀏覽器視窗開啟網址,確認一般讀者能看到活動內容。含有個人邀請碼、登入權杖、未公開文件識別碼或內網位址的連結,不應拿來做公開網址抓取測試。

用一組示意輸入辨識兩套分享文案

同一網頁可能同時提供 OG 和 Twitter 欄位,因此兩張預覽卡片未必顯示相同文字。Open Graph 官方規範定義了標題、圖片、網址等欄位,描述則是另行提供的摘要;這些欄位與頁面正文需要分開檢查。

以下是虛構活動資料,不代表這個示例網址真的有報名頁,也不是社群平台實測。假設你管理的公開頁面提供下列資料:

  • 網址為 https://example.com/workshop,這裡僅作路徑示意,操作時要換成自己的公開頁面。
  • og:title 為「秋季攝影工作坊|10 月 18 日」。
  • og:description 為「週日下午兩點,先報名再入場。」。
  • og:image 為 /images/workshop-1018.jpg。
  • twitter:title 為「攝影工作坊|立即報名」,其餘 Twitter 圖片及描述欄位未設定。

把真實公開網址貼入 Open Graph 預覽器,按「抓取」後,預期 Facebook 風格卡片使用 OG 標題與描述,Twitter / X 風格卡片則使用獨立的 Twitter 標題。依目前元件,缺少 Twitter 描述或圖片時會沿用可取得的 OG 資料;這是本站的顯示規則,不能推論每個社群都採相同方式。

示例的相對圖片路徑會由解析器補成 https://example.com/images/workshop-1018.jpg。欄位解析成功不等於圖片真的存在:只有圖片網址可讀取,畫面才有機會顯示預期素材。日期藏在圖片裡時,仍要人工閱讀圖片,工具不會替你辨識字樣是否正確。

照著欄位、圖片、落地頁做一次可重現核對

核對結果要能指出哪一項相符、哪一項不符,而不是只留下「看起來正常」。同一份基準、同一個公開網址,讓另一位同事也能完成以下檢查。

  • 記下檢查時間與完整輸入網址;不要在比較途中換成另一條短網址。
  • 讀取「OG 標籤」區的 ogTitle、ogDesc、ogImage,逐項比對核准文案。這些是元件整理後的欄位名稱,並非網頁所有 meta 標籤的完整清單。
  • 若出現 twitterTitle 等欄位,也核對其內容,避免只驗收第一張卡片。
  • 單獨開啟圖片網址,確認素材能讀取、日期正確,再回到卡片查看重要文字是否被裁掉。
  • 最後開啟原分享網址,確認落地頁的活動資訊與卡片一致,報名入口仍符合預期。

上述虛構 HTML 已用目前元件的解析函式檢查,確認標題分流與相對圖片網址解析結果;沒有向示例網址抓取,也沒有宣稱 Facebook、X 或 LINE 的正式分享結果已驗證。真正分享前,仍要在預定使用的平台介面另看一次;平台結果和本站模擬不同時,以讀者實際會看到的畫面繼續追查。

遇到舊文案、空白縮圖或抓取失敗時怎麼分辨

先看取得的欄位,再判斷是網站內容、圖片資源還是抓取途徑的問題。反覆按「抓取」不能代替修正來源。

卡片仍是舊標題: 先請管理者檢查回傳 HTML 裡的 OG 與 Twitter 欄位,而不只看頁面上的大標題。目前解析器對同名標籤取先出現的值;若模板重複輸出欄位,後面的新資料可能不會被採用。修改後再次抓取,並記錄實際取得的值;本站沒有替其他平台清除快取的功能。

圖片網址有值,縮圖卻沒出現: 把網址另外開啟。若需要登入、回傳錯誤或拿到的不是圖片,先修正圖片資源;如果完整圖片可見,但卡片裁到日期,應調整分享圖片的構圖。這兩張模擬卡片使用固定比例與裁切顯示,不能當作所有平台的圖片尺寸規格。

顯示「無法抓取」: 目前工具透過 AllOrigins 第三方代理取得 HTML。代理無法連線、來源封鎖抓取或頁面需要登入,都可能讓檢查失敗。先確認公開頁能直接開啟,再請管理者查看原始 HTML;不要把登入資訊交給代理以求成功。

正文有標題,欄位卻不符: 網頁可能在載入後才由 JavaScript 加上資訊,本站解析的是抓到的 HTML,並不執行該網站的應用程式。應讓管理者檢查分享所需資料是否已出現在回應內容,不能單憑瀏覽器畫面斷言抓取器也能看到。

常見問題

這個工具適合先找出文案與圖片的不一致;修正與最終平台驗收仍要在原網站及分享目的地完成。

抓取成功,就代表每個社群都會顯示同一張卡片嗎?

不代表。現有元件只有 Facebook 與 Twitter / X 兩種模擬版型,沒有獨立 LINE 預覽。抓取成功表示工具取得並解析了內容,不是各平台正式顯示的認證。

可以直接在預覽器修改標題或圖片嗎?

不能。工具沒有寫回網站、編輯原始檔或更新社群快取的功能。要由網站管理者修改來源,再重新檢查。

為什麼沒有 OG 標題,卡片仍然有文字?

目前元件會以 HTML 的 title 作為備援,描述也可能取一般 description。卡片看似完整,不代表 OG 欄位已設定齊全,仍要查看欄位區與原始 HTML。

可以檢查尚未公開的報名連結嗎?

不適合把機密或含個人憑證的網址送進此工具。抓取會經過第三方代理,預覽圖片也會向圖片主機請求;未公開資料應在自己的受控環境核對。

參考資料