運営しているホームページやWebサイトで、OGP設定は行っていますか？

OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。

OGPとは

OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。

ogp画像.jpg
上の赤枠のように表示を目立たせることが可能で、URLだけの場合より目立つためクリック率が上がります。

OGPの基本設定

OGPは下記コードをWebサイトやホームページのソースに埋め込むことで実装することができます。

<!-- ※基本共通設定 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<title>ページのタイトル</title>
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />

<!-- Facebook用設定 -->
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
もしくは
<meta property="fb:admins" content="adminID（15文字の半角数字）" />

<!-- ※Twitter共通設定 -->
<meta name="twitter:card" content="Twitterカードの種類" />

...

</head>
チャットボット運用で押さえておきたいポイントは？

チャットボット運用で押さえておきたいポイントは？

業界別導入事例に学ぶ成功のポイントを資料でチェック

og:title

og:titleにはページのタイトルを指定します。タイトルの設定は...で通常行いますが、og:titleに別のタイトルを設定すると、ソーシャルなどでシェアされた際は、そちらが優先して表示されます。設定しない場合は、...が表示されます。

og:type

content属性に、オブジェクトタイプを記述します。

様々なものが選択できます。詳細は以下より確認してください（英語）
http://ogp.me/#types
https://developers.facebook.com/docs/reference/opengraph

▼よく使われるog:type

website

<meta property="og:type" content="website" />

ウェブサイトのTOPページに指定します。

article

<meta property="og:type" content="artcle" />

ウェブサイトやブログのTOPページ以外のときに指定します。

og:url

ページのURLを指定します。URLの指定方法は絶対パスで行う必要があります。

▼絶対パス（OK）

<meta property="og:url" content="https://ferret-plus.com/images/">

▼相対パス（NG）

<meta property="og:url" content="/images/">

og:image

og:imageは画像を指定することができます。
画像を指定すると、シェアされたときなどに表示する画像を決めることができます。画像の指定方法は絶対パスで行う必要があります。

▼絶対パス（OK）

<meta property="og:image" content="https://ferret-plus.com/images/logo.jpg">

▼相対パス（NG）

<meta property="og:image" content="/images/logo.jpg">`

Facebookは画像サイズを1200px✕630pxにするように推奨していて、そのサイズにするとキレイに大きなサイズで表示されます。

og:site_name

サイト名を指定します。

og:description

ページの説明を記述します。