50+ 网站 OG 图设计灵感参考：按 12 种网站类型分类
50+ 网站 OG 图设计灵感参考：已上线的社交预览图案例集
编辑收录 53 张已上线网站的 OG 图（Open Graph image），按 AI、SaaS、Agency、Portfolio 等 12 种网站类型分好文件夹。WebP 格式，导入 Eagle 即可并排对比，做 OG 图、博客模板或 banner 时可以参考构图。仅供设计灵感参考。
这份 OG 图灵感 eaglepack 收录了 53 张来自 Recent 的网站 OG 图（Open Graph image），都是已上线网站正在用的社交预览图。图片为 WebP 格式，按网站类型分好了文件夹，仅供设计灵感参考。
链接发到社交平台或聊天工具里，对方第一眼看到的就是 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 或社交广告图时，这批案例也能当构图参考。
你可能也喜欢
