仮OGPの設定

Tweet

LIG社さんの記事を参考にしました

{
	"title": "title",
	"meta": {
		"description": "title site"
	},
	"ogp": {
		"enabled": true,
		"siteName": "サイトの名前",
		"type": "website、blog、article等を入れる",
		"url": "http://www.example.com/そのアイテムのページURL",
		"imageUrl": "http://www.example.com/images/ogp.jpg",
		"title": "ページのタイトル",
		"description": "My ogp description"
	},_
	"facebook": {
		"admins": "個人アカウントと結びつけるためのもの。通常の企業サイトでは使わない",
		"appId": "インサイト機能等を使うための企業用のID"
	},
	"twitter": {
		"enabled": true,
		"imageUrl": "http://www.example.com/images/twitter.jpg",
		"title": "My twitter card title",
		"description": "My twitter card description"
	},
	"mixi": {
		"content-rating": false
	},
	"link": {
		"appleTouchIcon": false
	}
}

画像についての注意

画像パス、またURLパスは絶対ですること(仕様)

twitter

1MB以下。

facebook

1200 x 630pxが推奨。縦横比1.91:1の比率。

自分が主に参加するプロジェクトでは、テンプレートが使用されており、website.jsonファイルの変数を参照している。{{#is 値 true~}}{{/is~}}で条件式が定義されており、jsonファイル側で値がtrueになっている場合のみ記述される。

{{#is website.ogp.enabled true~}}
<meta property="fb:admins" content="{{website.facebook.admins}}">
<meta property="fb:app_id" content="{{website.facebook.appId}}">
<meta property="og:site_name" content="{{website.ogp.siteName}}">
<meta property="og:type" content="{{website.ogp.type}}">
<meta property="og:url" content="{{website.ogp.url}}">
<meta property="og:image" content="{{website.ogp.imageUrl}}">
<meta property="og:title" content="{{website.ogp.title}}">
<meta property="og:description" content="{{website.ogp.description}}">
{{/is~}}
{{#is website.twitter.enabled true~}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{website.twitter.title}}">
<meta name="twitter:description" content="{{website.twitter.description}}">
<meta name="twitter:image:src" content="{{website.twitter.imageUrl}}">
{{/is~}}