カテゴリー: 開発ツール
Open Graphプレビュー
シェア時のリンクカードの見え方をプレビュー
ページの<head>タグを貼り付けると、リンクがシェアされたときにどのようなカードとして表示されるかを確認でき、Open GraphとTwitter Cardのうち不足しているフィールドのチェックリストもあわせて表示します。すべてブラウザ内で解析され、外部への送信やアップロードは行われません。
リンクプレビュー
uselocaltools.comLocalTools — Free Privacy-First Online ToolsFast, free browser-based tools for developers and everyday tasks.
チェックリスト
og:titleが設定されている
og:descriptionが設定されている
og:imageが設定されている
og:urlが設定されている
twitter:cardが設定されている
説明文が200文字以内である
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
リンクがSNSやチャットアプリでシェアされると、プレビューカードはページの内容そのものではなく、<head>内のOpen GraphとTwitter Cardのmetaタグから生成されます。タグが不足していたり誤っていたりすると、タイトルが空になったり、画像が表示されなかったり、カード自体が生成されなかったりします。このツールは貼り付けられたタグを読み取り、シェア先のプラットフォームが表示するであろうカードを再現し、あわせて設定状況のチェックリストを表示します。
使い方
- ページの<head>部分、またはmetaタグだけをコピーします。
- 入力欄に貼り付けます。
- 表示されたプレビューカードと、その下のチェックリストを確認します。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 実際に公開中のページを取得しますか。
- いいえ。HTMLはご自身で貼り付けます。入力した内容がどこかに送信されることはなく、タグはブラウザ内で解析されます。
- 画像が表示されないのはなぜですか。
- プレビューはog:imageタグに指定されたURLをブラウザから直接読み込むため、そのURLが公開されていて到達可能な場合にのみ表示されます。imageタグ自体が無い場合もカードは空のままになります。
- Open GraphとTwitter Cardの両方のタグが必要ですか。
- Open Graph（og:*）はFacebook、LinkedIn、Slackなど多くのプラットフォームで使われます。Twitter/Xはまずtwitter:*タグを読み取り、無ければOpen Graphにフォールバックするため、両方を設定しておくと最も一貫した結果になります。