コンビニ賞ページのOGPの設定について - EatSmartシステム部ブログ

今回は、もぐナビで7月23より公開しているコンビニ賞ページの実装の際に、OGPの設定について行ったので内容をまとめていきます。

OGPについて

OGPは、SNS(facebook、twitterなど)へ特定のWEBページをシェアする際にそのページの内容をわかりやすく伝えるために用いられるHTMLの要素になります。予め設定したタイトルやイメージを使って、端的にそのWEBページの要旨を表現できます。適切な設定がされないと、シェアするWEBページとは意図しないタイトル、イメージ画像がシェアする際の情報として表示されてしまいます。正しく設定することで、クリック率が向上し、より多くの人に閲覧してもらえるというメリットがあります。

実際に使用したogタグの設定コード

<!-- OGPの利用をするための宣言をする。 -->
<html lang="ja" prefix="og: http://ogp.me/ns#">

<head>
<meta property="og:title" content="もぐナビ　コンビニ賞" />
<!-- TOPページ以外の場合は、articleを指定。 -->
<meta property="og:type" content="article" />
<!-- サムネイルの画像に該当する画像パスを指定。 -->
<meta property="og:image" content="https://mognavi.jp/campaign/conveni_award2019/image/og.png" />
<!-- 遷移先のurlを指定。 -->
<meta property="og:url" content="https://mognavi.jp/do/campaign/convenience_store_food_awards201907" />
<!-- サイト名を指定 -->
<meta property="og:site_name" content="国内最大級の食品クチコミサイト『もぐナビ』" />
<!-- ページの説明文(概要)に該当する内容を記述 -->
<meta property="og:description" content="食品クチコミサイト「もぐナビ」に寄せられた1年間のクチコミを元に、コンビニ商品のランキングを作ってみました♪
レビュアーさんに支持された各ジャンルの第1位と、各コンビニさんのコンビニスイーツ・第1位を堂々発表です！" />
<!-- facebookにサイトの管理者情報を伝えるためのidを指定-->
<meta property="fb:app_id" content="179050255554650" />
<!-- twitterカードの種類を指定する。ここでは大きいイメージ画像付きの表示になるように設定-->
<meta name="twitter:card" content="summary_large_image"　※後述します>
<!-- WEBサイトのtwitterIdを指定　-->
<meta name="twitter:site" content="@mognavi">
</head>

上記のうち、title,type,image,url,は設定に必須で、facebookとtwitterに共通の項目もあります。

実際のコンビニ賞urlをシェア時の表示例

facebookの場合

twitterの場合

f:id:eatsmart:20190726095032p:plain

設定したタイトル、イメージ画像、概要を確認することができます。

twitterカードについて

今回は、上記タグで"summary_large_image"を指定しています。4種類あるうちのカード形式の一つでどういった形式のカードでシェアするのかを表します。 ①Summary Card,②Summary Card with Large Image,③App Card,④Player Cardの4つ種類があり、シェアするurlの目的によって使い分けます。 ①、②はWEBサイト用、③がアプリ配布用、④が動画サイト用になります。試しにもぐナビのTOPページだと、以下のように表示になります。 f:id:eatsmart:20190726095106p:plain ページのソースを確認すると、と①のタイプであることがわかります。コンビニ賞より、画像が小さく文字情報が多くなっています。

OGPの設定確認方法について

シェアされる時に適切に設定した表示がされるかは、Developer向けのツールを使って確認することができます。
facebook debuger(facebookのOGP確認用)
Card validator(twitterのOGP確認用)
上記で用いたtwitterの表示確認にもこちらを使用しており、アカウントさえあればどちらのツールも利用が可能です。

以上になりますが、少しの設定で見せ方が変わり、見せ方が変わるとエンゲージメントにも影響するので実装の中で後回しになりがちですが忘れずに意識していくことだと感じました。