menu
  • シノビプラン

SNSのOGP設定についてご紹介
2018.5.21
WebサイトのOGP設定について今更ながらご紹介します。

OGPとは【Open Graph Protcol】というもので、
FacebookなどのSNSでシェアされた際、
タイムラインに表示される記事のタイトルやサムネイルのことです。

挿入するメタタグの記述は下記の通り。


<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />


但し、Facebookシェアボタンを埋め込む際に、
サーバーの設定がSSLだったり、何らかのセキュリティをかけている場合は
「iframe」のタグを選択しないと挙動がおかしくなるのでご注意ください。

Twitterの場合は【Twitter card】というものが該当します。
記述は下記のようになります。


<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="Twitter ID" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image" content="サムネイル画像のURL" />
no image
  • シノビプラン

SNSのOGP設定についてご紹介
2018.5.21
WebサイトのOGP設定について今更ながらご紹介します。

OGPとは【Open Graph Protcol】というもので、
FacebookなどのSNSでシェアされた際、
タイムラインに表示される記事のタイトルやサムネイルのことです。

挿入するメタタグの記述は下記の通り。


<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />


但し、Facebookシェアボタンを埋め込む際に、
サーバーの設定がSSLだったり、何らかのセキュリティをかけている場合は
「iframe」のタグを選択しないと挙動がおかしくなるのでご注意ください。

Twitterの場合は【Twitter card】というものが該当します。
記述は下記のようになります。


<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="Twitter ID" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image" content="サムネイル画像のURL" />
no image

top

top