どうも、OGP設定めんどくさすぎて死にそう。井上です。
今時、ブログを書くにあたってOGPの理解は必須かと思います。
ただ、SNSへの影響も考えて、あらかじめいろいろ完璧に設定しておくのは難しいですよねー。
「あ、やべ、ちゃんと画像設定する前に拡散してもうた！」
「Twitterとか投稿してから地味にこの画像が変に見えてきて変えたい」
こういうのがあるあるすぎてつらいですよね…。
先日投稿に失敗した時に調べた内容が、地味に他の人も今後使うこともあるテクニックかもしれないのでまとめておきます。
ブログやWEBサイト作っている方のお役に立てれば幸いです。
そもそもOGPとは
正式名称はOpen Graph Protcolという、SNSで画像表示をする為の仕組みのことです。
クリック率に大きく寄与するマーケティング的にも重要なコイツですね。
OGPの設定方法
HTMLにOGP設定する場合
HTMLの
タグ内に専用のmetaタグを入れて下記のように画像などを指定します。<meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
詳しくはOGPのドキュメントを見てみると良いでしょう。 ogp.me
はてなブログでOGP画像を変えたい場合
はてなブログの場合は「編集オプション」のアイキャッチ画像を設定しておけばOKです。
なお、はてなブログだと仮に画像を記事に含まなくても「デフォルトのOGP画像」が設定されている為下記のような画像になります。
知っておきたいOGPのキャッシュ仕様と問題点
FacebookなどにSNSの記事URLを貼り付けると、Facebook側からそのURLがどんなサイトなのか調べられます。
その後、OGPの情報がFacebookに渡されて、Facebook側で画像が表示されるようになります。
- FB（URL貼り付け）
- FB ＝＞ Blog記事URLへ情報提供依頼
- FB ＜＝ Blog記事からOGP等の情報返却
- FB（きれいに表示）
ただ、毎回アクセスしたりされたりすると通信の量が凄くてサーバーの負担になるので、１回取得した情報はFacebookなどが保持するという「キャッシュ」の仕組みが採用されています。
キャッシュはあるべき機能ですが、これが問題となる場合もあります。
OGPを変更したのに「URLを新たに貼り付けても、前のOGP画像から変更されない」という事態です。
Facebookの場合のキャッシュクリア方法
今ではFacebookには開発者向けのツールである「オブジェクトデバッガー」に、新しくOGP等の情報を取得し直す機能などが盛り込まれています。
Facebookの場合はこれで簡単に更新できるので、更新してからURLをシェアしましょう。
https://developers.facebook.com/tools/debug/og/object/
▼ URLを投入
▼ 現状で取得されているOGPが確認可能
すぐに反映されない場合もあるので、その場合は少しだけ間を置いて再度押せば更新されます。
Twitterの場合のOGP変更方法
前提としてのTwitterCardsの登録
まずTwitterにOGP画像をちゃんと表示させるにはTwitterCardsの登録が必要です。
OGP設定して下記URLからポチポチ押せば取り敢えず終わります。
https://cards-dev.twitter.com/validator
TwitterCardsでの表示の仕方には、画像を上に大きく出すとか左に小さく出すとか種類がありますので、細かい指定の仕方が知りたければ開発者向けの公式ドキュメントを読んでHTMLにmetaタグを設定しましょう。
Getting started with cards — Twitter Developers
Twitterの場合のOGP画像変更対応
実はTwitterには現在OGPのキャッシュ自体を手動で更新する方法がありません。
そこで、TwitterはすべてのURLに対して独自のURL短縮を行っていることを利用します。
Twitterのつぶやきに含まれるURLは、すべてTwitter内部でhttps://t.co/~というURLに変換されています。
これらの説明はWikipediaがわかりやすかったので参考にしてみてください。
つまり、上記のことからTwitterでは少しでも違うURLを呟けば、全く別のURLが生成されます。
そこで、パラメータ（URL先に送るデータ）だけ無意味なものを付加してやれば、同じサイトを表すけれども新しくOGPを取得して新しいTwitterCardsの情報として作成できます。
つまり…
http://inodev.hatenablog.com/
というURLを含めてツイートして想定外のOGP内容でTwitterCardsが生成されてしまったら、OGP変更後に、
http://inodev.hatenablog.com/?t=0
のように最後に無意味なクエリを付けて再度つぶやけばOKです。
上の例だと「tという名前で0のデータを送っている」わけですが、サーバ側で特別な定義がない限り普通に表示するのと変わりません。
しかし、別のURLとして扱われるのでOGPも再取得してくれるわけですね。
なんだかもの凄く裏技的で強引に見えますが、Twitterの公式のトラブルシューティングで紹介されている方法なので問題ないかと思います。
https://dev.twitter.com/ja/cards/troubleshooting
画像のURLの最後にパラメータを追加することで、Twitterbotがその画像を固有のURLとして扱い、画像を再取得するようになります。
なお、URL短縮サービスのGoogle URL ShortenerやBitly等のURL短縮サービスと連携しているものを利用する場合にも同様のテクニックが利用できます。
なお、Twitter Cardが同取得されるかを見る開発者用のツールがあるので、投稿前にこちらも確認しておきたいですね。
https://cards-dev.twitter.com/validator
もし、「あっ！またアイキャッチ画像とかちゃんと設定する前にSNS拡散しちゃったよ！」って時があったら思い出してあげてください。
