Open Graphプレビュー

FacebookやTwitter/X、LinkedIn、Slackで共有されたときにページがどのように見えるかプレビューします。フォームからOpen GraphおよびTwitter Cardメタタグを生成します。

og:title39/70

og:description119/160

og:image URL

Use an absolute URL. Ideal: 1200×630px JPG/PNG under 1MB.

og:url

og:site_name

og:type

Facebook

example.com

My Awesome Blog Post — A Complete Guide

Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike.

Generated Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Awesome Blog Post — A Complete Guide" />
<meta property="og:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />
<meta property="og:site_name" content="My Website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Blog Post — A Complete Guide" />
<meta name="twitter:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />

OG Tag Checklist

✓og:title set (50–70 chars)

✓og:description set (120–160 chars)

○Missing or not absolute

✓og:url is absolute HTTPS URL

✓og:site_name set

✓og:type selected

Open Graphプレビューの使い方

1ページのタイトル、説明、URL、画像URLを入力してください。
2FacebookやTwitter/X、LinkedIn、Slackでリンクがどのように表示されるかプレビューします。
3生成されたメタタグをHTMLの<head>にコピーします。

Zenovayアナリティクス

訪問者の本当の行動を知る。

リアルタイムの訪問者トラッキング
プライバシーファースト、クッキーバナーなし
2分でセットアップ

Zenovayを見る

よくある質問

Open Graph タグとは何ですか?▾

Open Graph(OG)タグは、FacebookやLinkedIn、Twitter/X、SlackおよびDiscordなどのソーシャルメディアプラットフォームで共有されたときにURLがどのように表示されるかを制御するHTMLメタタグです。2010年にFacebookによって開発されたOGプロトコルは、現在、ウェブ全体のリンクプレビューの標準となっています。主要なタグ: og:title(ヘッドライン)、og:description(概要)、og:image(サムネイル)、og:url(正規URL)。OGタグなしの場合、プラットフォームはコンテンツを推測します(多くの場合、不正確です)。適切なOGタグを設定すると、コンテンツが共有されたときの表示方法を完全に制御でき、クリックスルーレートを大幅に向上させることができます。

Open GraphとTwitter Cardsの違いは何ですか?▾

Open Graphは、FacebookやLinkedIn、Slack、Discordなど、ほとんどのプラットフォームで使用される一般的な標準です。Twitter CardはTwitter/X固有のメタタグ(twitter:card、twitter:title、twitter:description、twitter:image)です。ほとんどの実装は両方を必要とします。良いニュース: Twitter固有のタグが存在しない場合、TwitterはOGタグにフォールバックします。推奨: 最大限の互換性のため、両方を設定してください。Twitter Cardのタイプ: summary(小さい画像)、summary_large_image(全幅バナー—最も一般的)、app(モバイルアプリ)、player(ビデオ)。1200×628pxの画像を使用したsummary_large_imageタイプは、最も目を引くプレビューを作成します。

Open Graphの理想的な画像サイズは何ですか?▾

推奨OG画像サイズ: 1200×630px(1.91:1アスペクト比)。最小: 600×315px。最大ファイルサイズ: 8MB未満(Facebook制限)、高速読み込みのために1MB未満が理想的です。Facebookはアスペクト比に合わない画像をクロップします。LinkedInは1200×627pxを推奨します。Twitter/X summary_large_image: 1200×675px(16:9アスペクト比)。og:imageには常に絶対URLを使用してください(https://を含む)。JPGまたはPNG形式を使用してください。アクセシビリティのためog:image:altで代替テキストを含めてください。プロのヒント: ソーシャルフィード内で文脈なしに表示されるため、画像にブランド/ロゴを含めてください。

Open Graphタグを検証するにはどうすればよいですか?▾

テストツール: Facebook Sharing Debugger(developers.facebook.com/tools/debug)—URLを貼り付けると、スクレイプしてプレビュー+エラーを表示します。LinkedIn Post Inspector(linkedin.com/post-inspector)—LinkedInの場合も同様です。Twitter Card Validator(cards-dev.twitter.com/validator)—Twitter Cardsの場合。注意: FacebookとLinkedInはプレビューを積極的にキャッシュします。タグを修正した後、デバッガーの「スクレイプ再度実行」ボタンを使用してキャッシュをリセットしてください。一般的な問題: og:imageが見つかりません(プレビューが表示されません)、画像が小さすぎます(無視されます)、相対画像URL(サポートされていません)、og:titleの欠落(ページタイトルへのフォールバック)。

og:typeとは何ですか、どのような場合に異なる値を使用すべきですか?▾

og:typeはページがどのような種類のコンテンツであるかをプラットフォームに伝えます。最も一般的な値: website(デフォルト—ホームページまたは一般的なページ)。article(ブログ投稿、ニュース記事—article:published_time、article:authorを有効化)。product(eコマースアイテム—og:price:amountを有効化)。video.movie/video.episode(ビデオコンテンツ)。music.song/music.album(オーディオコンテンツ)。記事の場合: article:published_time(ISO 8601日付)、article:author(著者ページのURL)、article:section(カテゴリ)、article:tag(キーワード)を追加します。ほとんどのサイトでは、websiteとarticleが99%のユースケースをカバーします。

画像ツール