OGP

OGP とは

Open Graph protocol

Open Graph protocolとは

サイトの記事やページなどがSNSでシェアされるときに、タイトルやサムネイル画像等を意図した通りに表示させる仕組み。

設定の仕方

内にmetaタグとして埋め込む。

例:

<head>
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:url" content="ページのURL" />
</head>

注意点

ファイルパスはすべて絶対パスで書く!

typeの設定

  • サイトトップページなら
    • content="website"
  • サイトトップページ以外なら
    • content="article"

imageの設定

横長の画像は1200px×630px 正方形の画像は600px×600px(以上)

facebookの場合はシュミレーターでも使用して表示を確認 ↓ ogimage.tsmallfield.com

参考: https://ferret-plus.com/610

twitterfacebookの話は割愛