跳到主要內容
bobob

Open Graph 預覽

預覽 Open Graph 標題、描述、URL、圖片與 robots 策略，並複製社群爬蟲報告。

只在瀏覽器裡處理輸入的內容不會送到伺服器。

輸入與結果

輸入的內容只存在這個瀏覽器。重新開啟可以還原上次的操作。

使用情境

  • 預覽 Open Graph 標題、描述、URL、圖片與 robots 策略，並複製社群爬蟲報告。
  • 以瀏覽器本機方式處理輸入，並在複製前檢查結果。
  • 搭配 Open Graph 預覽 與相關工具縮短工作流程。

範例

常見輸入
Title, description, image URL
用此範例檢查 Open Graph 預覽 的輸入流程。
典型輸出
Card preview, robots policy, image diagnostics, and Open Graph tags
複製前用來確認結果格式與後續檢查點。
附加範例
Title, description, image URL, canonical URL
複製前用來確認結果格式與後續檢查點。
附加範例
https://www.bobob.app/og-image.png
複製前用來確認結果格式與後續檢查點。

常見錯誤

  • 預覽 Open Graph 標題、描述、URL、圖片與 robots 策略，並複製社群爬蟲報告。
  • 如果瀏覽器本機處理方式和真實輸入結構不一致, 輸出不能直接信任。
  • 複製的值中如果混入正式密鑰、客戶資料或內部 URL, 分享前必須移除。

複製前確認

  1. 1再次比較原始輸入與輸出形態。
  2. 2確認目標執行環境、編碼、時區與安全政策差異。
  3. 3繼續用相關工具檢查 Open Graph 預覽 的結果是否適合下一步。

參考資料

  • og:image has to be an absolute URL

    The Open Graph protocol types `og:image` as a URL. A relative path like `/og.png` cannot be fetched by a crawler, so the preview comes back blank. Use the full https address.

    依據：ogp.me

  • A preview that will not update is usually their cache

    Platforms keep what they scraped earlier even after you fix the tags. Each one has a re-scrape tool; until you run it the old card stays. Often nothing is wrong with your page.

    依據：Crawler cache behaviour

常見問題

Open Graph 預覽 的輸入在哪裡處理？

可行的處理會在瀏覽器中執行，但不要輸入正式密鑰或客戶資料。

結果可以直接用於正式環境嗎？

複製前請再次確認執行環境、編碼、時區與安全政策等環境差異。