OGP 画像の生成を satori (@vercel/og) から Playwright に変えた
tl;dr OGP 画像を satori (@vercel/og が内部で利用しているもので、JSX を SVG に変換するなんかすごいライブラリ) で生成していたが、運用上微妙だったので Playwright を使った生成に変えた 生成の所要時間は伸びてしまったが、挙動が安定しているため安心して運用できるようになった モチベ satori のテキスト周りのスペーシングの挙動がコロコロ変わりすぎて、安心して使い続けるのが難しかった 具体的には改行を含む右揃えテキストで最終行以外の末尾が変に空いてしまう事象などが発生した 特に困ることに、このような挙動変化が patch リリースでしれっと引き起こされ、リリースノートで特に言及されることもなくまた patch リリースで修正されたり、また別の挙動に変わったりする 実際前述の事象関連では v0.10.x 台だけ(つまり patch リリースのみ
OGPを確認するための CLI を作った
$ curl -s https://ogp.me | og +-----------------+-----------------------------------------------------------------------------------------+ | property | content | +-----------------+-----------------------------------------------------------------------------------------+ | og:title | Open Graph protocol | +-----------------+-------------------------------------------------------------------------
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
Chrome の拡張機能でogなどを確認するOGP_Checkerを作ってみた（2） - めも帖
以前、「Chrome の拡張機能でogpとかを確認するのを作ってみた」ということで、作った拡張機能を、もう少し調整してみました。 改善箇所 すごく地味ですが... httpsでも対応しました。なので、画面キャプチャーがgithubになっています descriptionで文字数カウントを入れました 60文字以降で少し文字色が薄くなります。120文字以上だとさらに薄くなります Keywordsという表記をしているサイトを見つけたので、小文字のみの場合と、どちらでも対応できるようにしました ソース ソースは、githubに置いてあります 使用可能な状態のをdropboxに起きました インストール方法は「Google Chromeに野良ユーザスクリプトをインストールする方法がちょっと厳格になった」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OGimage.gallery | The finest hand-picked OG Images ✨
Meta Tags — Preview, Edit and Generate
Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed
Serverless OG Image
