Open5
XやSlackで大きめのOGP画像を表示する設定と注意点
基本は画像サイズを 1200 x 630 にして、以下のように設定するだけだが、いくつか注意点がある。
<meta property="og:type" content="website">
<meta property="og:locale" content="en">
<meta property="og:title" content="Repomix">
<meta property="og:site_name" content="Repomix">
<meta property="og:image" content="https://repomix.com/images/og-image-large.png">
<meta property="og:url" content="https://repomix.com">
<meta property="og:description" content="Packs your entire repository into AI-friendly formats">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="https://repomix.com">
<meta property="twitter:url" content="https://repomix.com">
<meta name="twitter:title" content="Repomix">
<meta name="twitter:description" content="Packs your entire repository into AI-friendly formats">
<meta name="twitter:image" content="https://repomix.com/images/og-image-large.png">
注意点
og:image などのURLはパスではなくフルURLを使う
画像のDPI/PPI を 72 にする必要がある
確認
この辺りで確認すると良い
Xの公式ツールはサポートされなくなった。
結果
次のような表示になる。(a=5は試行錯誤の跡)
X
Slack
Zenn
ログインするとコメントできます