OGP 画像 作成ツール
OGP 画像 作成は、タイトルを入力し、配色を選ぶだけで、リンクを共有したときに表示されるプレビュー画像を作れる無料のブラウザツールです。出力は1200 x 630 pxのPNGです。サブタイトルは任意で、サイト名、背景のグラデーション、文字色、アクセント色、配置も選べます。作成した画像はダウンロードして、サイトにアップロードしてください。
プレビュー（1200 x 630）
セキュリティ確認を完了すると、ボタンが有効になります。
結果
ここに画像が表示されます。
無料のWebツールでは、高さ2000pxまでのキャプチャしかできません。より高いキャプチャはAPIをご利用ください。
保存期間：Webツールの結果は10分後に削除され、履歴は保存されません。APIの結果は無料プランでは1日、StarterとProでは7日保存されます（BusinessとScaleでは30日）。
アカウント登録なしで利用可能
無料で毎分10、毎日50まで。
実ブラウザによるレンダリング
APIと同じエンジンであるヘッドレスChromium（画面を持たないブラウザエンジン）です。
自動的に削除
Webツールの結果は10分後に削除されます。
プライバシー：送信された内容は、このファイルを作成するためにのみ使用されます。作業用のコピーはジョブの終了時に削除され、結果は10分後に削除されます。詳しくはプライバシーポリシーをご覧ください。
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"一括処理
Webツールは一度に1ドキュメントまで処理します。APIではドキュメントごとに一つのリクエストとなるため、プランが許す数だけスクリプトで処理できます。
詳細設定
ページ全体のキャプチャ（full_page）、領域を指定した切り抜き、リクエストヘッダー、カスタムユーザーエージェントはAPIのオプションです。詳しくはドキュメントをご覧ください。
保存期間
Webツールの結果は10分保存されます。無料APIの結果は1日、StarterとProの結果は7日、BusinessとScaleの結果は30日保存されます。Webツールでは、訪問者ごとに毎分10回、毎日50回まで変換できます。
ひとことで言うと
OGP 画像 作成は、タイトルとサブタイトルから、リンクを共有したときのプレビュー用に1200 x 630 pxのPNGを作る無料のオンラインツールです。
主な仕様
- 入力項目：タイトル（120文字まで）、サブタイトル（200文字まで）、サイト名（60文字まで）、背景のグラデーション、文字色とアクセント色、左揃えまたは中央揃え
- 出力：PNG、1200 x 630 px。長いタイトルは収まるように縮小され、四行で切れます。サブタイトルは三行で切れます。
- ロゴや背景画像のアップロードには対応していません。
- アカウント登録なしの無料利用では、訪問者ごとに毎分10件、毎日50件まで変換でき、透かしは入りません。ログインしているユーザーは、レンダリングごとに1クレジットを使用します。毎月100無料クレジットが付与されます。
- ファイルは自動的に削除されます。アカウント登録なしの場合は変換後10分、無料アカウントの場合は1日で削除されます。
- 開発者は、APIキーを付けてPOST https://api.aiipworld.com/v1/renderを送信すると、同じレンダリングを実行できます。詳しくはスクリーンショットAPIページをご覧ください。
使い方
- 「タイトル」と「サイト名」に文字を入力し、サブタイトルは必要に応じて入力します。
- 背景のグラデーション、文字色、アクセント色と、配置を選びます。
- プレビューを確認してから「画像を作成」をクリックします。
- 1200 x 630 pxのPNGをダウンロードし、サイトにアップロードして、ページのog:imageタグでそのアドレスを指定します。
出力例
OGP画像とは
OGP画像は、ページがシェアされたときにリンクプレビューとして表示される画像です。チャットアプリやSNS、ほかのサイトがプレビューカードとして使います。og:imageメタタグで指定します。このツールは、そのタグに設定する1200 x 630 pxのPNGを作ります。
サイズとデザインのコツ
サイズは1200 x 630 pxにします。リンクプレビューやSNSシェア画像によく使われるサイズです。タイトルは短くまとめ、文字と背景のコントラストを強くしてください。画像の端に余白を取り、文字が枠に近づかないようにしましょう。
ページへの設定方法
PNGを、サイト上の公開されているアドレスにアップロードします。そのアドレスをog:imageタグに設定してください。広く共有する前に、リンクプレビューを確認しましょう。
長いタイトルと多言語の表示
タイトルは長くなるほど小さく縮小され、4行で止まります。サブタイトルは3行で止まります。中国語、日本語、韓国語の文字が表示され、絵文字も表示されます。長い文字を入力したら、プレビューを確認してください。
ページごとに動的なOGP画像を作る
動的なOGP画像とは、サイト全体で1枚を共有するのではなく、各ページのデータ（タイトルなど）から作られる画像です。ページごとに作るには、各ページのHTMLをAPIに送ります。ビューポートは1200 x 630、出力形式はpngに設定します。APIは非同期で動作し、最初のレスポンスはjob_idです。ジョブが成功するか失敗するまで状態を確認し、成功したらレスポンスのリンクから結果をダウンロードして、自分のストレージに保存してください。ダウンロード用のリンクは有効期間が短く、結果も一定時間後に削除されます。
og:imageにはAPIのアドレスを指定しないでください。ページを公開するとき、または初めて必要になったときに画像を生成し、保存したコピーを配信します。Webhookは、まだ利用できません。一括処理用のエンドポイントはないため、画像ごとにリクエストを送ります。シンプルなレンダリングは、1クレジットです。すべてのオプションは、スクリーンショットAPIのページで確認できます。
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<body style=\"margin:0;width:1200px;height:630px;background:#312e81;color:#fff;font:700 64px sans-serif;display:flex;align-items:center;padding:0 80px;box-sizing:border-box\">How we cut build times in half</body>","output":"png","options":{"viewport":{"width":1200,"height":630}}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"OGP 画像 作成ツールの使い方
このツールは、タイトル、サブタイトル、サイト名を受け取り、グラデーションの背景に描画した1200 x 630 pxのPNGを作ります。背景のグラデーションの色、文字色、アクセント色、配置を選べます。「画像を作成」を押す前に、プレビューを確認してください。
ツールはファイルを保持しません。PNGをダウンロードし、サイトの公開アドレスにアップロードしてから、そのアドレスをページに設定します。文字が読みやすいように、タイトルは短くまとめてください。
ソーシャルシェア画像とTwitterカード画像
英語で「social share image generator」と検索される場合も、このツールは1ページにつき1枚の画像を作ります。出力は1200 x 630 pxのPNGで、ページのmetaタグから参照します。
Twitterカードは、そのネットワークでリンクに表示できるプレビューカードの名前です。同じ種類のPNGを使い、metaタグから参照します。og:imageタグに公開アドレスを設定し、ページでtwitter:imageタグを使っている場合は、そこにも公開アドレスを設定してください。
オープングラフ画像の例と共通の特徴
オープングラフの例は、たいてい次の特徴を持っています。プレビューが小さくても読める短いタイトル、控えめなサブタイトル、文字と背景の強いコントラストです。このツールの入力項目も、タイトル、サブタイトル、配色です。
英語で「opengraph images」と検索される場合も、ファイルは同じ1200 x 630 pxのPNGです。「twitter card image generator」で検索される場合も、このツールのPNGを使えます。ページでtwitter:imageタグを使う場合は、そのタグで参照してください。
よくある質問
OGP画像のサイズは何pxですか？
1200 x 630 pxです。リンクプレビュー用の画像によく使われるサイズです。利用するサービスの要件も確認してください。
サイトで使うにはどうすればよいですか？
作成したPNGを公開されている場所にアップロードし、そのアドレスをページのheadにあるmetaタグに設定します。例：<meta property='og:image' content='https://aiipworld.com/og.png'>。絶対URLで指定してください。
英語以外の文字や絵文字も使えますか？
はい、使えます。レンダリングサーバーにはNotoフォントが入っており、中国語、日本語、韓国語の文字が表示されます。カラー絵文字も表示されます。中国語、日本語、アクセント付きのラテン文字、絵文字で動作を確認しています。
タイトルがとても長い場合はどうなりますか？
タイトルは長くなるほど小さく縮小され、4行目で切れます。サブタイトルは3行目で切れます。短いタイトルは大きく表示され、読みやすくなります。
ロゴや背景画像を入れられますか？
このツールではロゴや背景画像を入れられません。APIでは、画像を含む独自のHTMLを送ると、同じ種類のPNGを取得できます。
サイトのページごとに画像を作れますか？
はい、APIを使えばページごとに作成できます。コードで各ページのHTMLを生成し、1200 x 630 pxのPNGをリクエストしてください。コードの項目にリクエストの例があります。
作成した画像はどのくらい保存されますか？
ウェブツールで作成した結果は10分後に削除されます。ダウンロードして、自分のサイトで配信してください。
OGP画像とは何ですか？
ページがシェアされたときに、リンクプレビューに表示できる画像です。ページのheadにあるog:imageメタタグで指定します。このツールの画像は1200 x 630 pxのPNGです。
Twitter用の画像は別に必要ですか？
必ずしも必要ではありません。Twitterカード用にはtwitter:imageタグを追加できます。多くのサイトでは、og:imageと同じファイルを指定しています。読み取られるタグは、各サービスのドキュメントで確認してください。
画像を変えたのに古い画像が表示されるのはなぜですか？
サービスは、プレビューのコピーを一定期間保持しているためです。新しい画像をアップロードしても、古い画像が残ることがあります。プレビューを更新する方法は、各サービスのドキュメントで確認してください。
OGP画像作成は無料で使えますか？
はい、ウェブツールは無料で、アカウント登録なしで使えます。アカウント登録なしで使う場合は、短いセキュリティ確認が必要です。ログイン済みの場合は省略されます。結果は10分後に削除されるので、期限内にPNGをダウンロードしてください。
同じPNGを複数のページで使えますか？
はい、使えます。ふつうのPNGファイルなので、複数のページのmetaタグから同じ画像を指定できます。ページごとにタイトルを変えた画像を、同じツールで別に作ることもできます。
ページごとのOGP画像を動的に作るにはどうすればよいですか？
小さなHTMLテンプレートを作り、各ページのタイトルを埋め込んでから、POST /v1/renderに送ってください。ビューポートは1200 x 630、出力形式はpngに設定します。ジョブの状態を確認し、PNGをダウンロードして、ページと一緒に保存します。ページのog:imageタグは、APIではなく保存したファイルに指定してください。ダウンロード用のリンクは有効期間が短いためです。
アプリ内や一括処理で使いたい場合
このツールはレンダリングAPIで動作するため、同じ画像を、お使いのコードから一回のHTTPリクエストで取得できます。 無料アカウントには、毎月100クレジットが含まれています。