收听方式
AI 总结试水
以下是播客要点的摘要:
- OG 图像详情可见共享链接时用于社媒预览的 Open Graph 图像。它们是使用具有 “OG: image” 等属性的元标记定义的。
- 动态生成 OG 图像有不同的方法 ,包括使用 Satori/Vercel OG、Cloudinary 等包,或使用 Puppeteer 或 Playwright 以编程方式截屏。q'a'z2
- Satori 允许从 React 组件生成图像,但在 CSS 支持方面存在限制。Cloudinary 涉及通过 URL 中的命令组装图像,这可能很复杂。
- 使用 Puppeteer 或 Playwright 对动态生成的页面进行屏幕截图是一种简单的方法。这允许完全的 CSS 控制,但需要先渲染页面。
- 要考虑的因素包括支持自定义字体、布局处理、边格、渲染性能和镜像存储 / 缓存。
- 示例讨论了为博客文章、视频、播客等生成图像。可以包括作者照片、文本、日期等动态数据。
总而言之,播客讨论了什么是 OG 图像,动态生成它们的不同技术,如 Satori、Cloudinary 和无头浏览器,以及每种方法的权衡。
内容介绍
本次聊的主题是: og image
原始 Syntax.fm 地址 https://syntax.fm/show/659/og-image-options
20230907
基础概念
facebook 2010 推出的 open graph 方案,为了社交媒体的 link 更有表现力,展示社交网站元数据。 能够 preview images。对用户来说为了 SEO。
OG 有很多,比如文章 视频 照片等。图片的比例不同网站要求不同,比较奇怪。
创建和验证
如何测试 OG 标签在不同网站下的展示效果,也就是如何测试效果?
测试 og,有软件,有程序 polypane 测试,就很方便,是一个服务。
The browser for ambitious web developers.
Build better websites in less time with a stand-alone browser that makes your site more responsive, more accessible and more performant. Save hours on each project, love every minute of it.
雄心勃勃的 Web 开发人员的浏览器。
使用独立浏览器在更短的时间内构建更好的网站,使您的网站响应更快、更易于访问且性能更高。在每个项目上节省时间,热爱它的每一分钟。
对于 Twitter 和 Facebook 有专门的调试工具 OFFICIAL DEBUGGERS
这些链接可能会用得上。
如果文章更新了需要更新信息,也有地方主动刷新缓存,重新拉取。
探索动态 SVG 和 Puppeteer 方案
帮助你生成 OG 也有很多动态生成方案:
- vercel/satori: Enlightened library to convert HTML and CSS to SVG 框架动态生成,传递参数,使用 jsx 生成动态 svg
- 图片视频压缩 Cloudinary 涉及通过 URL 中的命令组装图像
- 也可以使用 puppeteer 来渲染截图,围绕动态截图,用了 puppeteer 的 sls 版本
- Cloudflare Puppeteer 文档 很强,在 worker 中使用 puppeteer
- 主播就做了一个动态的观察网址和效果 地址
- 当然提供缓存支持,不用重复操作,也是按需操作
- 也可以使用 E2E 来做截图,比如 Playwright
知识点引导
og image
比较正式的一个网站介绍 Open Graph protocol ogp.me
开放图协议使任何网页都成为 社交图中的丰富对象。例如,这在 Facebook 上使用以允许 任何网页具有与 Facebook 上任何其他对象相同的功能。虽然存在许多不同的技术和模式,并且可以组合 总之,没有一种技术可以提供足够的信息 丰富地表示社交图谱中的任何网页。开放图协议 以这些现有技术为基础,为开发人员提供一件事 实现。开发人员的简单性是开放图协议的一个关键目标,它 为许多技术设计决策提供了信息。
文章和拓展链接
- meta dev 的文章介绍 developers.facebook.com
- meta tags Meta Tags Toolkit - Preview, Edit, and Generate
- Vercel 的 og 介绍 vercel
- 有一些不同的实现和 debugger 工具 ogp.me
- Canva api 设定,开发者文档
Yoast SEO 是 WordPress 的插件之一,允许内容制作者在其帖子中添加元标签,包括标题和描述。这些会显示在 Google 搜索结果中,并将页面的内容广播给潜在读者。
Yoast SEO 还允许您将 OG 图像添加到 WordPress 上您想要的任何文章中。但是,您需要升级到企业帐户才能访问此功能。
Canva api 设定,开发者文档
Yoast SEO 是 WordPress 的插件之一,允许内容制作者在其帖子中添加元标签,包括标题和描述。这些会显示在 Google 搜索结果中,并将页面的内容广播给潜在读者。
Yoast SEO 还允许您将 OG 图像添加到 WordPress 上您想要的任何文章中。但是,您需要升级到企业帐户才能访问此功能。
相关链接
补充
根据原始标签,我们构建了以下开放图谱属性
key | value |
---|---|
og | https://ijust.cc/ |
og | website |
og | Home |
og | https://ijust.cc/boy.png |
og | 《咿呀 能跑就行》是辛宝 Otto 的个人 Solo 播客和博客,内容围绕生活、职场、前端学习展开 |
og | 1694057657 |
ia | |
ia | |
ia | |
ia | |
og:image | logo |