本ページはHIGA TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。

2019年、最も一般的に使える<head>内に必要な要素一覧

2019年、最も一般的に使える<head>内に必要な要素一覧

HIGA TSUBAS

Frontend Engineer HIGA TSUBAS

1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。

サイトの特性、環境、ターゲットによって大きく変わってくる<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>を作っていきたいですね。

RECOMMEND 関連する記事