Open Graph画像作成・プレビュー
ホーム
無料Open Graph画像(OG画像)作成・プレビュー | We.Inc
ブラウザー内で1200 x 630のOG画像を作成。タイトル、副題、ブランドカラー、ロゴを設定してPNGでダウンロードし、Facebook、LinkedIn、Xの共有カードを確認してメタタグをコピーできます。無料。
Open Graph画像作成・プレビュー
リンクを共有したときに表示される画像を作りましょう。タイトルと副題を入力し、色とレイアウトを選んでロゴを追加し、1200 x 630のPNGをダウンロードします。Facebook、LinkedIn、Xでの共有カードを確認し、ページ用のメタタグをコピーできます。すべてブラウザー内で動作し、入力またはアップロードした内容はWe.Incや他の誰にも送信されません。
タイトルと任意の副題、サイト名を入力します。長いタイトルは最大3行に折り返されます。 レイアウト、背景色、文字色を選ぶか、配色プリセットを使います。 任意でロゴ(PNG、JPG、SVG、WebP)をアップロードします。隅に描画され、端末の外に送信されません。 「PNGをダウンロード」を押して、Facebook、LinkedIn、Xの大きなリンクプレビューで使われる1200 x 630の画像を保存します。 画像をサイトにアップロードし、公開URLを画像URL欄に貼り付け、生成されたメタタグをページのheadにコピーします。
タイトルは約60文字以内にし、共有カードが小さくなるスマートフォンでも読める大きさにしましょう。 文字の周囲に余白を残します。アプリによっては端を切り取ったり、正方形で表示したりします。 文字と背景に十分なコントラストをつけましょう。カラーコントラストチェッカーで確認できます。 公開後もSNSアプリは古い画像をキャッシュします。Facebook Sharing DebuggerやLinkedIn Post Inspectorで更新できます。 重要なページにはそれぞれ固有の画像を設定しましょう。一般的なロゴカードより、ページ内容が分かる画像のほうがクリックされやすくなります。
よくある質問
Open Graph画像の推奨サイズは?
Facebook、LinkedIn、Xの大きなカードでは1200 x 630ピクセル(比率1.91:1)が標準です。このツールは常にこのサイズで出力します。
このOG画像作成ツールは無料ですか?
はい。登録不要で透かしもありません。画像はブラウザー内のcanvasで描画され、端末へ直接ダウンロードされます。
ロゴはどこかにアップロードされますか?
いいえ。ブラウザーがロゴを読み込み、端末内で画像に描画します。We.Incに送信されることはありません。
画像をWebサイトに追加するには?
PNGをサイトにアップロードして公開URLを用意し、ページのheadに<meta property="og:image" content="そのURL">とtwitter:imageタグを追加します。URLをこのツールに入力すれば、タグを作成できます。
リンクを共有すると古い画像が表示されるのはなぜですか?
SNSはプレビューをキャッシュします。Facebook Sharing DebuggerまたはLinkedIn Post InspectorでURLを再取得するか、キャッシュの期限が切れるまで待ちます。
公開中のページからタグを読み取れますか?
いいえ。ブラウザーは他のサイトを読み取れないため、タイトル、説明文、画像URLを入力してください。ツールが表示をプレビューします。
Open Graph画像の役割
Facebook、LinkedIn、X、Slack、メッセージアプリにリンクを貼ると、アプリはページのOpen Graphタグを読み、画像、タイトル、短い説明のカードを表示します。画像はカードの大部分を占めるため、リンクに気づいてもらえるかを左右します。 og:imageタグがない場合、画像が表示されないか、ページ内からランダムに選ばれることがあります。ページタイトルとブランドを入れたシンプルな画像で、意図的にデザインした印象を与えられます。
よいOG画像を作る3つのルール
ページ内容を大きな文字で短く伝えましょう。共有先でも認識してもらえるよう、ブランドカラーを使います。一部アプリでは正方形に切り取られたり角が丸くなったりするため、重要な内容を端に置かないでください。
We.Incのサイトの場合
We.Incで作成したサイトでは、SEOパネルでページタイトル、説明文、共有画像を設定でき、タグは自動生成されます。このツールはあらゆるサイトで利用でき、共有画像そのものの作成にも使えます。
無料で始める · クレジットカード不要
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る