head要素の内容のほとんどがブラウザでは視覚化されませんが、コンピュータが読み取るWebページの重要な情報を記述する部分です。ここではhead要素内に記述する代表的な要素を見ていきましょう。
このページの目次
文字コードを指定する
「meta要素」は、Webページの概要・文字コード・キーワードなど文書のさまざまな基本情報（メタデータ）をWebブラウザや検索エンジンに伝えるためのものです。meta要素はコンピューターに伝える情報を属性に指定するだけで要素内容が存在ない空要素です。
meta要素の「charset属性」を使って、HTML文書の「文字コード」を指定する方法が推奨されています。これは文字コードを指定することで文字化けを防ぐためです。
文字コードを指定する方法
<meta charset="文字コード">コンピューター上で「文字」を表現するために割り振られた固有の数値（コード）のことを文字コードといいます。HTMLファイルの文字コードが、それを表示するブラウザの文字コードと異なると「文字化け」が発生します。
HTMLファイルの文字コードは、HTMLを作成したテキストエディタで保存した文字コードになります。一方、ブラウザではmeta要素のcharset属性で指定した文字コードで表示されます。テキストエディタでHTMLを保存した時の文字コードと、meta要素で指定した文字コードが一致していれば文字化けが発生することはありません。
主な文字コードは「UTF-8」、「Shift_JIS」、「EUC-JP」などがありますが、HTML5では、「UTF-8」が推奨されています。
文字コードをUTF-8に指定
<meta charset="UTF-8">文書の概要やキーワードを指定する
「name属性」を使って文書の概要やキーワードなどを設定することができます。name属性でメタデータの種類を指定し、 そのメタデータの具体的な内容は「content属性」に記述します。
指定したメタデータの情報を指定する方法
<meta name="メタデータの種類" content="メタデータの内容">文書の概要を指定する
name属性値を「discription」に指定し、content属性の値にWebページの概要を記述します。ここに書かれた情報は検索エンジンのクローラーに認識され検索結果などにも表示される情報になります。この内容はSEO対策でも重要なものになります。
文書の概要文を指定
<meta name="description" content="Webページの概要を記述">文書のキーワードを指定する
name属性値を「keywords」に指定し、文書に関連するキーワードを記述することができます。「,（カンマ）」区切りで複数のキーワードを入力できます。以前はキーワードが検索エンジンのクローラーに認識されSEO効果がありましたが、現在では検索エンジンでは評価されていないようです。
文書のキーワードを指定
<meta name="keywords" content="HTML・CSSの基礎知,HTML,CSS,head要素,meta要素,title要素,link要素,OGP,文字コード,SEO">name属性に指定できるメタデータの種類は、「description（文書の概要）」、「keywords（文書に関するキーワード）」以外に「author（文書の著作者）」、「generator（ 文書の を生成したソフトウェア名）」などがあります。
SNSと連携させるOGP設定
「OGP」とは、「Open Graph Protcol（オープン・グラフ・プロトコル）」の略で、FacebookやTwitterなどのSNSでWebページのURLがシェアされたときに、このOGPに設定しておいた内容（タイトルやイメージ画像、説明文など）がタイムライン上に表示される仕組みです。
SNSを閲覧していると、タイムラインに誰かがシェアしたページや記事が表示されるときがあります。その時にページの概要や関連する画像が一緒に表示されていたら、興味を持ってサイトを訪れてくれることがあるかもしれません。そのようにSNS上でユーザーへの訴求力を高めるためにもOGPは非常に重要な設定になります。
OGPの基本的な設定は以下のものになります。
SNSと連携させるOGP設定
<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:image" content="ページのアイキャッチ画像のURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">OGPを使用することを宣言する
ページでOGPを使用することを宣言するため、head要素にprefix属性を指定します。
head要素ではなく、html要素にprefix属性を指定することも可能です。
OGPの使用宣言
<head prefix="og: https://ogp.me/ns#">ページURLを指定
OGP設定をするWebページのURLを指定します。URLは相対パスではなく必ず絶対パスで記述をします。
次の例は、このページのURL設定です。
OGP設定：ページURL指定
<meta property="og:url" content="https://shunjitabata.com/head/">ページタイプ（種類）を指定
表示するページの種類を指定します。トップページの場合は「website」、記事ページなど、TOPページ以外の場合は「article」を指定します。
トップページの場合の指定です。
OGP設定：トップページの場合のページタイプ指定
<meta property="og:type" content="website">記事ページやトップページ以外のときの指定です。
OGP設定：トップページ以外の場合のページタイプ指定
<meta property="og:type" content="artcle">ページのアイキャッチ画像のURLを指定
記事のサムネイル画像としてシェアされたときなどに表示する画像を指定します。ページ内で使用している画像である必要はなく、OGP用の画像のURLを記述してもかまいません。画像の指定方法は必ず絶対パスで指定します。
Facebookは画像サイズを1200ピクセル×630ピクセル、比率で「1.91：1」にするように推奨しています。
OGP設定：アイキャッチ画像のURL指定
<meta property="og:image" content="https://shunjitabata.com/images/ogp_image.png" />ページのタイトルを指定
ページのタイトルを指定します。title要素で設定したタイトルと同様のものを記述するのが一般的ですが、別のタイトルを設定すると、ここで設定したタイトルが優先されて表示されます。文字数は20文字以内が適切とされています。
OGP設定：ページのタイトル指定
<meta property="og:title" content="head要素の中に入る要素 | HTML・CSSの基礎知識">ページの説明文を指定
ページの説明文を記載します。この項目は任意の項目になりますが設定しておくとよいでしょう。通常、meta要素で指定している「name=”description”」の内容と同じ内容で問題はありませんが、文字数は80～90文字程度が最適とされています。
OGP設定：ページの説明文指定
<meta property="og:description" content="head要素の内容はコンピュータが読み取るWebページの重要な情報を記述する部分です。ここではhead要素内に記述する代表的な要素を見ていきましょう。">ページのタイトルを指定するtitle要素
「title要素」はHTML文書のタイトルを指定するものです。Webブラウザのタイトルバーやページのタブに表示されます。
ページのタイトルを指定する方法
<title>ページのタイトル</title>
ページのタイトルを指定するtitle要素
<title>head要素の中に入る要素 | HTML・CSSの基礎知識</title>title要素は非常に重要な要素です。検索エンジンではtitle要素に文書内の重要なキーワードが含まれているかを検索順位の決定要因の一つとしているといわれています。title要素は検索結果ページに表示されるタイトルでもあります。検索ユーザーは表示されたタイトルによって、ページにアクセスするかどうかを判断しています。そのためtitle要素に設定するテキストは人間が見てもコンピュータが見てもわかりやすく簡潔な内容であることが大切です。
外部ファイルを参照するlink要素
「link要素」は他の外部リソース（外部ファイル）とHTML文書を関連付けるときに使用します。「href属性」で読み込むファイルのURLを指定します。また、「rel属性」も必須属性になります。rel属性は「relation」の略で、「レル」と読みます。rel属性は、現在のHTML文書から見て、関連付けるリソース（外部ファイル）がどのような関係をもつのかを指定します。
外部ファイルを参照するlink要素
<link href="外部の参照ファイルのURL" rel="外部ファイルとの関係性を表すキーワード">外部のスタイルシート（CSSファイル）を読み込む時にもlink 要素を使用します。「href属性」で読み込むスタイルシートファイルを指定し、「rel属性」に「stylesheet」を指定することで文書に適用するスタイルシートとして関連付けることができます。
link要素で外部CSSファイルを読み込む
<link href="style.css" rel="stylesheet">