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画像でもタイトルではなくキャッチコピーが使用されています。

クイズメーカー

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

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

俳句メーカー

f:id:munieru_jp:20191020201734j:plain

  • サイズ:702 * 368

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

はてなブログ

f:id:munieru_jp:20191028122438p:plain

  • サイズ:1200 * 630

アイキャッチ画像を設定していない場合、タイトルと本文の一部が使われます。
個人的には本文はないほうがいいと思うので、ブログの設定でカスタマイズできるといいのですが。

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

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

おわりに

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


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

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