head記述に関すること

head要素内の記述

head要素内には”meta要素”や”link要素”などを使ってページ全般に関係する情報を記述します。

head要素

ページに関係する情報（メタデータ）を記述する。

head要素内に含めることできるメタデータ
<title>	文書（ページ）のタイトル
<base>	ページの全てのリンクにディフォルトのURLとターゲットを指定
<link>	文書と外部リソース間の関係を定義
<meta>	ページの説明、キーワード、文書の作成者、最終更新日、およびその他のメタデータを指定するために使用
<style>	文書のスタイル情報を定義するために使用

title要素

title要素は、ドキュメントのタイトルまたは名前であることを表す要素で、head要素内に１つだけ記述する。

title要素はブラウザのタイトルバーやブックマークや検索エンジンの検索結果などで仕様されます。

<title>Sampleサイト</title>

base要素

base要素にはhref属性でURLの指定、target属性でリンク先ターゲットを指定、どちらか１つ又は両方を指定します。

href属性で指定したURLはそのページの相対URLの基点となり、この属性を指定する場合には、他の要素でURLが指定されているものより先に記述する必要が有ります。

<base href="http://xxxxx.com/" target="_self">

meta要素

meta要素では、そのページに設定する基本情報（文字コード、ページの概要、キャッシュの制御と有効期限や著者名などの情報）を記述します。

属性には下記４つの属性が有ります。

属性	説明
charcet	文字コードの指定
name	そのメタデータが何を表すものかを指定する
http-equiv	指定するとmeta要素はプラグマ指示子となり、ブラウザに文書の処理や扱い方法を指定する。
content	name属性、http-equiv属性で設定されたプロパティ名に対応した内容を指定する。

charset属性で文字コードを宣言

<meta charset="UTF-8">

http-equiv属性の設定

設定できる属性値

属性	説明
content-language	文書の記述言語の指定、HTML5ではlangグローバル属性の使用が推奨
content-type	文字コードの指定
default-style	優先スタイルシートの指定
refresh	ドキュメントの自動更新や再読み込みの指定
set-cookie	Cookieの設定、この指定は非推奨、代わりにHTTPヘッダーを利用する方が良い

ファイルタイプと文字コードの設定

<meta http-equiv="content-type" content="text/html" charset="UTF-8">

この設定は”charset属性での宣言でも良い。

ディフォルトスタイルの設定

<meta http-equiv="default-style" content="style.css">

link要素で複数のスタイルファイルを指定している場合に、link要素のtitle属性値をcontent="title属性値"の様に指定するか、ファイル名を指定することで優先スタイルを指定できる。

リダイレクトの設定

<meta http-equiv="refresh" content="5; url=sample.html">

上記は5秒後に指定URLへリダイレクトします。

この指定による、待機時間0秒のmeta refreshタグやJavaScriptによるリダイレクトはGoogleによると検索エンジンが元ページの評価をダイレクト先に引き継ぐ保証がなく、ドメイン名の変更を伴うサイトの移転やURLの変更には、301リダイレクトを使うのが大原則としている。

但し、301リダイレクトはサーバー側の設定のため使えないことも有り、meta refreshタグやJavaScriptによるリダイレクトが有効な場合もあります。

キャッシュ制御の指定

キャッシュの有効期限を設定

<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

name属性の設定

設定できる属性値

属性	説明
application-name	ウェブアプリケーション名
author	著者名
discription	ページの概要
keywords	ページのキーワード
generator	使用ソフト名
viewport	スマートフォン、タブレット向け指定

ページに関するキーワードの設定

<meta name="keywords" content="キーワード１,キーワード２">

キーワードは半角カンマ（,）で区切り複数設定できます。

但し、キーワードはSEO的にも意味を持たなくなっているので記述の必要性は有りません、むしろ次のdescriptionは検索結果に表示されるスニペットの一部として使用される場合もあり、必要とされています。

ページ内容の説明

<meta name="description" content="ページ内容の説明">

descriptionの文字数は120文字程度にするのが良いとされている、それはGoogleの検索結果に表示されるのが120文字程度のためです。

著者名の記述

<meta name="author" content="山本五十六">

レスポンシブデザインでディバイスの画面幅に合わせる

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

link要素

指定する主な属性

属性	説明
href	リンク先のアドレス
rel	リンク元から見たリンク先の位置づけ
media	リンク先の適用メディアの指定
size	関連づけられた画像などのサイズを指定
type	リンク先のMIMEタイプを指定
target	リンク先のリソースを読み込むフレームを指定

スタイルシートの指定

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

代替スタイルシートを提供する場合

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

属性値に"altemate stylsheet"を使用しtitle属性を指定することで、ブラウザのメニューなどから代替スタイルを選択することができます。また、meta要素でtitle属性値を指定して優先スタイルシートの指定ができます。

head要素内のその他の記述

IEの表示モードを指定

互換モードアイコンが表示されなくなる。
cssやjsなどの外部のファイルへのリンクが記述されている箇所より前に記述する

対応している最新バージョンの表示モードに変更する。
<meta http-equiv="x-ua-compatible" content="IE=edge">

表示モードを「IE 11」に変更する。
<meta http-equiv="x-ua-compatible" content="IE=11">

表示モードを「IE 10」に変更する。
<meta http-equiv="x-ua-compatible" content="IE=10">

複数の表示モードを指定する。その中で対応している最も新しいバージョンを適用する
<meta http-equiv="x-ua-compatible" content="IE=10;IE=9;IE=edge">

IE8以前のHTML5未対応のIEに認識させる方法

要素を生成するJavaScriptライブラリーをダウンロードする。
（ダウンロードはここからhtml5shiv-master.zipをダウンロード）
distフォルダ内のhtml5shiv.jsをサーバにアップロード

head要素内に下記コードを追加します。

<!--[if lt IE 9]>
<script src="パス名/html5shiv.js"></script>
<![endif]-->

印刷時におけるレイアウト崩れといったエラー対策が必要な場合は、html5shiv-printshiv.jsもアップロードして指定しておく。

<!--[if lt IE 9]>
<script src=<"パス名/html5shiv-printshiv.js"></script>
<![endif]-->