在日本开发 SaaS 产品,爱猫、爱读书、爱大海

2021-08-16 Setup og-image for TiddlyJam


又控制没不住自己,给自己的 TiddlyJam 网站添加了 Open Graph image。 原本使用 TiddlyJam 就是为了不折腾这些花里胡哨的技术,结果还是抵不住诱惑。😮‍💨

既然已经做了,就把方法分享一下吧。

首先,我是用的是 vercel/og-image| 动态生成 Open Graph。

不过官方版本尚不支持中文/日文,所以我添加了中文支持。

Before:

After:

code

然后,我修改了 TiddlyJam 的 renderer_base_seotags.tid 和 tiddlyjam_renderer_macros.tid。

主要就是将 og:image 设为我部署在 vercel 的 or-image-zh API。

// renderer_base_seotags.tid

<meta property="og:image" content="`<<get_og_image>>`" />
// tiddlyjam_renderer_macros.tid

 \define get_og_image()
https://og-image-zh.vercel.app/<$text text={{{ [<currentTiddler>get[name]else<currentTiddler>] }}} />
 \end

相关链接: