読了 4 分
リンクプレビューが壊れて見える理由（と直し方）
Slack、iMessage、X にリンクを貼ったときの空白や間違ったプレビューは、ほぼ必ずわずかな Open Graph タグに原因があります。そのチェックリストを紹介します。
ページを公開し、Slack にリンクを貼ると、画像のない素の URL が出てくる。あるいはもっと悪いことに、先月のタイトルが表示される。リンクプレビューは Open Graph と Twitter のメタタグによって動いており、それらが欠けていたり間違っていたりすると、どのプラットフォームも見苦しい何かにフォールバックします。
プレビューを動かすタグ
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />よくある原因
- og:image が相対パスになっている。絶対 URL でなければなりません。
- 画像が小さすぎる。1200×630 を目指しましょう。
- タグがクライアント側で注入されるため、クローラーには一切見えていない。
- キャッシュが古いプレビューを配信している。再スクレイプして更新しましょう。
「OG 画像」ツールはすべてのページにブランド仕様のカードを描画し、公開前に Slack、iMessage、X、LinkedIn での展開表示をプレビューします。その後スキルがタグをリポジトリに組み込み、サーバー側でレンダリングされるようにします。