今回はHTMLの <head>～</head>内に 記述する情報で最低限記述しておきたいものをご紹介します。
目次
headタグとは
headタグは、メタ情報やブラウザへの指示などを記述する為のタグです。
コンピューターがサイトを読み取る上で重要な情報になります。基本的にブラウザのウィンドウに表示されない情報です。
HTMLは大きく分けると<head>と<body>のエリアに分かれています。それぞれのタグ内に記述する情報は下記のとおりです。
headタグ内に記述する情報
title : ページタイトルを記述
link : 外部ファイルの読み込み ・空タグ
script : 外部ファイルの読み込み , JavaScriptを記述
headタグ内に記述できる情報は色々ありますが、これだけは必ず記述しておきたいというものをご紹介します。
- 文字コードの指定
- IE最適化の設定
- ページタイトルの指定
- viewportの設定
- ページ概要の指定
- 外部ファイルの読み込み
文字コードの指定
<meta charset="utf-8">
文字化けを防ぐ為に 文字 コード（エンコード）を指定します。
日本語の場合には、「UTF-8」「Shift_JIS」「EUC-JP」等がありますが、特別な理由がない限りUTF-8を指定します。
IE最適化の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorer(IE)には通常表示の標準モードと、過去のバージョンで表示させる互換機能があり、互換モードで表示されると、ページのデザインが崩れてしまう可能性があります。
このメタ要素を記述することで、常に標準モードで表示させることができます。
ページタイトルの指定
<title>ページのタイトル</title>
<title>~</title>の中に書いたタイトルがwebブラウザの左上、タブ部分に表示されます。
viewportの設定
<meta name="viewport" content="width=device-width,initial-scale=1">
サイトをレスポンシブにする場合に記述します。この記述をすることで、スマートフォンからの閲覧にも対応したウェブサイトにすることができます。
ページ概要の指定
<meta name="description" content="ページの内容を表す情報">
ページの内容の要点を書きます。Googleの検索結果に表示される場合があります。文字数の目安はSEO対策的には120～200文字程度が好ましいといわれています。
外部ファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL"> <script src="JavaScriptファイルのURL"></script>
外部のCSSファイルやJavaScriptファイルを読み込むために記述します。
<script>タグは終了タグを忘れないようにしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字エンコード -->
<meta charset="UTF-8">
<!-- IE最適化 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページタイトル -->
<title>ページのタイトル</title>
<!-- レスポンシブ対応するための記述 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- デスクリプション：ページの説明 -->
<meta name="description" content="ページの内容を説明する文章">
<!-- スタイルの読み込み -->
<link rel="stylesheet" href="cssファイルのURL">
<!-- JavaScriptファイルの読み込み -->
<script src="JavaScriptファイルのURL"></script>
</head>
<body>
</body>
</html>テンプレートを作っておくと便利かと思います。それでは、最後までご覧頂きありがとうございます。
