html5 head

普段、コーディングを行う際によく再利用するhtmlファイルの冒頭部分についての備忘録。

最近では特別な指定がない限り、ドキュメントタイプはHTML5で、またスマートフォンやタブレットなどの対応を見越したコーディングを行うことが多いため、faviconとともにスマートフォン用のアイコンの設定やviewportの設定などを含めたサンプルコード。

Code 1 は基本的な記述。

xmlの宣言文については文字コードがUTF−8、UTF−16の場合は省略可能だが、念のため記述。

jQueryについてはGoogleのライブラリから読み込み。バージョンは環境等に合わせて。

※IE6ではxml宣言文の記述があると互換モードで表示される。（というか Code 1 はIE8以下を切り捨てた状態）

Code 2 はCode 1 にいくつか設定を追記したもの。

xmlの宣言文を省略。

5行目はIE用の設定。Google Chrome FrameがIEにインストールされていればGoogle Chrome Frameでレンダリングされ、インストールされていない場合、搭載されている最新のレンダリングとなる。（Google Chrome Frameは開発終了しているため、「,chrome=1」の部分を削除することも検討できる。）

IE8以下のバージョンでもHTML5のコードを認識するよう HTML5 Shiv をGoogleより読み込ませる。合わせて css3-mediaqueries.js もGoogleから読み込み、Media Queries についても対応。

jQuery-uiとCSSの読み込みについても必要であれば記述。

Code 3 はCode 2 にFacebook等で使用するOGP（Open Graph Protocol）の設定を追記したもの。

Namespaceに関する記述はhead要素にprefix属性を使用して記述。

7行目以降のmeta要素にprefixを付けた基本的なpropertyと値をそれぞれ記述。og:typeはトップページにはwebsiteやblog、他のページ（下層ページ等）にはarticleを指定。Object Types、Object PropertyについてはOGPサイトやFacebook Developersサイトなどを参考に設定。

og: imageについてはFacebook用としてであれば、最低600x315px、1200x630px〜（5MB以内）の画像を用意し、URLを記述。この画像はキャッシュされるため画像を変更する場合、新しいURLを設定するなどした方が良い。

fb:admins、fb:app_idはアカウントID、アプリIDを記述。

Code 4 はCode 3 にWordPressなどで出力される設定を追記したもの。

rel="profile"はXFN（Xhtml Friends Network）を使用してリンク先サイトやその対象者との関係性を示すのであれば記述する。

rel="pingback"はpinbackを利用する場合に記述。

rel="author"については必要であれば記述。Google+のアカウントと紐付ける設定例。

RSSフィードについても必要であれば記述を行う。また、 rel="prev"、 rel="next"についてはページ間の前後関係について考慮した上で、必要であれば記述を行う。

rel="canonical"の記述を行い、URLの正規化を行った方が良い。rel="shortlink"については必要であれば記述。

WordPressで出力されるrel="EditURI"、rel="wlwmanifest"は管理画面からしか投稿を行わないのであれば必要ない。バージョン情報も必要ない。

Code 1

Code 2

Code 3

Code 4

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/images/siteicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/images/favicon.ico" />
<title>Example Site Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,keyword5" />
<meta name="description" content="Example Site Description." />
</head>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml: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" />
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/images/siteicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/images/favicon.ico" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
<title>Example Site Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,keyword5" />
<meta name="description" content="Example Site Description." />
</head>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<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 property="og:type" content="website" />
<meta property="og:site_name" content="Example Site Name" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Site Title" />
<meta property="og:description" content="Example Site Description." />
<meta property="og:image" content="http://www.example.com/images/content-thumbnail.png" />
<meta property="fb:admins" content="facebook id" />
<meta property="fb:app_id" content="facebook app_id" />
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/images/siteicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/images/favicon.ico" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
<title>Example Site Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,keyword5" />
<meta name="description" content="Example Site Description." />
</head>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<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 property="og:type" content="website" />
<meta property="og:site_name" content="Example Site Name" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Site Title" />
<meta property="og:description" content="Example Site Description." />
<meta property="og:image" content="http://www.example.com/images/content-thumbnail.png" />
<meta property="fb:admins" content="facebook id" />
<meta property="fb:app_id" content="facebook app_id" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://www.example.com/xmlrpc.php" />
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/images/siteicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/images/favicon.ico" />
<link rel="author" href="https://plus.google.com/google-account-id" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
<title>Example Site Title</title>
<link rel="alternate" type="application/rss+xml" title="Example Site Feed" href="http://www.example.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Example Site Comments Feed" href="http://www.example.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Example Site's Page Comments Feed" href="http://www.example.com/this-page/feed/" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="prev" title="Pre Page Title" href="http://www.example.com/pre-page/" />
<link rel="next" title="next Page Title" href="http://www.example.com//next-page/" />
<link rel="canonical" href="http://www.example.com/category/123/" />
<link rel="shortlink" href="http://www.example.com/?p=123" />
<meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,keyword5" />
<meta name="description" content="Example Site Description." />
</head>