HTMLのheadタグに書く内容

2023年9月30日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

HTMLファイルのheadタグには何を書けばよいのですか？

先生

HTMLのheadタグ内に書く内容について説明します

HTMLのheadタグについて

HTMLではheadタグ内にページの情報などを記述しますが、書くことが多くて覚えにくいです。

この記事では、HTMLのheadタグに書く内容について説明します。

この記事で分かること

HTMLのheadタグ内に書く内容とその意味

HTMLファイルの構成

HTMLファイルの構成は以下のようになっています。

HTML5はすでに廃止されていて、HTMLの現在の規格はHTML Living Standardです。（両者の内容はほとんど同じです。）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ページの情報（画面に表示されない） -->
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <!-- 画面に表示する内容 -->
  </body>
</html>

先頭行は宣言で固定の内容

htmlファイルの先頭行はHTMLであることの宣言で、常に<!DOCTYPE html>と書くことが決まっています。

html タグですべての内容を囲む

宣言を除いたHTMLの全ての内容を<html>と</html>で囲みます。

日本語のページではhtmlの開始タグは、<html lang="ja">と書きます。

head タグ内にページの情報などを書く

<html>の直後に<head>と</head>で囲んで、ページの情報を書きます。

body タグ内にページの内容を書く

<head>の次に<body>と</body>で囲んで、ページの内容を書きます。

HTMLのheadタグ内に書く内容

<head>内に書く、主な内容は以下になります。

ページのタイトル
ページのアイコンファイルやCSS、JavaScriptファイルへのリンク
ページに関するその他の情報

headタグの例

<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- ① 文字コード -->
        <meta charset="utf-8" />
        <!-- ② 表示領域 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- ③ ページのタイトル -->
        <title>ページタイトル</title>
        <!-- ④ ページの説明 -->
        <meta name="description" content="ページの説明" />
        <!-- ⑤ アイコン -->
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <!-- ⑥ CSS -->
        <link rel="stylesheet" href="css/style.css" />
        <!-- ⑦ JavaScript -->
        <script src="js/main.js" defer></script>
    </head>
    <body>
    </body>
</html>

文字コード

文字コードは、コンピューターが文字を扱う時の規格です。

最近のHTMLでは、UTF-８という文字コードを使うことがほとんどなので以下のように記述します。

<meta charset="utf-8" />

既存のサイトに追加するページの場合は、既存の他のページと同じにすれば問題ありません。

このファイルがどの文字コードで書かれているのかは、ブラウザに早く伝えた方がよいので一番最初に書きます。

表示領域

ビューポイント（viewport）はWEBページの表示サイズや表示倍率の設定です。

WEBサイトを訪れる人のPCやスマホの画面サイズはさまざまですが、どの場合でも見やすく表示されるように以下を書きます。

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

width(幅)はdevice-width(ブラウザの幅)で、initial-scale(ズーム倍率の初期値)は1(等倍)にするという意味です。

ページのタイトル

WEBページのタイトルを<title>と</title>で囲んで記述します。

ページの説明

WEBページの内容を以下のように簡潔に記述します。

<title>WEBページのタイトル</title>

Googleなどの検索結果でページの説明として表示されるので、分かりやすく書いておいた方がよいと思います。

アイコン

WEBページのアイコンファイル（favicon.ico）を記述します。

faviconは必ず設定する

favicon.icoを読み込まないと、ウィンドウタイトルや検索結果のアイコンが用意されているものになり、かなり悪目立ちしますので、必ず設定するようにします。

最低限の対応の場合

この対応だけでも、主要なブラウザでアイコンが表示されるようになります。

WEBサイトのルートフォルダにアイコンファイルfavicon.icoを置いて以下のlinkタグを書きます。

<link rel="icon" href="/favicon.ico" />

icoファイルは普段あまり使わない形式ですが、以下のようなサイトで簡単に作成できます。

Favicon.io – The Ultimate Favicon Generator (Free)

PNGやGIFの画像ファイルもアイコンに使えます

icoファイル以外にPNGやGIFの画像ファイルもアイコンファイルとして使えます。

その場合のlinkタグは以下になります。

icoファイル以外の場合、type属性でファイル形式を指定する必要があります。

<!-- PNGファイルの場合 -->
<link rel="icon" type="image/png" href="./favicon.png">
<!-- GIFファイルの場合 -->
<link rel="icon" type="image/gif" href="./favicon.gif">

幅広い環境に対応する場合

ほぼ全ての環境で、きれいなアイコンファイルが表示されるように対応するには、以下のように記述した上で対応するファイルのアップロードが必要です。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

全部の書き方を理解して覚えて、それぞれのアイコン用ファイルを用意するのは手間なので、以下のようなサイトを利用するのがおすすめです。

RealFaviconGenerator.net

Favicon Generator for perfect icons on all browsers The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.

ページで使用するCSSファイルへのリンク

WEBページで読み込むCSSファイルのパスをlinkタグで書きます。

<link rel="stylesheet" href="css/style.css">

属性	説明
rel	CSSの場合は”stylesheet”
href	CSSファイルのパス

ページで使用するJavaScriptファイルへのリンク

WEBページで使用するJavaScriptのパスをscriptタグで書きます。

WEBページの読み込み途中にJavaScriptが動かないようにdefer属性を付けることが多いです。

<script src="js/main.js" defer></script>

属性	説明
src	JavaScriptファイルのパス
defer	HTMLの内容が全て読み込まれた後、HTMLに書かれた順序でJavaScriptを実行する

その他

必要に応じてその他のタグを追加します。

よく使われるものとしては以下になります。

検索エンジンに対しての設定

Googleなどの検索エンジンのクローラ（自動巡回プログラム）の動きを制御したい場合に書きます。

何も書かない場合検索エンジンに登録されて検索結果に表示されます。

<meta name="robots" content="noindex,nofollow">

属性	説明
name	固定で”robots”
content	検索エンジンのクローラに対する制御

以下の公式ページに書き方が載っています。

Google for Developers

Robots meta タグ、data-nosnippet、X-Robots-Tag の設定 | Google 検索セントラル | ドキュメント | G… 検索結果での表示を調整できる meta robots（robots メタタグ）、X-Robots-Tag や data-nosnippet について設定方法や実装例を含めて紹介します。

SNS用の設定

TwitterやFacebookなどのSNSで、WEBサイトがシェアされた時のSNS側での表示内容を設定します。

SNSでシェアされた時にSNS側できれいに表示されるためには記述しておく必要があります。

OGP（Open Graph Protocol）という規約で定められた書き方に加えて、各SNSが独自に定めた書き方があります。

電話番号などが自動でリンクにならないようにする

スマホのブラウザの場合、WEBページに電話番号だと認識される内容が書かれていると、自動的に電話機能へのリンクが作成されます。

こういった動きをmetaタグのformat-detection属性で無効にすることができます。

自動リンクを無効にしても、aタグのリンク<a href="map.html" >0000-00-0000</a>は全て有効のままです。

<!-- 電話番号の自動リンクを無効にする場合 -->
<meta name="format-detection" content="telephone=no" />
<!-- 電話番号、メールアドレス、住所の自動リンクを無効にする場合 -->
<meta name="format-detection" content="telephone=no, email=no, address=no">

属性	説明
name	固定で”format-detection”
content	自動リンクを無効にしたい項目・telephone（電話番号）・email（メールアドレス）・address（住所）

よかったらシェアしてね！

URLをコピーしました！