OGP設定方法

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【HTML】OGPチートシート | コレワカ](https://korenarawakaru.com/tech/html/ogp-cheatsheet)

## OGPとは
**O**pen **G**raph **P**rotcolの略で、
TwitterやFacebookなどのSNS上でWebページを伝えるためのプロトコルです。
TwitterやFacebookでリンクがシェアされた時に、サムネイルや概要などが表示されて、
クリック率を上げることができます。
[OGP公式](https://ogp.me/)

## OGPコード
### コード全容
今回設定するコードの全容です。

```html:HTML
<head prefix="og: http://ogp.me/ns#">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページ説明">
  <meta property="og:url" content="ページURL">
  <meta property="og:type" content="article">
  <meta property="og:image" content="画像のURL">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@twitterid">
  <meta name="fb:app_id" content="数字15桁">
</head>
```

### prefix設定
headタグにprefix属性を追加します。
OGPを使うことを宣言するためのタグで、無くても機能しますが、
公式のガイドラインでは、記述することを推奨しています。

```html:HTML
<head prefix="og: http://ogp.me/ns#">
  <!-- OGPの記述 -->
</head>
```

### og:site_name
サイト名を指定します。

```html:HTML
<meta property="og:site_name" content="サイト名">
```

### og:title
ページタイトルを指定します。

```html:HTML
<meta property="og:title" content="ページタイトル">
```

### og:description
ページの概要を指定します。

```html:HTML
<meta property="og:description" content="ページ説明">
```

### og:url
ページのURLを指定します。

```html:HTML
<meta property="og:url" content="ページURL">
```

### og:type
ページのタイプを指定します。
よく使うのは、「website」と「article」で、
「website」はトップページ、「article」はその他のページで使い分けすれば良いでしょう。

```html:HTML
<meta property="og:type" content="article">
```

### og:image
ページのアイキャッチ画像を指定します。

```html:HTML
<meta property="og:image" content="画像のURL">
```

### twitter:card
Twitterカードの種類を指定します。
よく使うのは、「summary」と「summary_large_image」です。

```html:HTML
<meta name="twitter:card" content="summary">
```

「summary」だと下記のように表示されます。
<img width="600" alt="summary.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/3d7d3c18-d659-9e74-10a7-672ff4becf26.png">

「summary_large_image」だと下記のように表示されます。
<img width="543" alt="summary_large_image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/49b0e314-7530-e8f4-90ed-3bbd2ca529e5.png">
他にもアプリ配布用の「app」と動画用の「player」がありますが今回は割愛させていただきます。

### twitter:site
TwitterIDを指定します。
TwitterIDは、プロフィールの名前の下の@〇〇がプロフィールです。
<img width="280" alt="twitter_id.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/c7b85b00-feca-22df-7874-f8031511d591.png">

```html:HTML
<meta name="twitter:site" content="@twitterid">
```

### fb:app_id
Facebookシェアのインプレッション取得設定を指定します。
fb:app_idの取得方法は、[Facebook for Developers](https://developers.facebook.com/apps) にアクセスし、「新しいアプリを追加」から情報を追加して、「アプリID」が取得できます。

```html:HTML
<meta name="fb:app_id" content="数字15桁">
```

## OGP確認方法
下記のサイトを使って、確認しましょう。
使い方は簡単で、確認したいWebページのURLを入力して、デバッグボタンをクリックするだけです。
思った通りに表示されない場合は、どこか間違っている部分がありますので、確認修正してください。

[Card Validator | Twitter](https://cards-dev.twitter.com/validator)
[シェアデバッガー | Facebook](https://developers.facebook.com/tools/debug/)


## まとめ
OGPをつけることでシェアされた時の目立ち方が違い、クリック率に影響してきます。
なんと言っても、見た目がカッコよくなります(^^)
Webサイトを作るのであれば、正しくOGPを記述できるようになっておくと良いでしょう。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)