SNS対策でOGP設定をする

WebサイトでSNS対策をする場合はOGPの設定をしておきましょう。

OGPとは、Open Graph Protocol(オープン・グラフ・プロトコル)のことです。
Facebookやtwitter、などのSNSでシェアされた時に「ページタイトル、URL、内容、画像（サムネイル）」を意図した通りに表示させることができます。
折角Facebookやtwitterのシェアの仕組みを取り入れていても、SNS側で勝手な表示をしてしまうため、意図しないテキストが表示されたりします。

Twitterではtwitterカードという仕組みがあります。
考え方はFacebookのOGPと同じです。

OGPの設定方法

OGPをHTMLの「headタグ」内に記述します。

参考例

<meta property="og:title" content="ページのタイトル"/>
<meta property="og:image" content="サムネイル画像の URL"/>
<meta property="og:url" content="ページの URL"/>
<meta property="og:site_name" content="サイト名"/>
<meta property="og:description" content="ページの内容説明"/>
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:image" content="アイキャッチ画像のURL" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:card" content="カード種類" />

twitter:cardの種類は、「summary」と「summary_large_image」のどちらかを指定します。

＊Twitterカードの画像はFacebook用の「og:image」と併用することができます。