ウェブページの情報をSNSと連携させるためのタグ「OGP（Open Graph Protocol）」、基本的なOGP設定です。
HTML５の設定（<html>内にOGPの使用を宣言する）
|
1 |
<html prefix="og: http://ogp.me/ns#"> |
OGPタグの設定（<head>〜</head>内にOGPを記述する）
|
1 2 3 4 5 6 7 |
<meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページの種類" /> <meta property="og:description" content="ページの簡単な説明" /> <meta property="og:url" content="ページのURL" /> <meta property="og:site_name" content="サイトのタイトル" /> <meta property="og:image" content="サムネイル画像のURL" /> <meta property="og:locale" content="ja_JP" /> |
■<meta property=”og:title” content=”ページのタイトル” />
ページの<title>～と<title>と同じ。
※TOPページの場合は下記「og:site_name」も同じ。
■<meta property=”og:type” content=”ページの種類” />
トップページならば「website」か「blog」、その他のページなら「article」
■<meta property=”og:description” content=”ページの簡単な説明” />
Webサイトのディスクリプション
■<meta property=”og:url” content=”ページのURL” />
ページのURL
■<meta property=”og:site_name” content=”サイトのタイトル” />
Webサイト名 ※TOPページの<title>～<title>
■<meta property=”og:image” content=”サムネイル画像のURL” />
Facebook推奨サイズは、横1200px × 縦630px
■<meta property=”og:locale” content=”ja_JP” />
日本語しかサポートしていない場合は「ja_JP」を設定
画像確認に便利な「OGP画像シミュレータ」
作成した画像がどういう感じで表示されるのかを確認するのに便利なツールです。
OGP画像シミュレータ http://ogimage.tsmallfield.com/
コメント