OGP SNS

よく聞く「OGP」とは？ざっくり説明します

OGPってご存知ですか？牛肉ではなく、ソーシャルメディアにウェブサイトがシェアされたときに、素敵に表示させる仕組みです。

今回は、このOGPとはなにか、ウェブサイト側ではどう設定すればよいかお話ししたいと思います。

そもそも「OGP」とは

OGPは「Open Graph Protocol」の略で、ソーシャル上でウェブサイトがシェアされたときに、画像や動画などのリッチメディアを自動で表示させる仕組みです。ウェブサイトもあります。
Open Graph protocol

OGP自体はFacebook社によって作られましたが、現在はオープンな仕組みとなっており、多くのSNSでURLをリッチに見せる手段として活用されています。

どうやってURLをリッチに見せるかというと、
  1. URLがSNSにポストされる
  2. SNSがURLを解析、遷移先のサイトにOGPタグがあるかチェック
  3. OGPタグが埋まっていたらその情報を取得
  4. SNSのポストに情報を反映
みたいな感じで、このOGPの恩恵を受けるには、まずは2の「ウェブサイトにOGPタグ」を埋め込む必要があるわけなのです。

ウェブサイト側での設定

ウェブサイト側で設定すべきタグをまとめました。とりあえず、これをセッティングしておけば、Twitter・Facebook・LINEには対応できます。
<meta property="og:title" content="ページのタイトル">
<meta property="og:site_name" content="サイトの名前">
<meta property="og:type" content="article">
<meta property="og:url" content="サイトのURL">
<meta property="og:image" content="SNSにシェアされたときに表示させる画像">
<meta property="og:description" content="SNSにシェアされたときに表示させるサイトの説明">
<meta name="twitter:card" content="summary_large_image">
<meta property="fb:app_id" content="598135503886621" />

タグ 説明
og:title 遷移先のタイトル
og:site_name 遷移先のサイト名
og:type 遷移先のコンテンツタイプ。
articleもしくはwebsiteでOK。
og:url 遷移先のURL
og:image SNSで表示する画像。
詳しくは後述。
og:description SNSで表示するサイトの説明。
twitter:card Twitterでの表示方法。
詳しくは後述。
fb:app_id FacebookでOGPを表示させるために必要。

OGPで設定する画像について

TwitterとFacebookのOGPに関するページを見ると、どうやら微妙に仕様が異なるようです。

Summary with large image

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website. The Tweet below shows a Summary Card with Large Image along with the text of the Tweet: Happy 3rd anniversary #TBT!

ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

Facebookのシェア機能を生かすには、アプリの操作方法を利用者に理解しやすく、信頼できるものにすることが鍵となります。アプリの利用者は、シェア機能を通じて、友達と大切なことについて情報交換したり、アプリの機能を活用したりできます。また、開発者にとってシェア機能は、Facebookニュースフィードでの表示を通じてアプリの認識を高めてくれるものです。さらに、アプリから投稿されたコンテンツに利...
詳しくは別にまとめたいと思いますが、ポイントは3つです。
  1. 画像はJPEGで作ること
  2. 画像の縦横比は、タテ1：ヨコ2にすること
  3. 画像の横幅は1,200px以上にすること

Twitter用のメタタグについて

「ウェブサイト側の設定」にある「twitter:card」について補足です。

TwitterはOGPの表示方法を選ぶことができて、ざっくり言うと2パターンあります。
おすすめは「2」のSummary with large imageです。大きめのクリッカブルな画像が表示されるので、効果的にクリック誘導を図ることが可能だからです。

Facebook用のメタタグについて

同じく「ウェブサイト側の設定」にある「fb:app_id」についてですが、なにやらFacebookでOGPを表示させる必要なもので、このIDベースでシェアされた回数などを記録しているようです。

あまり詳しくは触れませんが、この「fb:app_id」を取得する方法はぐぐると大量にHowTo記事が出てきますので、そちらからご参照ください。

一旦ここまで

サイトに埋め込むべきタグは何となくお分かりかと思います。このOGPについては細かい雑学やツールがあるので、またの機会に！ありがとうございました。