HTMLの<head>タグは、ウェブページのメタデータを定義するための重要な要素です。
このタグ内には、ページのタイトル、キーワード、スタイルシートのリンク、文字エンコーディングなど、ブラウザや検索エンジンに対してページの情報を提供するための要素が含まれます。
<head>タグはブラウザに表示されるコンテンツではなく、ページの設定や検索エンジン最適化（SEO）に影響を与える重要な部分です。
ページのタイトルやメタデータは、ウェブサイトの品質や検索結果のランキングに大きな影響を与えるため、適切に設定することが重要です。
ここでは、ウェブサイトを作成するためのHTML(Hypertext Markup Language 5)での<head>タグについてご説明します。<head>タグはブラウザーには表示されません。
!DOCTYPE html
<head>
<!DOCTYPE html>
</head>DOCTYPE宣言と呼ばれ、HTMLによるものであることを伝えています。
これがないとブラウザーが、互換モード（Quirks mode)となります。正しいレイアウトにするためブラウザーを標準モード(Standards mode)にするため、この宣言を入れます。
HTML Living Standardでは、DOCTYPE宣言は不要とされています。しかし、DOCTYPE宣言を含めることで、文書の明確性とブラウザの互換性がよくなります。
文字コードを指定：meta charset
<head>
<meta charset="UTF-8">
</head>これは文書の文字エンコーディングという、どのような文字コードを使用し、どのような形式で表示するかを決めるコードです。HTML5で登場した記法です。通常、UTF-8を使用します。
UTF-8は、Unicode Transformation Format-8の略です。
もし、文字コードをシフトJISにしたファイルを作成した場合には、
<head> <meta charset="shift_JIS"> </head>としてください。Windows環境で以前はシフトJISが使われていました。
もし、文字コードをEUCにしたファイルを作成した場合には、
<head> <meta charset="euc-jp"> </head>としてください。EUC-JPはUNIXで以前使用されていましたが、現在はUTF-8になっています。
レスポンシブデザインの対応：meta name=”viewport”
<meta name="viewport" content="width=device-width, initial-scale=1.0">表示領域を各ブラウザに最適化することを「レスポンシブ対応」といい、そのデザインを実現するためのコードです。
widthは横幅、initialは初期倍率を設定します。
widthで、各デバイスに合わせる場合には、「width=device-width」とします。また、200から1000pxの範囲で指定することもできます。
initialは、表示される最初の表示倍率を設定します。標準倍率の1.0では、「initial-scale=1.0」としてください。
使用する言語を指定：html lang=”ja”
<html lang="ja">lang属性で指定できるのは、言語コードのみの場合と、言語と国/地域の組み合わせのパターンがあります。
文章を表示する方法は、言語によって異なります。英語では、単語と単語の間にスペースを入れますが、日本語の単語と単語の間にはスペースは入りません。
ブラウザに使用する言語を認識させることで、きちんと文章が表記されるようになります。
言語コードのみの場合
en：英語ja：日本語fr：フランス語es：スペイン語
言語と国/地域の場合
en-US：アメリカ英語en-GB：イギリス英語ja-JP：日本語（日本）fr-FR：フランス語（フランス）es-ES：スペイン語（スペイン）
言語コードの組み合わせは、国際化されたウェブサイトで重要となります。
メタキーワード：meta name=”keywords” content=”キーワード”
<head>
<meta name="keywords" content="キーワード１、キーワード２、キーワード３">
</head>キーワード同士はコンマ区切りでつなげます。基本的に3から5個が最適とされています。
SEO対策については、Googleの下記のサイトをご覧ください。
タイトル：title
<titile> サイトのタイトル </titile>titleタグの内容は、ウェブブラウザのウィンドウのタイトルバーに表示され、ユーザーはどのページが開かれているかがわかります。
検索エンジンの最適化（SEO）にも使用されますので、適切なキーワードや説明を加えるようにすると、検索エンジンでのランキング向上に寄与します。
タイトルは、キーワードを含めて35文字以内が望ましいとされています。検索されたとき、アクセスしたくなるようなタイトルにしましょう。
ページ説明：meta name=”description”
<meta name=”description” content=”ページの説明”>
検索結果のページの説明に表示される文言を指定します。
表示される説明文はデバイスにより文字数が異なります。PCは120文字、スマートフォンは80文字です。
多くのユーザーは調べものをするときスマートフォンを使用するとの調査があります。キーワードを含めて80文字以内のわかりやすい文章がよいようです。
外部スタイルシートのリンク
<link rel="stylesheet" href="cssファイルのURLを記載">link要素を使用することで、外部のCSSファイルを読み込み、そのレイアウトを整えることができます。
外部スクリプトのリンク
<script src="スクリプトファイルのURLを記載"></script>外部のJavaScriptファイルを読み込むことができます。
Internet Explorer用の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge">metahttp-equivは、Internet Explorerを常に標準モードで表示させるために記述します。
content=” “の中に、バッジョン名を記述しますが、一般的に”IE=edge”とすると利用可能な最上位のモードが使用されます。
自動リンク機能の指定
<meta name=”format-detection” content=”telephone=no,email=no,address=no,date=no”>
スマートフォンでWebページを表示しているとき、電話番号のような記述があると自動的にリンクしてしまうことがないように無効化しておくとよいです。
電話番号以外にも、メールアドレス、住所、日付や時間のリンクが付くのを防ぐことができます。
これを設定しても、
<a href="tel:0120XXX1234">0120-XXX-1234</a>のような、リンクをクリックすることで電話をかけさせる機能が無効になることはありません。
基本的なHTMLファイルの例
example01.html
<html>
<head>
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample01</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>ウェブページのヘッダー</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h2>メインコンテンツ</h2>
<p>ここにコンテンツのテキストや画像を追加します。</p>
</main>
<footer>
<p>© 2023 ウェブサイトの著作権情報</p>
</footer>
<script src="script.js"></script>
</body>
</html>下記のサイトがサンプルの実際のサイト（一部変更しています）です。
