先日タイトルの内容でいろいろと調べたことがあるので記事にしてみます。使い方については検索すると山ほど記事が出てくるのでそちらに譲ります。

使い方については記述しませんが、前提となる知識が必要ですのでそこの部分については記述します。

OGPについて


The Open Graph protocolはもともとFacebookが策定したFacebook向けの規格だと思われます。

「だと思われます」とかいう書き方をしたのは、この辺はSEOがらみで記事が山ほど引っかかって正確なもの、正確性の高いものにたどり着けないものの、OGPのサイトのリポジトリがFacebook管理下であることと、公式のドキュメントからおそらくそうであろうと推定できるからです。

で、まあ余談は置いておいてOGPが何かというと公式のサイトによれば

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

social graphが何を指すのかイマイチよくわからなかったのですが、雑に訳すと「全てのウェブページにFacebookオブジェクトと同じ機能を提供する」というところだと思います。私はFacebookとかSEO周りに詳しくないですが「Facebookオブジェクト」とはおそらくFacebookのタイムライン?とかに表示されるあのカードみたいなやつではないかと思います。

要するに、OGPの仕様に従ってページにメタデータを記述すると、Facebook上でFacebookオブジェクト(カードっぽいやつ)として表示してくれるということではないかと思います。たぶん。知らんけど。

Twitter Card


Twitter CardはOGPのTwitter向けの実装だと思えばよいと思います。

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol.

との記述がありますが、これから読み取るに、Twitter CardはOGPを拡張した実装であると思います。

OGPとTwitterCardの互換


Twitter CardはOGPを拡張した実装であると書きましたが、続けて次のように記述があります。

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

要するに、一部のOGP方式で記述したメタデータはそのままTwitterCardで利用できるので、メタデータによってはTwitterCard向けの記述を行わなくてよいということです。

では、それらは何かというとここに書いてあります。具体的には下記の3つです。

OGPTwitter card
og:descriptiontwitter:description
og:titletwitter:title
og:imagetwitter:image

これさえ理解しておけば万事OKにみえるのですが、画像については注意が必要です。

ページ内に複数の画像のメタデータを指定した場合について


本題に入る前に、少し事の発端について記述します。

fix(open_graph): remove duplicate twitter card tags

これはこのサイトの作成でも使用しているHexoという静的サイトジェネレータのPRでのやり取りなのですが、PRの内容はここまでで書いた内容のとおり、一部のメタタグが重複してるので削除するというものです。

私が「twitter:imageも削除できるのでは?」と聞いているのに対して、PRのAuthorが「画像が複数の場合にどうなるかTwitterのドキュメントでは言及されていなかった」といってます。

この後に残りのやり取りを経て結局twitter:imageは残すことになっているのですが、その辺りについて説明していきます。

ページ内に複数のog:imageが存在した場合のOGPの仕様について


まず、OGPの場合ですがArraysに下記のように記載があります。

If a tag can have multiple values, just put multiple versions of the same

tag on your page. The first tag (from top to bottom) is given preference during conflicts.

ページ内に複数のog:imageがある場合、初めの画像が使用されることになります。

ページ内に複数のog:imageが存在した場合のTwitter Cardの仕様について


で、まあこれが困ったことにドキュメントのどこをどう頑張って読んでも言及されておらず、困り果てていたのですがDevelopers Forumsでいくつか関連する書き込みを見つけることができました。

上記の書き込みによると、Twitter Cardではページ内に複数のog:imageが存在する場合に一番最後のものを使用するようです。つまりOGPと逆です。OGPと逆ということもあって前述のHexo向けのPRではtwitter:imageの実装はそのまま残すこととしました。

これらの書き込みはいずれも4年以上前のため、現在も同様なのかどうかは検証しないとわかりません。検証するにはTwitter Card確認用のツールを使えばいいですが、ツールを使用するにはアカウントが必要で、私はTwitterアカウントを保有してない[1]ので検証できません。

なぜTwitter Cardはog:imageの最後のものを使用するのか


Summary Cardtwitter:imageに次のような記述があります。

You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages.

「サイトの作者の画像など他のページと重複するような一般的(共通するよう)な画像を指定するのは避けるべきです」といっています。

これは私の予想ですが、おそらくTwitter社はメタデータを頭から取得するとサイト全体で使用されている共通の画像が適用される可能性が高いので、それを避けるためにわざと後ろのものを使用するようにしているのではないかと思います。たぶん。

サクッと書くつもりが長くなってしまった…。おわり。


  1. し、わざわざこのためにアカウントつくりたくないので ↩︎