2019年、最も一般的に使える<head>内に必要な要素一覧
この記事はにメンテナンスが行われています。
サイトの特性、環境、ターゲットによって大きく変わってくる<head></head>内の要素ですが、2019年現在においておおよそ一般的なサイト用に必要な最小要素は？というと以下になります。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>サンプルサイト</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="canonical" href="">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:image" content="assets/images/ogpimg.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="fb:app_id" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="">
<meta name="twitter:creator" content="">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="preload" as="style" href="assets/css/style.css">
<link rel="preload" as="script" href="assets/js/bundle.js">
<link rel="stylesheet" href="assets/css/style.css">
</head>上から順に説明をしていきます。まずはページ全体の表示の仕方等を指定していきます。
| 要素 | 説明 |
|---|---|
<meta charset="utf-8"> |
文字コードをUTF-8とします。 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
IEにおいて互換性表示OFFをデフォルトにします。 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
ビューポートの指定を横幅＝device-width、初期ズーム倍率を1.0とします。 |
<meta name="format-detection" content="telephone=no"> |
iOSなどで起こる電話番号に対し機能する自動リンク機能をOFFにします。 |
お次はページが持つメタの指定です。
| 要素 | 説明 |
|---|---|
<title></title> |
ページタイトルを指定します。 |
<meta name="description" content=""> |
ディスクリプションを指定します。2019年現在では100文字〜130文字前後の指定が多いようです。文字数の制限自体はありません。 |
<meta name="author" content=""> |
著作者の名前を指定します。不要な場合は除いても問題ありません。 |
<link rel="canonical" href=""> |
URLの正規化が必要な場合に指定します。 |
OGP関連を一気に指定していきます。
| 要素 | 説明 |
|---|---|
<meta property="og:locale" content="ja_JP"> |
OG用にコンテンツのロケールを指定します。日本語圏向けのサイトの場合はja_JPという様に指定します。複数のロケールに対応している場合はog:locale:alternateを指定し、ロケール分の記述を同じ要領で追加します。 |
<meta property="og:type" content=""> |
ページの種類を次の内（website,blog,article）から選択し明示します。 |
<meta property="og:title" content=""> |
ページタイトルを指定します。 |
<meta property="og:description" content=""> |
ディスクリプションを指定します |
<meta property="og:url" content=""> |
ページのURLを指定します。 |
<meta property="og:site_name" content=""> |
サイトタイトルを指定します。 |
<meta property="og:image" content=""> |
OGP画像を指定します。 |
<meta property="og:image:width" content="1200"> |
OGP画像の横幅を指定します。※省略するとFacebook等で画像取得が出来ない場合があります。 |
<meta property="og:image:height" content="630"> |
OGP画像の縦幅を指定します。※省略するとFacebook等で画像取得が出来ない場合があります。 |
<meta property="fb:app_id" content=""> |
FB APP IDを指定します。 |
<meta name="twitter:card" content=""> |
Twitter用に表示UIを明示的に指定します。小さめのUIのsummaryと大きめのUIのsummary_large_imageが指定可能です。 |
<meta name="twitter:site" content=""> |
サイト用のTwitterアカウントが存在する場合に指定します。 |
<meta name="twitter:creator" content=""> |
コンテンツの制作者のTwitterアカウントを指定します。 |
リソースの読み込みは最低限のCSSとJSの読み込みであれば以下で済みます。
| 要素 | 説明 |
|---|---|
<link rel="shortcut icon" href=""> |
faviconを指定します。 |
<link rel="preload" as="style" href=""> |
スタイルシートのpreloadを行います。 |
<link rel="preload" as="script" href=""> |
スクリプトのpreloadを行います。 |
<link rel="stylesheet" href=""> |
スタイルシートを読み込みます。 |
上記例を雛形に、ページに合わせた要素を追加していくだけで<head>の中身が出来上がります。HTMLのバージョンアップに伴い昨今では意外と様々な指定が出来ますが、中には併用出来る記述もあったり、また記述次第でレンダリング速度を始めページパフォーマンスが変わってくることもあります。
定期的に最適化してスッキリ＆しっかり機能する<head>を作っていきたいですね。