OGP プレビュー

Open GraphとTwitter Cardのメタタグを入力してシェアプレビューを生成するオンラインツール。Facebook、Twitter、LINE対応。

メタタグ入力

推奨サイズ: 1200×630px

生成されたメタタグ

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="あなたのサイトのタイトル">
<meta property="og:description" content="サイトの説明文をここに入力してください。魅力的な説明でクリック率を向上させましょう。">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="サイト名">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com">
<meta name="twitter:title" content="あなたのサイトのタイトル">
<meta name="twitter:description" content="サイトの説明文をここに入力してください。魅力的な説明でクリック率を向上させましょう。">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

プレビュー

Facebook

OG Image
example.com
あなたのサイトのタイトル
サイトの説明文をここに入力してください。魅力的な説明でクリック率を向上させましょう。

X (Twitter)

Twitter Card
あなたのサイトのタイトル
サイトの説明文をここに入力してください。魅力的な説明でクリック率を向上させましょう。
🔗example.com

LINE

LINE Preview
あなたのサイトのタイトル
サイトの説明文をここに入力してください。魅力的な説明でクリック率を向上させましょう。

📌 OGP設定のポイント

  • • 画像サイズ: 1200×630px を推奨(Facebookは1.91:1、Twitterは2:1)
  • • タイトル: 60文字以内が理想的
  • • 説明: 155文字以内が推奨
  • • 画像形式: JPG、PNG(5MB以下)
  • • URLは絶対パスで指定(https://から始める)

このツールをもっと活用する

もっと学びたい方へ

チートシート・技術記事・開発リソースで学習を加速