ogp

Open Graph Protocolの略称
- http://ogp.me/
サイトがFacebook等のSNSでシェア・URL貼り付けされた際に、画像やタイトル、サイトの概要を表示するための仕組み
- FacebookにURLを貼り付けると画像や説明が表示されるアレ

設定方法

基本

<head>内に各種<meta>タグを埋め込んで設定する
基本となるタグは以下の4つ
- og:title ページのタイトル
- og:type ページのタイプ
- og:image ページのサムネイル画像
- og:url ページのURL

この4つをmetaタグの property属性に指定し、content属性に表示させたい値を指定する(meta name属性ではないので注意)

 <meta property="og:title" content="My App" />
 <meta property="og:type" content="website" />
 <meta property="og:url" content="http://myapp.com" />
 <meta property="og:image" content="/ogimage.png" />


* 上記の4タグだけではページの説明が表示されないので以下のタグも使用するのがオススメ
	* og:description ページの説明
* 日本語の解説サイトでは[こちら](http://millkeyweb.com/facebook-ogp/)がわかりやすい

##### og:type
* og:typeに指定できる値はいろいろあるので、[ここ](http://ogp.me/#types)や[ここ](https://developers.facebook.com/docs/reference/opengraph)を参考に当てはまるものを探す。
	* website: Webサイト/ページ
	* article: 「記事」のあるサイト/ページ

##### og:image
* 表示したい画像をサイトに配置し、そのURLを記載する。
* 画像サイズはFacebookが1200x630pxを推奨しているのでそれに合わせると楽([参考リンク](http://www.webtech.co.jp/blog/web/facebook/7399/))

##### 動作確認
* Facebookの発言フォームに貼り付けてみて、プレビュー表示されればOK

#### Twitter向け (Twitter Cards)
* Twitterで同様のは別途[Twitter Cards](https://dev.twitter.com/ja/cards/overview)というものの設定をする必要がある
* Facebook向けogp設定は完了している前提で下記の2つのタグを追加する
  * twitter:card カードの種類(一覧は[こちら](https://dev.twitter.com/cards/types))
  * twitter:site Twitterアカウント 
* metaタグの **name**属性に指定し、content属性に表示させたい値を指定する(こっちはmeta name属性なので注意)

  ``` html
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@Twitterアカウント">

検証ツールにURLを貼り付けサイトの検証を行い、OKならカードの申請を行う。
承認を受けたらURLをツイートして確認する。

favicon

タブのアイコンやブックマークのアイコンに表示される画像のこと
以下それぞれ設置方法を説明
面倒くさい人は飛ばしてこちらまで移動。

favicon (Webブラウザ向け)

タブとかにアイコンを表示するために使われる画像

設置方法

favicon.ico を作成し、ルートフォルダに配置する。
- 16x16, 32x32, 48x48
<head>内にタグを記載

```

より細かく設定

その他サイズ毎にそれぞれ別の画像も指定できる
- favicon-16x16.png: タブ表示用
- favicon-32x32.png: Mac版Safari用
- favicon-96x96.png: Google TV用
それぞれ<head>内に記載

```

apple-touch-icon (iOS向け)

iOS端末でWebクリップ化したりブックマークしたりした時に表示される画像

設置方法

apple-touch-icon.png を作成し、ルートフォルダに配置する。
- 使われる可能性のある最大サイズにしておくとよい(2015/06/29現在だと180x180 ?)
- iOS系の端末はタグの記載がなければブックマーク時にこのファイルを取りに来てくれるっぽい
古いiOS端末(iOS6以前)はアイコンに自動で光沢処理を行うが、それが嫌なら apple-touch-icon-precomposed.png をルートフォルダに配置する。
- が、最近のiOS端末はprecomposedなしでも光沢処理は行わないのでもう気にしなくて良さそう

より細かく設定

その他サイズ毎にそれぞれ別の画像も指定できる
- apple-touch-icon-57x57.png
- apple-touch-icon-60x60.png
- apple-touch-icon-72x72.png
- apple-touch-icon-76x76.png
- apple-touch-icon-114x114.png
- apple-touch-icon-120x120.png
- apple-touch-icon-144x144.png
- apple-touch-icon-152x152.png
ちょっと多すぎない…？
それぞれ<head>内に記載

```

mstile, browserconfig.xml (Windows8 向け)

Windows8やIE11でサイトを「ピン留め」した時のタイルアイコン等を指定する

browserconfig.xml作成方法

browserconfig.xml を配置する。

browserconfig.xml

  <?xml version="1.0" encoding="utf-8"?>
  <browserconfig>
    <msapplication>
      <tile>
        <square70x70logo src="/mstile-70x70.png"/>
        <square150x150logo src="/mstile-150x150.png"/>
        <square310x310logo src="/mstile-310x310.png"/>
        <wide310x150logo src="/mstile-310x150.png"/>
        <TileColor>#da532c</TileColor>
      </tile>
    </msapplication>
  </browserconfig>


#### `<meta>`タグ指定方法

* 以下の`<meta>`タグを指定する。

  ``` html
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

manifest.json (Android Chrome 向け)

AndroidChrome等で「ホームに追加」した際の設定を記載する。
なくても動くっぽいのでなくてもいいかも

作成方法

manifest.jsonを配置する。

nameとiconsを記載しておく
nameは「ホームに追加」した時の名称になる。
144x144のアイコンは必須っぽい

manifest.json

  {
  	"name": "My App",
  	"icons": [
  		{
  			"src": "\/android-chrome-144x144.png",
  			"sizes": "144x144",
  			"type": "image\/png",
  		}
  	]
  }


* 指定したサイズのアイコンをルートフォルダに配置する。
* `<head>`内にタグを記載する。

  ``` html
	<link rel="manifest" href="/manifest.json">

より細かく設定

その他サイズ毎にそれぞれ別の画像も指定できる

manifest.json

 {
 	"name": "My App",
 	"icons": [
 		{
 			"src": "\/android-chrome-36x36.png",
 			"sizes": "36x36",
 			"type": "image\/png",
 			"density": "0.75"
 		},
 		{
 			"src": "\/android-chrome-48x48.png",
 			"sizes": "48x48",
 			"type": "image\/png",
 			"density": "1.0"
 		},
 		{
 			"src": "\/android-chrome-72x72.png",
 			"sizes": "72x72",
 			"type": "image\/png",
 			"density": "1.5"
 		},
 		{
 			"src": "\/android-chrome-96x96.png",
 			"sizes": "96x96",
 			"type": "image\/png",
 			"density": "2.0"
 		},
 		{
 			"src": "\/android-chrome-144x144.png",
 			"sizes": "144x144",
 			"type": "image\/png",
 			"density": "3.0"
 		},
 		{
 			"src": "\/android-chrome-192x192.png",
 			"sizes": "192x192",
 			"type": "image\/png",
 			"density": "4.0"
 		}
 	]
 }




### こんなの面倒くさい人に！

* [RealFavicongenerator](http://realfavicongenerator.net/)を使うと楽

#### 使い方

1. アイコンの元となる画像を作っておく
1. http://realfavicongenerator.net/ を開く
1. 「Select your Favicon picture」から元画像を選択
1. オプションが選べるので画像の見え方を調整
1. 「Generate your Favicons and HTML code」で作成
1. 完成品のzipのダウンロードし、出力されるHTMLコードを控えておく
1. zipを解凍するとfavicon一式が出てくるので、設置したいサイトのルートフォルダに配置する
1. 設置したいサイトにHTMLコードを貼り付け(または作成中のWebアプリに合った形式で記載)
1. 完成

* 同サイトで正しく配置されているかのチェックも可能。

----

## できあがり

* こういう感じになる(宣伝)
  * [ogp](https://twitter.com/lni_T/status/616976542657200128)
  * [favicon](https://ikadb.herokuapp.com/)