OGP画像の作り方（1200×630の作成方法）
SNSでURLをシェアしたときに表示されるOGP画像（1200×630）の作り方を解説します。推奨サイズ、metaタグの設定、見やすくするコツ、確認方法までまとめます。
OGP画像とは
OGP画像は、記事やサービスのURLをX（Twitter）、Facebook、LINE、Slackなどでシェアしたときに、カードとして表示されるサムネイル画像です。OGP（Open Graph Protocol）に沿って og:image として指定します。
テキストだけのリンクよりも、画像付きカードのほうがクリックされやすく、内容も伝わりやすくなります。ブログ、Qiita、Zenn、個人開発サービスの紹介ページなどでは、OGP画像を用意しておくと流入や反応が変わってきます。
推奨サイズと比率
OGP画像の標準サイズは 1200×630 ピクセル（おおよそ1.91:1）です。多くのSNSがこの比率を基準に表示するため、まずはこのサイズで作るのが無難です。X（Twitter）の大きなカードもこの比率に対応しています。
小さすぎる画像は、サービス側で表示されなかったり粗く表示されたりします。1200×630を基本にしておけば、主要なSNSでおおむね意図どおりに表示できます。
ブラウザでOGP画像を作る手順
デザインツールがなくても、ブラウザだけでOGP画像は作れます。Filewispの「OGP画像メーカー」は、タイトル・サブタイトル・背景色・ロゴを入力するだけで1200×630の画像を生成します。テーマ配色のプリセットや文字色の調整、ロゴ配置にも対応し、入力内容はすべてブラウザ内で描画されます。
手順は、タイトルとサブタイトルを入れ、テーマや配色を選び、必要ならロゴを追加するだけです。プレビューで仕上がりを確認したら、PNGとしてダウンロードします。
metaタグの設定方法
作ったOGP画像は、ページの <head> 内で og:image として指定します。あわせて og:title（タイトル）、og:description（説明）、og:url（ページURL）、og:type を設定すると、カードがより正しく表示されます。X向けには twitter:card を summary_large_image にしておくと大きなカードになります。
og:image には絶対URL（https://から始まるフルパス）を指定するのが基本です。相対パスだと一部のサービスで画像を取得できないことがあるため、公開URLでの指定をおすすめします。
見やすいOGP画像のコツ
OGP画像はタイムライン上で小さく表示されることも多いため、タイトルは短めで、背景と文字のコントラストをはっきりさせると読みやすくなります。長すぎるタイトルは折り返しで窮屈になるので、要点だけに絞るのがコツです。
端ギリギリに文字を置くと、サービスによっては見切れることがあります。少し余白を取り、ロゴやサイト名はさりげなく添える程度にすると、情報が詰まりすぎず締まった印象になります。
表示を確認する方法
設定したOGPは、各SNSのデバッガやカード検証ツールで確認できます。実際にシェアする前にプレビューを見ておくと、画像の見切れや古いキャッシュに気づけます。
OGPを更新したのに反映されない場合、SNS側が以前の画像をキャッシュしていることがあります。検証ツールで再取得を促すか、URLにパラメータを付けて確認すると、新しい画像を確認しやすくなります。