FeatureImg
ログイン

OG画像ジェネレーター

リンクプレビュー用の1200×630 Open Graph画像を作成します。デザインソフトもアカウントも不要。テンプレートを選び、タイトルを編集し、PNGまたはJPEGを書き出し（og:imageとして使う前にWebPを検証）、ページにog:imageを設定します。

推奨エクスポートサイズ

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 でプレビューを再確認します。一部のキャッシュは更新されるまで古いカードを保持します。

Implement Open Graph images in your website

After you generate an OG image, upload the file to a public path on your site and set og:image (and usually twitter:image) to that URL. Include width, height, and alt so crawlers can render the card reliably. Prefer PNG or JPEG for the widest link-preview compatibility; test WebP before using it as 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画像を作成