OGPプレビュー・メタタグ生成
ソーシャル共有カードをプレビューし、入力値からOpen GraphとTwitterカードのメタタグを生成します。ブラウザ内で完結。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
共有時の見た目をプレビューし、Open GraphとTwitterカードのタグをページの<head>にコピーできます。取得は一切行わず、画像URLはタグに入るだけです。実際の画像を確認したい場合はローカルファイルを選んでください。
プレビュー
メタタグ
このツールについて
リンクを共有する前に、どう表示されるか見てみたいですか。タイトル・説明・画像・URLを入力すると、このツールがソーシャルカードを再現し、対応するOpen GraphとTwitter Cardのメタタグを生成します。タグはページのhead内にそのまま貼り付けられます。プライバシーのため、入力した画像のアドレスを取得しに行くことはありません(そのURLはタグに入るだけです)。実際の画像でプレビューしたいときは、代わりに端末内のローカルファイルを選びます。すべてブラウザ内で生成され、アップロードはありません。
よくある質問
Open GraphとTwitter Cardのタグとは何ですか?
いずれもページのhead内に置く小さなメタタグで、共有されたリンクをソーシャルプラットフォームがどう表示するかを伝えます。Facebook由来のOpen Graphは、多くのネットワークが読み取るタイトル・説明・プレビュー画像を設定します。Twitter CardのタグはX上で同じ役割を果たし、大きな画像などのレイアウトも選べます。これらがないと、プラットフォームはページから推測するため、カードが簡素だったり誤った見た目になったりしがちです。
なぜプレビューは入力したURLの画像を読み込まないのですか?
仕様です。プライバシーを守るため、本ツールは入力した画像のアドレスにアクセスしに行きません。そのURLは生成されるタグに書き込まれるだけで、取得されることはありません。そのため、プレビューがそこからリモート画像を読み込むことはできません。実際の画像をモックで見たい場合は、端末内のローカルファイルを選んでください。ブラウザ内で直接読み込まれてカードに表示され、どこにもアップロードされません。
生成したタグはどこに貼り、どのプラットフォームでもプレビュー通りになりますか?
タグはページのHTMLのhead内にコピーし、クローラーが読めるように再デプロイします。ここでのプレビューは一般的な慣例に沿っていますが、各プラットフォームは画像の切り取りやテキストの省略の仕方が少しずつ異なり、多くはカードをキャッシュします。そのため、変更後は各社の公式デバッガで更新を促してください。タグはブラウザ内でローカルに生成され、入力した内容がサーバーに送信されることはありません。