head要素とメモ

あれ書いたっけ？これ書いたっけ？となりがちなので備忘録として。

全体コード

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="・・・">
  <meta name="format-detection" content="telephone=no,address=no,email=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="robots" content="noindex,nofollow">
  <title>・・・</title>
  <link rel="shortcut icon" href="・・・" >
  <link rel="stylesheet" href="・・・">
</head>

<meta charset="utf-8">

文字コードの指定。shift_jisなんかもよく見る。

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

携帯端末で表示した場合の画面サイズの指定。
width=device-width … 幅をデバイスの幅にする。
initial-scale=1.0 … 初期表示時のスケールを等倍にする。

<meta name="description" content="・・・">

サイトの説明を記述。検索結果にも引用され、SEOにも影響する。
120文字程度におさめることが良いとされている。
空白や未設定の場合、検索エンジンはページ内のテキストやalt属性の値を抽出して検索結果に表示する。

<meta name="format-detection" content="telephone=no,address=no,email=no">

携帯端末において、電話番号やメールアドレスなどに推測し得る文字列に自動的にリンクが付与される機能を制御する。
制御をしない場合は記載をしなければよい。

<!-- メールアドレスのみ制御 -->
<meta name="format-detection" content="email=no">

※W3Cには記載のない情報

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

IEの古いバージョンでの互換表示を防ぐ。

<title>・・・</title>

ページのタイトルを指定する。
検索結果やブックマークにも引用される。
30文字以内におさめることが良いとされている。

<link rel="shortcut icon" href="・・・" >

faviconを指定する。
タブバーだけでなく、ブックマークや携帯端末でホーム画面に追加した際にも使われる。

<link rel="stylesheet" href="・・・">

CSSの読み込み。