Webサイトのページ内容以外での見た目向上方法(ogp, favicon) - facebook,twitter対応済


## 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属性ではないので注意)

	``` html
	<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アカウント">
```

* [検証ツール](https://cards-dev.twitter.com/validator)にURLを貼り付けサイトの検証を行い、OKならカードの申請を行う。
* 承認を受けたらURLをツイートして確認する。

----

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

### favicon (Webブラウザ向け)

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

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

	``` html
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
```

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

  ``` html
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
```

### 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>`内に記載

  ``` html
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
```

### 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/)