![OGP画像推奨サイズ:幅 1200px 高さ630px](https://image.jimcdn.com/app/cms/image/transf/dimension=519x10000:format=png/path/sc57e779e8b74968d/image/i36b4a342f37b725d/version/1678846327/image.png)
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