OGPを設定しましょう
「OGP」をCREAMのどこかで設定できるのですか？とよく質問を受けます。
そのまえに、「OGP」について簡単におさらいしておきます。
OGPとは「Open Graph protocol」の略称です。 Facebookや Twitter、 Google+、mixiなどのSNSでシェアされた際に、そのページの タイトル・ URL・概要・アイキャッチ画像（ サムネイル）を意図した通りに正しく表示させる仕組みです。
SNSでシェアされた際に、その情報が適切に表示される仕組みがOGPです。
OGPを設定しておくことで、どのようなページでなにを伝えたいのかが明確になります。そこから、シェアされたユーザーの訴求が高まり、シェアされたユーザーの友人にも情報が共有され、より多くの人にサイトや記事を見てもらうことができます。
サイトのシェアと記事のシェア
SNSを通じてシェアされるのは、サイトのトップ、あるいは単体の記事の場合があります。
サイトのトップの場合はトップページのURLがシェアされ、記事の場合は該当記事のURLがシェアされます。それぞれに違ったOGPが設定できます。
では、メディア構築CMSの「CREAM」ではどうやって設定するのか、具体的に解説します。
CREAMでサイトのOGPを設定するには
サイトトップのOGPを設定するには、CREAM管理画面の基本設定を開きます。
「サイトタイトル」が og:site_name と og:title に、
「サイト詳細」が og:description に、
「サイト画像」が og:image に相当します。
「サイト画像」は『1200x630px の画像ファイル』を推奨しています。
OGP画像のトリミング問題を解決するデザインのコツ
「og:image」に相当するシェア画像（OGP画像）には、ちょっとした問題があります。
OGPを表示する際の画像比率には世界基準のような物は存在せず、各SNSサービスが勝手に指定したサイズにトリミング（切り取り）されてしまいます。特に多いのが正方形にトリミングされるパターンです。
上記の図のように『OGP画像を横幅いっぱいまで使ってデザインした場合』はロゴや文字が見切れてしまう場合がありますので、確実に枠内に収まって欲しい画像やロゴや文字は中心から正方形に切り取った場合に枠内に収まる範囲でデザインするのがオススメです。
CREAMで記事のOGPを設定するには
記事単体のOGPを設定するには、記事作成（編集）画面を開きます。
「タイトル」が og:title に、
「説明」が og:description に、
「サムネイル画像」が og:image に相当します。
「サムネイル画像」は通常、リスト表示の際に小さい画像が使われるのですが、シェア画像にも使われるためアップロードするのはできるだけ大きなサイズの画像が望ましいです。
推奨：1200px × 630px（縦横比 1.91:1）
最小：600px × 315px
OGPを確認するには
OGP設定が正しく設定されているか、なにが設定されているか、を確認することができます。
facebookの「シェアデバッガー」を使います。
https://developers.facebook.com/tools/debug/sharing/
対象のURLを入力すると、過去にシェアされているページはそのまま表示され、シェアされてないページの場合は「新しい情報を取得」ボタンを押してから表示されます。
ぜひ使ってみてください。
