これまで、約20回にわたりホームページの作成方法について見て今更なのですが、HTMLの<head>部分に記入すべき事柄をまとめておきたいと思います。その中には必須のものと、自由に選択できるものがありますので、ぜひ参考になさってください。
HTML内に記入するもの [必須]
以下に、HTML内（最初の行）に必ず書かなければならないものを挙げます。
１．<!DOCTYPE html>
これは、この文章がHTMLであることを示すためのものです。
以前は、この部分に長々と記述する必要がありましたが、現在はHTML５という形式で記述を行なえるので、この一行だけで大丈夫です。
２．<html lang=”ja”>
これは、このHTMLの文章が日本語で書かれていることを示すものです。このタグの必要性について諸説あるようなのですが、一応含めておきます。
HTMLの<head>内に記入するもの [必須]
３．<meta charset=”UTF-8″>
これは、文字エンコーディングというものを指定するためにあります。文字コードというのは、「utf-8」以外にもありますが、あえて別のものに変更する必要もありませんので、このまま記入できます。
なお、この文字コードを指定していないと、日本語で作成したサイトに英語版のブラウザからアクセスしたときに文字化けなどが起こる可能性があるといわれています。
４．<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
これは、Internet Explorer を使用してサイトを見る人たちのための記述です。これが記述されていないとIEでサイトを見た時にスタイルが崩れてしまう可能性がありますので、記述しておきます。
５．<meta name=”viewport” content=”width=device-width,initial-scale=1″>
これは、viewportと呼ばれるPCブラウザやスマフォなどの表示領域を指定するための記述です。上の記述は、「デバイスやブラウザの横幅をホームページ本体の横幅とする」という指定です。
これを指定していないと、ブラウザやスマフォの表示部（画面）の幅がホームページの幅より小さくなったとき、ホームページは収まりきらなくなりますので、横へのスクロールバーが出てきてページを表示しようとします。
しかし、特にレスポンシブ対応を行なうためには、表示部（画面）幅に合わせて、ページがうまく収まってくれないと困りますので、レスポンシブ対応にするためには必須の記述となります。
６．<title> ページのタイトル </title>
これは、そのままなのですが、ページのタイトルを記す部分です。 ここにここに記入したものが、ブラウザの上部にも表示されますし、Googleで検索を行なったときにも、そのページのタイトルとして表示されます。
ユーザーは、他にも多数ある同じようなページから、一つのページを選択し閲覧します。 これは大量に本のある図書館の中で気に入った一冊を見つけるようなものです。ユーザーが最初に目にするのは、そのページのタイトルですので、このタイトルは情報を求めているユーザーにとって、「簡潔であり明確で、興味を引く」ものにしましょう。
７．<meta name=”description” content=”ページ内容の説明”>
これは、そのページの補足となる説明で100文字程度まで記述できます。そして、これはGoogleで検索を行なった際に、タイトルの下に表示されます。
ユーザーは、この説明をもとにページをクリックしますので、必ずその説明とページの内容が一致しているようにしましょう。
HTMLの<head>内に記入するもの [推奨]
８．<link rel=”shortcut icon” href=”画像のURL.png”>
これはページ上部のブラウザのタブの部分にアイコンを表示するためのものです。 多くの企業の場合、会社のロゴなどを入れています。
これは必須ではありませんが、ユーザーにとってほかのページと区別するために便利なものですので、何らかのアイコンを入れておくことをお勧めします。
９．<meta name=”format-detection” content=”email=no,telephone=no,address=no”>
これは電話番号やメールアドレスをブラウザ側が勝手にリンクに設定してしまうことを避けるためのものです。
特にスマフォなど使用しているユーザーのために、電話番号らしきものをページ内で発見すると勝手にリンクと認識してしまうブラウザがあります。しかし、これをされてしまうと、ページの作成者側もユーザー側も意図しないタイミングで電話がかかったり、リンクに飛んでしまうというようなことにもなりかねません。
この記述により、ブラウザ間の差異をなくし、必要な部分にのみ架電機能やリンクを配置することをおすすめします。
HTMLの<head>内に記入するもの [必要な時のみ]
10．<meta name=”robots” content=”noindex,nofollow”>
これは、検索エンジンによるインデックスを避けるための記述です。通常、作成されたページがネット上に公開されると、自動的に検出されユーザーが検索したときに検索結果として表示されるようになります。
しかし、作成中であるとか、既存のページを更新しているため検索結果にも表示してほしくないなどの時は、この記述ができます。
それで、これは必要な時以外は用いないようにしましょう。そうしないと、せっかく作ったページが世間に公開されずに放置されてしまうなんてことにもなりかねませんので・・・。
補足：サンプルコード
念のため、上記のものを記したHTML側のコードを記しておきます。参考になるなら幸いです。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="このページでは初心者でもホームページを作成できるようになるためのお役に立つ情報を提供しています。自分だけのおしゃれなホームページを作ってみませんか。">
<title>はじめてのホームページ | トップページ</title>
<link rel="shortcut icon" href="画像のURL.png">
<link rel="stylesheet" href="css/style.css">
<meta name="format-detection" content="email=no,telephone=no,address=no">
</head>
<body>
<header>
<div class="top-image-area">
<div class="logo-container">
<img src="img/logo2.svg" alt="">
</div>
</div>
</header>
<div class="main">
<div class="main-contents">
<h1>トップページ</h1>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 50,50 100,0"/>
</svg>
</div>
<div class="spaser"></div>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0,0 Q50,50 100,0"></path>
</svg>
</div>
<div class="spaser"></div>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 100,100 0,100"/>
</svg>
</div>
<div class="spaser"></div>
<div class="slanting">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,100 100,0 100,100"/>
</svg>
</div>
<div class="spaser"></div>
<div class="contents">
<h2></h2>
</div>
</div>
<div class="right-navi">
右側のカラム
</div> </div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>