はじめに
HTML文書のhead部分は、ほとんどwebブラウザには表示されない部分ですが、webサイトの仕様をコンピューターが読み取るために非常に大事な情報です
1. meta（メタ）の役割
meta(メタ)要素とは「ページの情報」定義する要素です。
HTMLにおけるメタデータは、その文書に関する様々な情報を意味します。
簡単に言うと、検索エンジンやブラウザ、ソーシャルメディアなどのシステムに向けて書きます。
そのためwebページに見に来てくれた人がメタタグを見ることは、ほとんどありません。
書いておきたい・知っておきたいメタタグ
文字コード
<meta charset="UTF-8">
文字を指定するために書きます。日本語のサイトであれば
タグのすぐ下に必ず書きましょう。ページの概要を表す
<meta name="description" content="ページの概要をあらわす"
meta description(メタディレクション)は、結果画面でのクリック率を上げることが基本的な役割です。検索エンジンと検索ユーザーへ、ページの概要を伝えるためのタグとなります。内容はどのように記述しても構いませんが「この記事にはこのような内容が書かれています」という簡単な情報がいいでしょう。Google検索結果に表示される文字数や重要性は常に変動しています。
レスポンシブデザイン用（スマホ対応）
<meta name="viewport" content="width=device-width, initial-scale=1">
スマホやタブレットでも表示が最適になるように書いておく必要があります。
この指定を記述してスマホ向けのCSSを書いていくことによりスマホ向けのwebサイトにすることができます。
IEを最適化する
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorer(IE)ではwebサイトを表示する際に通常表示の「標準モード」と過去のバージョンで表示される「互換モード」という機能があります。閲覧者がわからないまま互換モードで閲覧しているとページのデザインが崩れてしまっていたりする可能性があります。このメタタグを記述すると常に標準モードで表示されることができます。古いバージョンのIEを利用しているユーザーに配慮した記述です。
他の言語に翻訳をしない
<meta name=“google” content=“notranslate”>
英語のサイトなどを閲覧すると「翻訳しますか？」と表示されることがあります。
このメタタグを記述していると翻訳オプションが表示されなくなります。
SNSとの連携 OGP
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="サムネイルとして表示する画像">
<meta property="og:type" content="ページの種類">
OGPとは「Open Graph Protocol」の略です。
FacebookやTwitterなどのSNSでweb ページがシェアされた際にそのページのタイトルやURL、アイキャッチ画像などを指定した通りに表示させる仕組みです。
2.title（タイトル）要素
<title>ページのタイトル</title>
webページにはそれぞれのページにタイトルが存在します。
このタイトルはbody要素のなかの要素とは別もので、webブラウザのタイトルバーやタブの部分に表示されます。
検索結果にも表示される部分なので分かりやすく簡潔な表記で指定しましょう。
3.link（リンク）要素
<link rel="stylesheet" href="ファイルの場所・ファイル名">
link要素の用途は、外部ファイルで準備したCSSファイルを参照する際に使用します。
linkタグを指定する場合、href属性とrel属性が必須です。
rel属性の値にリンクタイプを指定することで文書との関係を設定します。
href属性の値にはURLを指定します。
CSSファイルを参照する場合rel属性にstylesheetを指定しhref属性にCSSのファイル名を指定します。
style要素でCSSを直接指定しよう
<html>
<head>
<meta name="Content-style-Type" content="text/css">
</head>
<body>
<p style="color: #000000; ">文字色の指定</p>
</body>
</html>
style要素はCSSの記述を直接指定できます。
link要素でCSSを外部参照した場合には他のページにも使えますがstyle要素で指定した場合「記述したHTML文書のみ」の適用となります。
style属性によるスタイル指定をする場合には、文書内で使用されるスタイルシートがCSSであることをブラウザなどにしらせるためにhead要素内にmeta要素を記述してスタイル言語の値にはtext/cssを指定します。
ブラウザによって自動的に判断されますが誤動作を避けるために記述します。
おわりに
必須だからとコピペするのではなく、きちんと意味を理解してからコードを書くとしっかり身に付きます
