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>を作っていきたいですね。