OG画像ジェネレーター
ブログ、ランディングページ、プロダクトローンチ向けに、リンクプレビュー用の1200×630 Open Graph画像を作成します。
推奨エクスポートサイズ
1200×630 px
おすすめテンプレート
いずれもこのフォーマット設定でエディターが開きます。 すべてのテンプレートを見る
Hero Split
Creator covers, launches, personal branding
Full Image Split
Visual-first covers with a full-bleed image split
Split CTA
Launch posts with a headline and clear call to action
Video Split
Keynote and talk covers with a wide side media panel
Stagger Split
Product stories with a staggered four-card media stack
Communication Pad
Brand-led stories with a hero image and supporting copy
Left Image
Visual-led covers with copy and a clear CTA on the right
Tilted Image
Playful launches with a tilted product visual
Card Split
Offer and launch cards with a bordered white panel and shadow
Diagonal Split
Bold launches with a diagonal text-and-image cut
Clean Editorial
Essays, newsletters, thought leadership
Tutorial Card
Tutorials, guides, how-to content
Data Report
Reports, trends, analysis
Product Update
Product launches, updates, release notes
Creator Bold
Social posts, creator content
使い方
- Open Graph形式を1200×630に固定したOG画像ジェネレーターを開きます。
- 共有するページに合うテンプレートを選びます(テキスト重視または分割レイアウト)。
- タイトルとサブタイトルを編集し、背景・コントラスト・任意の画像を調整します。
- 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" />よくある質問
関連ガイド
このフォーマット向けのサイズ、ベストプラクティス、より良い画像の作り方を学べます。
- How-to guides
How to Create an Open Graph Image
Learn how to create an Open Graph image for blog posts, landing pages, product launches, and social shares. Use templates to design a clean link preview image online.
- Design ideas
Open Graph Image Examples
Explore Open Graph image examples for blog posts, landing pages, product launches, and social shares. Learn what makes a better link preview image.
- Size guides
Open Graph Image Size: 1200×630 for Link Previews
OG image size cheat sheet: 1200×630 px (~1.91:1). Cropping tips for Slack, LinkedIn & Meta—plus a free OG generator preset that exports the right canvas.
