OGP画像を動的に生成(OGP芸)しているウェブサービスまとめ

昨今、OGP画像(TwitterやFacebookなどにウェブページをシェアした際に表示される画像)を動的に生成しているウェブサービスが増えてきています。
この手法を、俗に「OGP芸」と呼ぶようです。*1
そんなOGP芸を行なっているウェブサービスをまとめてみました。

目次

ウェブ表彰

f:id:munieru_jp:20191016155008p:plain

  • サイズ:1200 * 630

サービス上でつくった表彰状の画像が、そのままOGP画像になります。

カクヨム

f:id:munieru_jp:20191016153941p:plain

  • サイズ:1200 * 630

カクヨムは小説のタイトルよりもキャッチコピーを重視しているようで、OGP画像でもタイトルではなくキャッチコピーが使用されています。

Qiita

f:id:munieru_jp:20191217214830p:plain

  • サイズ:1200 * 630

タイトルとユーザー名というシンプルな内容です。

クイズメーカー

f:id:munieru_jp:20191016115514p:plain

  • サイズ:1200 * 630

中央に大きくタイトルがあり、右下にはサービスのロゴがあるという理想的な例です。

コツコツ忍者

f:id:munieru_jp:20191016131547p:plain

  • サイズ:1200 * 675

こちらのサービスは日々継続的に使用することを前提にしており、同じページでも日によって異なる画像が表示されるようになっています。

DEV Community

f:id:munieru_jp:20191016134429p:plain

  • サイズ:1000 * 600

エンジニアのためのサイトなだけあって、記事中のソースコードが使われます。
ただし、どういうロジックでピックアップされているのかは謎です。

俳句メーカー

https://www.haiku-maker.site/

f:id:munieru_jp:20191020201734j:plain

  • サイズ:702 * 368

俳句ということで、すべてひらがなで書いたとしても綺麗に収まるように調整されているようです。

はてなブログ

f:id:munieru_jp:20200628113451p:plain

  • サイズ:1200 * 630

アイキャッチ画像を設定していない場合、OGP画像が自動生成されます。
タイトル、カテゴリ、ブログ名というシンプルな構成です。

Peing(ペイング) -質問箱-

f:id:munieru_jp:20191016142251j:plain

  • サイズ:600 * 315

Twitterとの連携が前提のサービスであり、質問に対する回答をツイートの本文に書くことで、ツイート単体で質問と回答の両方を見ることができるようになっています。
OGP画像のサイズが可変なので、質問文が長いと見切れてしまうのが残念です。

マシュマロ

f:id:munieru_jp:20191026213244p:plain

  • サイズ:可変

Twitterとの連携が前提のサービスであり、質問に対する回答をツイートの本文に書くことで、ツイート単体で質問と回答の両方を見ることができるようになっています。
OGP画像のサイズが可変なので、質問文が長いと見切れてしまうのが残念です。

みんなの感想文

f:id:munieru_jp:20191016121412p:plain

  • サイズ:1200 * 600

原稿用紙というメタファーによって文字数に制約を設けることで、本文がすべて画像内で見れるという画期的な例です。

みんなのボタンメーカー

f:id:munieru_jp:20191016115921p:plain

  • サイズ:450 * 236

サービス上に表示されているボタンがそのまま使われています。

おわりに

ここに載っていないサービスがあれば、ぜひコメントで教えてください!


プロトコル (実業之日本社文庫)

プロトコル (実業之日本社文庫)