Zenn
Open5

XやSlackで大きめのOGP画像を表示する設定と注意点

yamadashyyamadashy

基本は画像サイズを 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">
yamadashyyamadashy

注意点

og:image などのURLはパスではなくフルURLを使う

画像のDPI/PPI を 72 にする必要がある

ログインするとコメントできます