og:title とかあるんだけどコレの起源はなんなのかという話。
概要
Facebook社が提唱したプロトコル。リンクを貼ったときにそのリンクからタイトルやサムネイルを適切に生成するためのタグを定めたもの。
もともとは「あらゆるWebページがFacebook上の他のオブジェクトと同じ機能を持つことを可能にします」という旨があるように、Facebookの掲げるソーシャルグラフのための仕様だがTwitter社が連動仕様を定義するなど追従していった結果、他のSNSサイトで情報が利用されるようになった。
仕様
Facebookが提唱しているだけであり、標準化された仕様ではない。そのため、各サイトでどれだけOGPタグが対応しているかは各々のサイトのドキュメントを見るのがよい
代表的なタグ
URL
<meta property="og:url" content="https://www.example.com/2/" />
そのページのただしいURL、Facebookなどの場合はこの値をいいね集計のためのユニークキーとして使うのでパラメータなどは正しく設定する必要がある
タイトル
<meta property="og:title" content="伝説のサンプルページ" />
ページのタイトル、表示時に使われる
ディスクリプション
<meta property="og:description" content="とってもすごいサンプルページです。その秘密を紹介します。" />
そのページを説明する文章。
画像
<meta property="og:image" content="http://example.com/2/thumb.jpg" />
サムネイルとして表示する画像。表示領域はSNSによって違う。
種別
<meta property="og:type" content="website" />
そのページを表す種別。以下のようなものがある。
- article
- book
- profile
- website
- music.song
- music.album
- music.playlist
- music.radio_station
- video.movie
- video.episode
- video.tv_show
- viedo.other
各タイプごとに追加で設定できるタグがある。たとえば music.song をタイプにすると music:duration などを追加することで曲の時間などを表現できる
<meta property="og:title" content="すごいサンプルのテーマ"/> <meta property="og:type" content="music.song"/> <meta property="og:url" content="https://example.com/track/1"/> <meta property="og:image" content="http://example.com/track_image/1"/> <meta property="music:duration" content="236">
詳しくは「Open Graph Music」 などを参考のこと
