SNSやチャットでURLをシェアしたときに表示されるOGP画像を自動生成してみました。この記事では、Web制作・運営に関わる人が知っておきたいOGP画像の基本をまとめました。
OGP画像とは？
OGP（Open Graph Protocol）画像とは、SNSやチャットなどでURLリンクを共有した時に表示されるプレビュー画像のことです。
- WEBサイトの1ページごとに個別に画像を設定できる
- Open Graph protocolは、WEBページの情報をSNSなどの外部サービスに伝えるための仕様
- X（旧Twitter）・Facebook・Slack・LINEなど、URLプレビューに対応した多くのサービスで表示される
- OGP画像のサイズ基準は、Facebookなど実装側のサービスが個別に設定
OGP画像が必要な理由
OGP画像を設定しておく方がクリックされやすいです。
- タイトル・URLだけのテキストリンクより、画像付きのほうがSNSなどのタイムライン上で目に留まりやすい
- リンク先の内容を画像で先に伝えられる
- OGP画像自体は検索順位を決める直接の評価要因ではないが、SNS経由の流入・クリック率には影響している
OGP画像のサイズの基準
Meta（Facebook）が公開するガイドラインでは、以下のようになっています。
- 推奨→1200×630px以上
- 大きい画像表示での最低限→600×315px
- 最小許容→200×200px
- アスペクト比→1.91:1
この比率ならフィード上でトリミングされずに全体が表示される
※ 数値は2026年8月時点でMeta for Developersの公開内容です。
OGP画像をWEBページに設定する方法
- 画像を作成し、好きなディレクトリに配置
- WEBページの
metaタグに、以下のように記載
<meta property="og:image" content="画像URL">
このサイトではOGP画像を自動生成している
このサイト（まなびのすけ）は、記事のアイキャッチにあたる部分は、Material Symbolsのアイコンを使用し、独自画像を使っていません。このルールの延長としてOGP画像を自動生成にしました。
仕組み
- 記事ごとに設定されているアイコンとアイコンラベル（テキスト）をもとに、webp画像ファイルを自動生成
- OGP画像の色は、ライトモードのアクセントカラーに固定
- 生成の実体は
scripts/generate-og.mjsに記述
生成方法
このサイト（まなびのすけ）の制作環境にはNode.js・npmが入っていないので、npm run buildをローカルで実行できません。そのためビルドの実行やOGP画像の生成確認は、すべてGitHub Actions上で行っています。
GitHubにプッシュすると、GitHubの仮想マシン上で以下のように動きます。
npm run buildを実行しようとすると、その前にprebuildというnpm scriptsが自動で走る（package.jsonで定義）prebuildから呼ばれるOGP画像の生成コマンドが、記事ファイルから使用アイコンとラベル（テキスト）を特定する- 該当するアイコンを読み込み、ラベルと組み合わせて1枚のSVGを組み立てる
- SVGを、Node.jsの画像処理ライブラリ「sharp」で1200×630pxのwebpに変換して書き出す
- OGP画像の生成が終わると、
npm run build本体（Astroのビルド）が実行される - 自動生成された部品と一緒に、OGP画像もデプロイされる
本来なら、記事に沿った画像を個別に作成した方が良いですが、制作の手間がかかるので、現在のOGP画像は簡易デザインの自動生成としています。
その他のルール
- 生成は差分ビルドになっていて、アイコン・記事ファイル・生成スクリプトよりもOGP画像が新しい場合は再生成しない
- OGP画像は
.gitignoreで追跡対象外にした - 記事によっては特定の画像を使いたい場合もありそうなので、手動で画像パスを指定した場合にだけ、その画像が優先表示される機能も追加
よくある質問（FAQ）
Q. OGP画像は必ず用意すべきですか？
必須ではありませんが、用意しない場合は、SNS・チャットでのプレビューに画像が表示されず、テキストのみのリンクになります。クリック率に関わるため、用意したほうがよいです。
Q. OGP画像のサイズはどれくらいにすべきですか？
Meta（Facebook）のガイドラインでは、1200×630px以上・アスペクト比1.91:1に近い画像が推奨されています。最低限でも600×315pxを確保すると、大きい画像でのリンク投稿表示に対応できます。