50+ 網站 OG 圖設計靈感參考：依 12 種網站類型分類

這份 OG 圖靈感 eaglepack 收錄了 53 張來自 Recent 的網站 OG 圖（Open Graph image），每一張都是已上線網站正在用的社群預覽圖。圖片以 WebP 格式整理，並依網站類型分好資料夾，僅供設計靈感參考。

網址貼到 Threads、Slack 或 LINE 時，對方最先看到的就是 OG 圖，但它常常是網站上線前最後才趕出來的東西。想找參考，通常只能一個個網址貼進預覽工具查看，很難同時比較好幾個案例。這份合集把 53 張已上線的 OG 圖整理在一起，匯入 Eagle 就能並排比對。

來源背景

Recent 是一個設計策展網站，除了 OG 圖，也整理網站、App 截圖、App 圖示等類別的案例。OG Images 專區依網站類型分成 AI、Agency、SaaS、Ecommerce、Portfolio、Finance 等 12 類。

主要特色

• 53 張都來自實際上線的網站，可以看到真實產品怎麼安排品牌、標題和主視覺
• 依 Recent 的 12 種網站類型分好資料夾，AI、SaaS、作品集、金融等都有

這批 OG 圖可以商用嗎？

不行。這 53 張 OG 圖僅供設計靈感參考，版權屬於各網站的品牌方，不能直接使用，也不能修改後放進自己的專案。可以參考的是版面邏輯：比方說，看某個 SaaS 網站在 OG 圖裡怎麼分配產品名稱和介面截圖的比例，再用類似的配置設計自己的版本。

這份 OG 圖合集適合用在什麼場景？

匯入 Eagle 後可以直接瀏覽、並排比較。

• 網站上線前要做 OG 圖時，先把同類型網站的案例拉出來看，確認大家比較常放產品截圖、純文字標題，還是品牌插畫
• 替部落格或產品更新頁設計 OG 圖模板時，參考不同網站怎麼處理標題字級、留白和 Logo 位置

OG 圖和網頁廣告 banner 的構圖問題很接近，都要在固定尺寸裡同時放進品牌、標題和視覺焦點。做 banner 或社群廣告圖時，這批案例也能拿來參考構圖。