# TwitterとFacebook用のOGP設定方法と表示確認方法

URL: https://webrandum.net/ogp-twitter-facebook/
公開日: 2019-03-12
更新日: 2019-03-12
カテゴリー: コーディング
タグ: Facebook, OGP, Twitter
出典: Webrandum（著者: サイトウ マサカズ）

## OGPはSNSシェア時に使用される情報

OGPはSNSにシェアした時に表示される情報の事で、Open Graph Protcolの略です。

ちなみに、OGPで設定するアイキャッチ画像のことをOGP画像・og:imageなどと呼んだりします。

## OGPの設定方法

設定にはそれぞれサービスごとに<meta>タグを<head>内に設置します。

```
<meta property="og:url" content="URL">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="ページの種類">
<meta property="og:description" content="説明文">
<meta property="og:image" content=" アイキャッチ画像の URL">
```

| property | 内容 |
| --- | --- |

| og:url | ページのURLを絶対パスで入力。 |
| --- | --- |

| og:title | ページのタイトルを入力。 |
| --- | --- |

| og:type | 「website」「blog」「article」のいずれかを入力。 websiteとblogはトップページにのみ使用して、 それ以外のページにはarticleを使用する。 |
| --- | --- |

| og:description | ページの説明文を入力。 |
| --- | --- |

| og:image | アイキャッチ画像のURLを入力 サイズは一般的には1200px × 630pxで、 「1.91：1」の比率が良いとされています。 |
| --- | --- |

### Facebook用のタグ

上記に加えて、FacebookではOGPを表示させるためにひと手間必要です。

```
<meta property="fb:app_id" content="App-ID">
```

アプリIDと呼ばれる15文字の半角英数字を入力しなければいけません。

### Twitter用のタグ

Twitterでは、シェア時に表示するTwitterカードの設定が必要になります。

```
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@Twitter ID" />
```

| name | 内容 |
| --- | --- |

| twitter:card | カードの種類を入力。 基本的には表示の小さい「summary」か 表示が大きい「summary large image」を選択する。 |
| --- | --- |

| twitter:site | @に続くTwitterのユーザー名を入力。 |
| --- | --- |

## OGPの表示確認

metaタグを設定したら、ちゃんと表示されるかどうか確認しましょう。

実際にSNS投稿するのは怖いです。それぞれ表示確認ができる公式のサイトがあるので、そこから確認します。

![Facebookシェアデバッガー](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_1-10-1024x532.png)

Facebookなら[Facebookシェアデバッガー](https://developers.facebook.com/tools/debug/?locale=ja_JP)にURLを貼り付ける事でシェア時の表示を確認できます。

![Twitter Card Validator](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_2-10-1024x534.png)

Twitterなら[Card Validator](https://cards-dev.twitter.com/validator)でシェア時の表示を確認できます。