OGPイメージの作り方

最終更新日: 2025年 2月 11日

OGPイメージとは

Webサイトの内容をSNS上でシェアするための仕組み。
XやFacebookでURLを共有した際に内容をプレビューするためのサムネイルが表示される。 この画像を用意しておくことで、共有時の見た目を整えられる。

作業方針

• 画像を作る際、位置をきっちり合わせたキャプションを合成するため、CLIで画像を作る。
• 背景画像にロゴやキャプションを乗せる。
• 画像合成にはImageMagicを使用する。
• 環境 : WSL2 Ubuntu 24.04

ImageMagickインストール

sudo apt install -y imagemagick

フォント

• Google Fontsを利用 (Noto Sans Japanese)
• フォントをWindows ExplorerでWSLのユーザーHomeにコピー
• ubuntuのフォント置き場に移動

  sudo mv ~/*.ttf /usr/share/fonts/truetype/noto/

タイトル (title.jpg)

cd ~/pirorin-mkdocs/docs/ogp/

# ピンクの画像生成
convert -size 1200x630 xc:#ef5552 base.png

# キャプション文字列画像
convert -font /usr/share/fonts/truetype/noto/NotoSansJP-Medium.ttf \
  -size 1200x220 -gravity north \
  -fill "#ffffff" -background none -pointsize 140 caption:"ぴろりん.jp" caption.png
# キャプションを合成 キャプションは150下に
convert base.png caption.png -background none -gravity center -compose over -composite title.jpg
# 作業pngを削除
rm caption.png