Twitter Card や Open Graph Protocol (OGP) は、SNS 等で Web ページの URL を投稿した際に、そのページの概要情報やサムネイル的な画像を表示するための仕様。

各種SNS (Twitter, Threads, Mastodon, Bluesky) の Open Graph Protocol (og:image) と Twitter Card (twitter:image:src) の画像表示対応状況を調べてみた。
各種SNS (Twitter, Threads, Mastodon, Bluesky) の Open Graph Protocol (og:image) と Twitter Card (twitter:image:src) の画像表示対応状況
どうやら Mastodon と Bluesky は Twitter Card では画像を表示してくれなさそうだ。

このブログでは Twitter Card 用の要素しか出力していなかったので、Open Graph Protocol (OGP) の要素も出力するようにしてみた。

OGP の出力例。


<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nilab" />
<meta name="twitter:title" content="[ヅ]littleBits で今度こそ電子工作に挫折しないかも(；´∀｀) (2015-10-06)" />
<meta name="twitter:description" content="[ヅ]littleBits で今度こそ電子工作に挫折しないかも(；´∀｀) (2015-10-06)" />
<meta name="twitter:creator" content="@nilab" />
<meta name="twitter:image:src" content="http://www.nilab.info/lab/twitterpic/651382414162288640_1.jpg" />
<meta name="twitter:image" content="http://www.nilab.info/lab/twitterpic/651382414162288640_1.jpg" />
<meta name="twitter:domain" content="www.nilab.info" />

<!-- Open Graph Protocol -->
<meta property="og:title" content="[ヅ]littleBits で今度こそ電子工作に挫折しないかも(；´∀｀) (2015-10-06)" />
<meta property="og:description" content="[ヅ]littleBits で今度こそ電子工作に挫折しないかも(；´∀｀) (2015-10-06)" />
<meta property="og:url" content="http://www.nilab.info/z3/20151006_01_littlebits.html" />
<meta property="og:image" content="http://www.nilab.info/lab/twitterpic/651382414162288640_1.jpg" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="ヅラッシュ！" />

これでこのブログ記事の URL を各種 SNS (Bluesky, Mastodon, Twitter, Threads) に投稿したときに、SNS 上に画像を表示できるようになった(∩´∀｀)∩ﾜｰｲ
このブログ記事の URL を各種 SNS (Bluesky, Mastodon, Twitter, Threads) に投稿すると、Open Graph Protocol (OGP) or Twitter Card の機能で画像を表示できるようになった(∩´∀｀)∩ﾜｰｲ

Posted by NI-Lab. (@nilab)