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のユーザー名を入力。