辛宝的玄酒清谈!
1293 words
6 minutes
12-速通 syntax.fm 659 OG Image
2023-10-09
<audio src="ipfs://bafybeid46dskdmum6sasu53nzmhk4a2wokb55vtaoqbvn55ckgsm4edvye" name="12.MP3"  controls cover="ipfs://bafkreicokdyftd3zaqgou6iowqw665iqq7vgfnc67vsvnzjnylypbal4ca"></audio>

收听方式#

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: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 开发人员的浏览器。 使用独立浏览器在更短的时间内构建更好的网站,使您的网站响应更快、更易于访问且性能更高。在每个项目上节省时间,热爱它的每一分钟。

![[Pasted image 20230907113005.png]]

对于 Twitter 和 Facebook 有专门的调试工具 OFFICIAL DEBUGGERS

这些链接可能会用得上。

如果文章更新了需要更新信息,也有地方主动刷新缓存,重新拉取。

探索动态 SVG 和 Puppeteer 方案#

帮助你生成 OG 也有很多动态生成方案:

知识点引导#

og image
比较正式的一个网站介绍 Open Graph protocol ogp.me

开放图协议使任何网页都成为 社交图中的丰富对象。例如,这在 Facebook 上使用以允许 任何网页具有与 Facebook 上任何其他对象相同的功能。虽然存在许多不同的技术和模式,并且可以组合 总之,没有一种技术可以提供足够的信息 丰富地表示社交图谱中的任何网页。开放图协议 以这些现有技术为基础,为开发人员提供一件事 实现。开发人员的简单性是开放图协议的一个关键目标,它 为许多技术设计决策提供了信息。

文章和拓展链接

Yoast SEO 是 WordPress 的插件之一,允许内容制作者在其帖子中添加元标签,包括标题和描述。这些会显示在 Google 搜索结果中,并将页面的内容广播给潜在读者。

Yoast SEO 还允许您将 OG 图像添加到 WordPress 上您想要的任何文章中。但是,您需要升级到企业帐户才能访问此功能。

![[Pasted image 20230907113413.png]]

Canva api 设定,开发者文档

Yoast SEO 是 WordPress 的插件之一,允许内容制作者在其帖子中添加元标签,包括标题和描述。这些会显示在 Google 搜索结果中,并将页面的内容广播给潜在读者。

Yoast SEO 还允许您将 OG 图像添加到 WordPress 上您想要的任何文章中。但是,您需要升级到企业帐户才能访问此功能。

相关链接#

补充#

根据原始标签,我们构建了以下开放图谱属性

keyvalue
og:urlhttps://ijust.cc/
og:typewebsite
og:titleHome
og:imagehttps://ijust.cc/boy.png
og:description《咿呀 能跑就行》是辛宝 Otto 的个人 Solo 播客和博客,内容围绕生活、职场、前端学习展开
og:updated_time1694057657
ia:markup_url
ia:markup_url_dev
ia:rules_url
ia:rules_url_dev
og:image:altlogo
12-速通 syntax.fm 659 OG Image
https://ijust.cc/fm/12/
Author
辛宝 Otto
Published at
2023-10-09