本文へ移動

§21-12Social

OGP リッチプレビュー

貼り付けた URL をタイトルと画像付きのカードにする。

URL だけの投稿にタイトルと画像を添え、開く前に中身を判断できるようにする。リンク共有が多いチャットやタイムラインでクリック率を上げる。

実装のポイント

OGP の取得はサーバー側で行い、タイムアウトとキャッシュを入れる。og:image がない場合のフォールバックで、カード高さが崩れないようにする。

特徴
  • 非同期
デモで使っているもの
  • lucide-react

このパターンが効く目的