個人サイトには管理者のこだわりが隅々に宿るものです。
SNSで外部サイトへのリンクを貼った投稿にはOGP画像というサムネイルが表示されることがありますが、今回、このOGP画像をページごとに自動で生成するようにしました。
この断想ではOGP画像に込めたこだわりを書いていきます。
これまでのOGP画像
本サイトはUdungpulと銘打ってリニューアルしたのと同時期に、全てのページに共通して下の画像をOGP画像として設定していました。
SNSをスクロールしていてこの筆文字が流れてきた時、北朝鮮について扱うサイトだと勘づくことはあっても、当局によるサイトではないことが分かりずらく、サイトが日本語で書かれていることも分かりません。
特に困るのが、最近出している日本の放送についての記事や管理者の個人的感想を記した断想をシェアする際にもこの画像が現れることです。 このサイトは北朝鮮の放送と音楽について扱うページが大多数を占めていますが、中にはそうでないものもあります。 上のOGP画像では、読者が北朝鮮以外について書かれた記事をシェアするのをためらうかもしれません。
そこで、各記事や資料のページのOGP画像を作り直すことにしました。
新しいOGP画像
OGP画像の自動生成にはSatoriというライブラリを利用しました。 HTMLベースで動的な画像作成が可能なこのライブラリを用いて、Blogの各記事、Archiveの各資料、そしてAboutページで、OGP画像を自動生成しています。
本ページに対してはこちらの画像が生成されました。
各ページのデザインをイメージしたレイアウトとしたため、まるでスクリーンショットのような仕上がりです。
新しいページごとのOGP画像では、ページタイトルとサイト名以外にも説明文、カテゴリ、タグなどのメタデータを充実させました。 SNSでシェアする際にページ情報を詳しく表示させることができます。 もし画像検索で表示されても、ウェブ検索より詳細な情報を提供することができます。
おわりに
今回はこだわりの新しいOGP画像について書きました。 新しいOGP画像はデザイン・内容共に満足いくものになりました。
Udungpulはリンクフリーです。 各ページの上部と下部に設置しているワンタッチのシェアボタンもどうぞご活用ください。
ただしX（旧Twitter）ではOGP画像のキャッシュの影響で、一部ページではリンクを貼っても古いOGP画像で表示されたり、画像が非表示になったりすることがあります。 Blueskyは投稿の度新しくOGP画像を取得してくれるので新しい画像でシェアできます。
なお、トップページや記事一覧ページなどは従来のOGP画像を引き続き使用しています。 良いデザインが浮かばないので放置していますが、今後変えるかもしれません。 （2026/03/14追記：Udungpulのロゴマークを制作したのに合わせ、OGP画像を変えました。）