OGP のススメ

OGP ってなんぞ
Open Graph Protocol の略称です。SNS 等でシェアされたときに、そのサイトのサムネイルだったり、タイトルだったり、概要だったりをいい感じに表示させることができる仕組みです。

OGP の利点
ただ単に URL が貼っ付けられているものと、サムネイルやサイトのタイトル等が大きく貼り付けられているものでは、後者のほうが圧倒的に目を引きます。単純な考えですが、URL への誘導率がアップするわけです。設定することによるデメリットはあまり思いつかないですし、そこまで重労働というわけでもないので、やってみたいという方はぜひぜひやっちゃいましょう。

さっそく試してみる
以下のコードを html ファイルの head タグ内に入れてみてください。 content="○○" の部分は適宜書き換えることをお忘れなく。
注意点ですが、サイトのサムネイル画像の URL は相対パスではなく絶対パス(http://~~~ みたいなやつ)で指定してください。

<meta property="og:url" content="サイトの URL">
<meta property="og:title" content="サイト記事のタイトル">
<meta property="og:description" content="サイトの説明文">
<meta property="og:image" content="サイトのサムネイル画像のURL">

Twitter 用の追加設定
先述通り、OGP は SNS 等でシェアされたときのための設定です。その中でも Twitter 専用の設定も存在します。設定しておいて損はないので追加しておきましょう。以下が例です。

<meta name="twitter:card" content="表示するカードの種類">
<meta name="twitter:site" content="@ツイッターのID">
<meta name="twitter:creator" content="@ツイッターのID">

twitter:card はどの様な見た目のものをタイムライン上に表示するか。という設定です。どの様なカードがあるのか、どの様な表示になるのかはこのページを見て確認してください。オススメはシンプルな見た目の summary カードです。

Twitter 用の OGP の設定が完了したら、登録ページにて該当ページの申請を行います。これをやっておかないとタイムライン上でちゃんと表示されません。

申請は Card URL と書かれている場所の下にある入力欄に URL を入れて、Preview Card というボタンを押すだけでオシマイです。上手くいったら以下のような表示になります。失敗した場合は各タグの設定をもう一度見直しましょう。

サムネイルのサイズについて
1:1 だったり、16:9 だったり、4:3だったりと、SNS によってまちまちです。Twitter にのみ焦点を当てて設定するならば、
summary の場合は
1:1(最低サイズ 144×144px) で、
summary_large_image の場合は
1.91:1(最低サイズ 600×314px)
で作ってあげると良いです。

まとめ
・OGP を設定することでサイトがシェアされたとき目を引くような見た目になります。
・設定は以下のコードを head タグ内に入れるだけ。（内容は適宜書き換えてください）

<meta property="og:url" content="サイトの URL">
<meta property="og:title" content="サイト記事のタイトル">
<meta property="og:description" content="サイトの説明文">
<meta property="og:image" content="サイトのサムネイル画像">
<meta name="twitter:card" content="表示するカードの種類">
<meta name="twitter:site" content="@ツイッターのID">
<meta name="twitter:creator" content="@ツイッターのID">

・サムネイルのサイズは SNS によってまちまちなので、ターゲットとなる SNS によって用意するサイズを変更してあげる必要があります。
・Twitter で設定した内容を正しく表示させるには登録ページで申請する必要があります。

おしまい。。。