OGPとは、Webサイトの内容をSNS上でシェアするための仕組みです。
OGPを設定すると、SNSにシェアされたときにタイトルや説明文、画像などが表示されます。
基本的なOGPの設定方法は以下の通りです。
head要素に prefix=”og: http://ogp.me/ns#” を追加する
headerタグ内のmetaタグで所定の要素を追加する
必要に応じて「表示用の画像」を用意する
となります。
どういう風になるのか実際に見てみたい方は、このページのURLをご自身のFacebookやTwitterに貼り付けてみてくださいませ。
コードの例
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="サイトのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="サイトのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="サイトの説明文">
</head>設定が正しく行われたかの確認
OGP設定が正しく行われているかどうかは、各SNSのデバッガーツールで確認できます。
Facebookシェアデバッカー
https://developers.facebook.com/tools/debug/?locale=ja_JP
Twitter Card Validator
https://cards-dev.twitter.com/validator
