TwitterとFacebook用のOGP設定方法と表示確認方法
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ならFacebookシェアデバッガーにURLを貼り付ける事でシェア時の表示を確認できます。
TwitterならCard Validatorでシェア時の表示を確認できます。
