))
12-速通Syntax.fm 659 OG Image
Manage episode 376292365 series 3494169
Вміст надано 辛宝Otto. Весь вміст подкастів, включаючи епізоди, графіку та описи подкастів, завантажується та надається безпосередньо компанією 辛宝Otto або його партнером по платформі подкастів. Якщо ви вважаєте, що хтось використовує ваш захищений авторським правом твір без вашого дозволу, ви можете виконати процедуру, описану тут https://uk.player.fm/legal.
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
基础概念
facebook 2010 推出的 open graph 方案，为了社交媒体的 link 更有表现力，展示社交网站元数据。 能够 preview images。对用户来说为了 SEO。
OG:xxx 有很多，比如文章 视频 照片等。图片的比例不同网站要求不同，比较奇怪。
创建和验证
如何测试 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上您想要的任何文章中。但是，您需要升级到企业帐户才能访问此功能。
24 епізодів
Поширити
