SNSリンクプレビュー
タイトル、説明、画像から、Facebook、X、LinkedInで共有したときのリンクの見え方をプレビューします。ページURLからogタグを直接読み込むこともできます。
SNSプレビューとは？
このツールは、URLに対してFacebook、X（Twitter）、LinkedInが表示するリンクカードのおおよそのモックアップを、並べて表示します。タイトル、説明、画像URLを入力するか、「Load tags from URL」を押して、ページのOpen GraphとTwitterのタグを自動で読み込みます。
SNSプレビューの使い方
- ページのURLを入力します。必要に応じてLoad tags from URLを押すと、og:とtwitter:のタグから各フィールドが入力されます。
- タイトル、画像URL、説明を編集して、バリエーションを試します。
- 3つのカードのモックアップを比較します。長いテキストは、各ネットワークで一般的な方法で省略されます。
SNSプレビューを使うべき場面
公開前に、共有用のタイトルや画像を試行錯誤するために使います。モックアップは近似です。実際のカードは、アプリのバージョン、画面サイズ、各ネットワークのキャッシュによって異なるため、重要なキャンペーンでは公式のデバッガーで確認してください。
SNSプレビューの仕組み
プレビューは、各ネットワークの現行のカードレイアウト（1.91:1の画像、ホスト名、タイトル、説明）と、おおよその文字数制限でローカルに描画されます。「Load tags from URL」は、AlgoKitのSSRF対策済みPages Functionを使ってページを取得し、メタタグ（og:title、og:description、og:image、twitter:*。HTMLのtitleとdescriptionはフォールバック）を抽出します。画像は、入力したURLから直接表示されます。
一般的な使用例
- ブログのタイトルがFacebookで途切れないか確認する。
- 商品画像が横長のカードでどう切り抜かれるかを見る。
- 2つの見出し案のプレビューを比較する。
- 公開中のページのog:imageが正しく設定されているか確認する。
よくある質問
このプレビューは正確ですか。
いいえ。各ネットワークの現行レイアウトに従っていますが、フォント、省略、切り抜きは端末によって異なり、時とともに変わります。
Load tags from URLが失敗するのはなぜですか。
ページがボットをブロックしている、ログインが必要、プライベートネットワーク上にある、またはオフラインの可能性があります。値を手入力することはできます。
どのタグが読み込まれますか。
まずog:title、og:description、og:image、og:url、次にtwitter:title/description/image、最後にページの<title>とメタディスクリプションです。