Open Graphメタタグジェネレーター
Facebook、LinkedIn、WhatsApp、Slack、Discordのリンクプレビュー用のOpen Graphメタタグ（タイトル、説明、サイズとaltつきの画像、タイプ、URL、ロケール）を作成します。
絶対 URL。多くのサービスで 1200×630 px が適しています。
en_US, vi_VN, fr_FR…
<meta property="og:type" content="article"> <meta property="og:title" content="My Awesome Article"> <meta property="og:description" content="A short summary shown when the link is shared."> <meta property="og:url" content="https://example.com/article"> <meta property="og:site_name" content="Example"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:secure_url" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Article cover">
Open Graphジェネレーターとは？
このツールは、Facebook、LinkedIn、WhatsApp、Slack、Discord、Telegramなど多くのアプリでリンクを共有したときの見え方を制御する、Open Graphの <meta property="og:…"> タグを生成します。og:type、タイトル、説明、URL、サイト名、ロケール、そして画像（セキュアURL、幅、高さ、altテキスト）を扱い、必須プロパティが欠けていると警告します。
Open Graphジェネレーターの使い方
- og:title、og:type、og:url、og:image（4つの必須プロパティ）を入力します。
- 説明、サイト名、ロケール、画像のサイズとaltテキストを追加します。
- 不足プロパティの警告があれば修正します。
- タグをページの<head>にコピーします。
Open Graphジェネレーターを使うべき場面
ページが共有される予定で、各アプリの推測に任せずプレビューを制御したいときはいつでも使います。各ネットワークはプレビューをキャッシュするため、タグを変更した後は、プラットフォームのデバッガー（Facebook Sharing Debuggerなど）で更新してください。X（Twitter）にはTwitter Cardジェネレーターも参照してください。
Open Graphジェネレーターの仕組み
空でない各フィールドが、HTMLエスケープされたcontentを持つ1つの <meta property="og:…" content="…"> タグになり、Open Graphプロトコルが推奨する順序で出力されます。画像URLがhttpsの場合は、同じURLのog:image:secure_urlタグが追加されます。画像の幅、高さ、altは、画像が設定されている場合にのみ出力されます。
一般的な使用例
- ブログ記事を、LinkedInやFacebookで大きな画像プレビューにする。
- ローカライズしたページにog:localeを設定する。
- アクセシビリティのためにog:image:altを追加する。
- 商品ページで、WhatsAppに商品名と写真が表示されるようにする。
よくある質問
最適な画像サイズはどのくらいですか。
1200×630 px（1.91:1）なら、ほとんどのプラットフォームできれいに表示されます。アプリによっては正方形に切り抜かれるため、重要な内容は中央に配置してください。
必須のogタグはどれですか。
プロトコルでは、og:title、og:type、og:image、og:urlが必須です。説明とサイト名は任意ですが、推奨されます。
Facebookに古い画像が表示され続けるのはなぜですか。
プレビューはキャッシュされています。Sharing DebuggerでURLを再取得するか、画像のURLを変更してください。