head内に書くこと多すぎて嫌になる昨今。
あれがない、これがない、あれどう書くっけとならないためのエントリー。
気が向いたら追加したりしなかったりする予定。

viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

レスポンシブとかスマホサイトのとき必須。
拡大・縮小はしたいからこの設定のところが多い気がする。

アプリっぽく拡大縮小しないでほしい場合はこれ↓

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

body {
  -webkit-text-size-adjust: 100%;
}

CSS

<link rel="stylesheet" href="normalize.css">

CSSのリセットはnormalize派。
compassを使ってるので、最近は一つのcssにまとめてるのであんまり書かないけど。

あとブレイクポイントはこんなかんじ…？
（これも環境がコロコロ変わるから頻繁に調べてるような…）

スマートフォン

縦(portrate) 320 ～ 414px
横(landscape) 480 ～ 736px

タブレット

縦(portrate) 600 ～ 768px
横(landscape) 966 ～ 1028px

jQuery

CDN版

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> (window.jQuery || document .write('<script src="js/jquery-1.11.2.min.js"><\/script>')); </script>

CDNで読み込んだ方が早いっぽいので、Googleのを読み込んでる。
一応読み込めない場合のことも考えてサーバーにも圧縮版のファイルをup。
(jQuery-1.11.2.min.jsのダウンロードはここから)

Googl CDN
jQuery CDN
（※該当のバージョンがなければSee all versions of jQuery Core.の方をチェック。）

1.xと2.xを使い分け版

2.0以降はIE8サポート外だけど、その分軽量なので、少しでも軽くしたいってときに。

<!--[if lt IE 9]>
    <script src="jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.1.3.js"></script>
<!--<![endif]-->

バージョンによってサポートしてないあれやこれやがあるので、あんまり使わない方がいいかも。
ちなみに対応はこんなかんじ

IE6～ → ～1.11×
IE8～ → compact 3.×
IE9～ → 2.× / 3.×

高速化

</head> でなくて、</body> 直前に。
async属性なるものもあるので、これ使うといいかも
（最近知ったのでまだ使ったことはないけど）

<script src="script.js" async></script>
<script src="script.js" defer></script>

async...非同期で読み込み、読み込み終わり次第実行する
defer...ページの読み込み完了後スクリプト実行

参考:http://d.hatena.ne.jp/Syunpei/20091006/1254791382

アクセス解析

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-Y', 'example.com');
  ga('send', 'pageview');
</script>

だいたいこんな感じ
このあたりコロコロ変わりすぎだと思う…

SNS

シェアボタンの生成はここから

OGimage

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="http://任意のURL">
<meta property="og:image" content="http://任意のURL/og_image.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="fb:app_id" content="任意のID">

app_idは面倒だけどとっておいた方が良さげ。

I8以下対応用

UA偽装

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

CSSハック

<!--[if lt IE 7 ]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->

下位ブラウザのCSSハック度忘れしても大丈夫なようにあると便利。
最近ではせいぜいIE8位対応が主流になってきてるのでいらないかもだけど。

IE8対応であってもHTML5で書きたい

'<!DOCTYPE HTML>'くらいでhtml5タグを使わなかったらいいんだけど、あとで、やっぱりIE8も…とか言われてしまった場合嫌々追加するときはこれ。

selectivizr-min.js

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->

CSS3も使ってるという場合はこれ。

ダウンロード
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

対応表
http://fmbip.com/litmus/

html5.js

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="alternate" media="only screen and (max-width: 640px)" href="sp/" />

ファビコン（※お好みで）

<link rel="shortcut icon" href="/favicon.ico">

表示される画像サイズは16×16px
32×32pxで作っておけばいいかなというかんじ

apple-touch-icon（※お好みで）

<link href="http://URLが入ります/apple-touch-icon.png" 
rel="apple-touch-icon">

画像サイズは256×256px位
Androidではフルパスでないと確認できなかったり、ベーシック認証がかかっていると確認できなかったりするので注意。

browserconfig.xml（※お好みで）

Create a Windows 8.1 tile for your site - Build My Pinned Site - Microsoft Internet Explorer

Windows8のIE11のライブタイルで、ユーザーがサイトをピン留めするときに自動的に読み取られるファイル。
画像サイズが4つ分（128×128、270×270、270×558、558×558）必要
558×558以上でなおかつ高さ270でもトリミングしやすいファイルを用意するとよさげ

電話番号がSkypeの番号ボタンになるのを防ぐ（※お好みで）

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="http://任意のURL">
<meta property="og:image" content="http://任意のURL/og_image.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="fb:app_id" content="任意のID">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css">
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-Y', 'example.com');
  ga('send', 'pageview');
</script>
</head>

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> (window.jQuery || document .write('<script src="js/jquery-1.11.2.min.js"><\/script>')); </script>
<script src="js/scripts.js"></script>
</body>
</html>

環境にもよるけど、だいたいこんなかんじになるんじゃないかと。

HTMLのテンプレート的なの