FeatureImgFeatureImg

すべてのテンプレートを見る

推奨エクスポートサイズ

1200×630 px

使い方

  1. Open Graph形式を1200×630に固定したOG画像ジェネレーターを開きます。
  2. 共有するページに合うテンプレートを選びます（テキスト重視または分割レイアウト）。
  3. タイトルとサブタイトルを編集し、背景・コントラスト・任意の画像を調整します。
  4. PNGまたはJPEGを書き出し、サイトにアップロードして og:image にそのURLを設定します。

ベストプラクティス

  • リッチリンクプレビューの一般的な標準である約1200×630 pxを目標にします。
  • フィードやチャットのサムネイルサイズでも読めるよう、見出しは短く保ちます。
  • 強いコントラストを使います。プラットフォームは画像を強く再圧縮することが多いです。
  • 端がトリミングされる場合に備え、キーワードはタイトルの前半に置きます。
  • og:image には PNG または JPEG を優先してください（Meta は og:image:type に JPEG・GIF・PNG を挙げています）。WebP に依存する前に検証し、og:image と twitter:image を最終的な公開URLに設定します。
  • 画像を変更したら Slack や LinkedIn でプレビューを再確認します。一部のキャッシュは更新されるまで古いカードを保持します。

Web サイトに Open Graph 画像を実装する

OG 画像を生成したら、サイトの公開パスにファイルをアップロードし、og:image（通常は twitter:image も）にその URL を設定します。クローラーがカードを確実に描画できるよう width、height、alt を含めてください。リンクプレビューの互換性を最大化するには PNG か JPEG を推奨します。WebP は og:image として使う前にテストしてください。

<!-- Basic Open Graph tags -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph image" />
<meta property="og:image:type" content="image/png" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" />

よくある質問

関連ガイド

このフォーマット向けのサイズ、ベストプラクティス、より良い画像の作り方を学べます。

次のアイキャッチ画像を作成

フォーマットを選び、テンプレートを選び、数分できれいな画像を書き出します。

OG画像を作成