FeatureImg

OG画像ジェネレーター

ブログ、ランディングページ、プロダクトローンチ向けに、リンクプレビュー用の1200×630 Open Graph画像を作成します。

推奨エクスポートサイズ

1200×630 px

おすすめテンプレート

いずれもこのフォーマット設定でエディターが開きます。 すべてのテンプレートを見る

使い方

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

ベストプラクティス

  • リッチリンクプレビューの一般的な標準である約1200×630 pxを目標にします。
  • フィードやチャットのサムネイルサイズでも読めるよう、見出しは短く保ちます。
  • 強いコントラストを使います。プラットフォームは画像を強く再圧縮することが多いです。
  • 端がトリミングされる場合に備え、キーワードはタイトルの前半に置きます。
  • 投稿間で同じレイアウトファミリーを再利用し、シェアがブランドらしく見えるようにします。
  • アップロード後は、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. Link previews then show your title, description, and graphic across social platforms and messengers.

<!-- 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: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" />

よくある質問

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

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

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