OGP で共通ロゴを出すのを止めた

The Open Graph protocol (OGP)(ogp.me)には4つの必須プロパティがあり、 og:image もそれに含まれています。

これまで本ブログでは固有の画像がある記事はその画像を、画像のない記事はサイト共通のアイコンを出力するようにしていました。イメージとしてはこんな感じです。

<meta property="og:title" content="<%= title %>" />
<meta property="og:type" content="article" />
<% if (image !== null) { %>
	<meta property="og:image" content="<%= image %>" />
<% } else { %>
	<meta property="og:image" content="site-icon.png" />
<% } %>
<meta property="og:url" content="https://blog.w0s.jp/<%= entryId %>" />
<meta name="twitter:card" content="summary_large_image" />

OGP の仕様だけを考えるならこれは問題ないはずですが、実際に OGP が活用される各種サービス側の仕様を見ると必ずしも適切とは言えなさそうと思えるようなことが書かれています。

例えば Twitter Cards(developer.twitter.com)には twitter:image があり、Cards markup(developer.twitter.com)において、存在しないときのフォールバックは og:image になると規定されています。

そして Twitter Cards において Summary Card(developer.twitter.com)と Summary Card with Large Image(developer.twitter.com)で使用される場合、 twitter:image で指定できる画像は大きさやファイルサイズ、フォーマットのほかに以下の記述があります。

つまり Twitter 的にはページごとにユニークな画像を指定すべきであり、サイト共通のロゴなどでお茶を濁すのは NG である（should not use）ということのようです。

<!-- ↓こういうのはダメ -->
<meta name="twitter:image" content="site-icon.png" />

ではこれは?

<meta property="og:image" content="site-icon.png" />

Twitter Cards の仕様にはとくに良いともダメとも書かれていません。確実に言えるのは以下の2点です。

• twitter:image にサイト共通の画像を指定してはいけない
• twitter:image が書かれていない場合、 og:image がフォールバックされる

仕様上ダメと明記されているわけではありませんが、フォールバックの結果として og:image が適用されるなら、 Twitter 的には og:image においても共通画像を指定するのは好ましくないと言えるのではないかと思う次第です。

• もっとも、その文章が書かれている developer.twitter.com のサイト自体が全ページ(?)で共通の og:image を出力しているくらいなので、案外問題なかったりするのかも……!?

そもそもリッチオブジェクトに共通ロゴを提示してユーザーにとって意味あるのか（それは Favicon がやるべき範疇では?）という思いもあり、画像のない記事では OGP を外すことにしました。

ちなみに OGP 仕様では og:image は必須プロパティな一方、 Twitter Cards 仕様における twitter:image は任意指定です。そのため、画像がない記事において <meta property="og:image" /> だけ抜くという対処はできません（してはいけません）が、 OGP を使わず以下のようにするのは問題はありません。

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<%= title %>" />

これは HTML 仕様的にはもちろん問題ありませんし、 Twitter Cards としても正しい指定です。 OGP は使っていないので OGP 的にどうかという視点は考慮する必要なく、つまり何ら問題ないコードとなります。

この場合、実際のツイート画面内のリッチオブジェクトでは当然画像は表示されず、一律の SVG アイコン表示になってしまいますが、別途ページの要約（twitter:description）を含ませることができるなど画像以外の情報を表示できるメリットは存在します。