辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

12-速通 syntax.fm 659 OG Image

12.MP3
12.MP3

收听方式

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

Pasted image 20230907113005

对于 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

Canva api 设定,开发者文档

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

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

相关链接

补充

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

keyvalue
oghttps://ijust.cc/
ogwebsite
ogHome
oghttps://ijust.cc/boy.png
og《咿呀 能跑就行》是辛宝 Otto 的个人 Solo 播客和博客,内容围绕生活、职场、前端学习展开
og1694057657
ia
ia
ia
ia
og:imagelogo
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.