SNSをやってサイトに誘導したい①「OGP」を設定

OGP画像推奨サイズ:幅 1200px 高さ630px
OGP画像推奨サイズ:幅 1200px 高さ630px

OGPとは、Webサイトの内容をSNS上でシェアするための仕組みです。

OGPを設定すると、SNSにシェアされたときにタイトルや説明文、画像などが表示されます。

基本的なOGPの設定方法は以下の通りです。

 

head要素に prefix=”og: http://ogp.me/ns#” を追加する

headerタグ内のmetaタグで所定の要素を追加する

必要に応じて「表示用の画像」を用意する

 

となります。

参考サイト:https://www.sungrove.co.jp/ogp-setting


どういう風になるのか実際に見てみたい方は、このページの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 

 

参考サイト:https://www.sungrove.co.jp/ogp-setting