htmlのヘッダとは？headの意味や書き方を解説

文字コードの指定：meta charset

<meta charset="utf-8">

meta chrarset属性は、文字コードの指定をするタグです。 タグの中のchrarsetはキャラクターセットのことで、コンピューターに文字を理解させるために使います。

chrarsetを指定していない場合、海外のブラウザからアクセスした際に、文字化けが起こる可能性があります。そのため日本のWebサイトでは必ず、文字コードの指定が必要です。

記述方法は、上記タグ meta charset=””の「””」の中に、利用する文字コードを入れます。文字コードは、世界的に普及している「utf-8」の他に、 Windowsが標準に採用した「shift-jis」やUNIX系OSで用いられる「euc-jp」などがよく利用されています。

IE用の設定：meta http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge">

meta http-equiv属性は、 InternetExploreを常に標準モードで表示させることを目的に記述します。

IEには互換モードがあり、旧バージョンを使用している場合、旧バージョンに合わせてWebサイトが表示されます。この場合、一部機能が制限されたりレイアウトが崩れたりするため、互換モードになることを防ぐために使われるタグです。

タグの「X-UA-Compatible」は、IEブラウザに対して、どのバージョンで表示させるかを指定するものです。 content=以降の「””」の中に、実際のバージョン名を記述します。

バージョン指定は、「IE=edge」が一般的です。また、古いバージョンで表示させる場合はほとんどありませんが、「IE=8」や「IE=10」のように旧バージョンも指定できます。

レスポンシブ対応：meta name=”viewport”

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

meta name属性のviewportは、表示領域を指定するために記述します。ページの表示領域を、PCやスマートフォン、タブレットなど、さまざまなデバイスに最適化させる目的があります。

viewportの指定は基本的に、「width（横幅）」と「initial（初期倍率）」を設定します。

表示領域を各ブラウザに最適化することを「レスポンシブ対応」と言い、ユーザー視点に立ったサイト作りには欠かせない作業です。

クローラー対応：meta name=”robots”

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

meta name属性のrobotsは、クローラーの動きを制御する際に使用するタグです。クローラーに指示する内容別に、concent=以降の「””」の中に、相応しいタグを入れます。

内容別に覚えておきたい4つのタグを紹介します。

クローラーへの指示は4つまで組み合わせ可能で、組み合わせる場合は、カンマでつなぐ必要があります。また、クローラーの制御が必要ない場合は、記述不要です。

タイトル：title

<title>サイトのタイトル</title>

title要素で記述するタイトルは、body内の「h1」に記述するタイトルではなく、ページそのもののタイトルのことを言います。ここで記述したタイトルは、検索結果のタイトル・お気に入り登録した際のタイトル・タイトルバーに表示されます。

タイトルは、キーワードを含め、見切れないように35文字以内で設定することが望ましいです。また、ユーザーが見ることを考慮し、分かりやすくアクセスしたくなるようなタイトルにします。

ページ説明：meta name=”description”

<meta name="description" content="ページの説明120文字以内で記載">

meta name属性のdescriptionは、検索結果のページ説明に表示される文言を指定するためのタグです。表示される説明文の文字数はデバイスにより異なり、PCは120文字、スマートフォンは80文字です。

調べ物をする際に90％近くのユーザーがスマートフォンを使っていることから、説明文は80文字前後で記述するのが望ましいです。

ユーザーが読む説明文なので、キーワードを含めた分かりやすい文章を記述してください。

ページの正規化：link rel=”canonical”

<link rel="canonical" href="正規化ページのURL">

link要素のcanonicalタグは、類似コンテンツが複数ある際に、検索エンジンにメインのページを認識してもらうために記述するものです。

類似コンテンツがある場合、被リンクが分散されたり、コピーコンテンツと認識されたりすると、ペナルティを受ける可能性があります。

記述の際には類似コンテンツのhtmlに、正規化ページ＝メインページのURLを入れます。リンクは、http://〜URLの最後までの絶対リンクで記載してください。

サイトのタイトル：meta property=”og:site_name”

<meta property="og:site_name" content="サイトのタイトルを記載">

SNSでシェアされた時に表示される、サイト名を指定するタグです。

content=以降の「””」の中に記述するタイトルは、ページのタイトルではなく、Webサイトのタイトルを記述します。

ページのタイトル：meta property=”og:title”

<meta property="og:title" content="ページのタイトルを記載">

SNSでシェアされた時に表示される、ページ名を指定するタグです。

ページ名は、ユーザーの目を引くような文言で、30文字前後で記述するようにすると見やすくなります。

ページの説明：meta property=”og:description”

<meta property="og:description" content="ページの説明を120文字以内で記載">

SNSでシェアされた時に表示される、ページの説明文を指定するタグです。

ユーザーをアクセスを誘導できるように、リンク先のページ内容を分かりやすく説明することが大切です。文字数は最大120文字ですが、SNSによって異なるため100文字前後にまとめるようにしましょう。

ページのタイプ：meta property=”og:type”

<meta property="og:type" content="ページのタイプを記載">

SNSにシェアするページの種類を指定するためのタグです。

content=以降の「””」の中には、サイトトップページの場合は「website」、記事ページの場合は「article」と記述します。

ページのURL：meta property=”og:url”

<meta property="og:url" content="サイトのURL">

SNSにシェアするページのURLを指定するタグです。

content=以降の「””」の中に、シェアするページのURLを記述します。

サイトアイコン：link rel=”icon”

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

link要素のiconタグは、ファビコンといわれるサイトのアイコンを設定する際に使用します。

ファビコンとは、Webサイトのタブ部分やブラウザのホーム画面、お気に入り登録した際に出てくるアイコンです。ファビコンが指定されていないサイトもありますが、サイトのブランディングの一環として設定するのが一般的です。

ファビコンを設定するには、htmlのhead内に上記のタグを記述し、ファビコンとして使う画像ファイルを.ico形式に変換しアップロードします。

​​

スタイルシート読み込み：link rel=”stylesheet”

<link rel="styleshee" href="CSSファイルのURLを記載">

link要素のstylesheetタグは、スタイルシートを読み込むために使用します。

href=以降の「””」の中にCSSのリンクを記述することで、CSSで作成したレイアウトが適用されます。スタイルシートの読み込みは、レイアウトを整えるための大切な情報です。

Javaスクリプト読み込み：script src=””

<script src="スクリプトファイルのURLを記載">

script scr属性は、スクリプトファイルの読み込みを行うために使用します。

スクリプトファイルを読み込むことで、Webサイトに動きをつけることが可能になります。例えば、スライドショーやプルダウンメニューなどの動的なコンテンツや、音声や動画、静止画などを組み合わせたマルチメディアの挿入ができます。

スクリプトを読み込むには、Javaスクリプトコードをテキストエディターに記述し、拡張子.jsとします。.jsファイルを保存したら、上記タグの「””」の中に.jsファイルのURLを入力し、htmlのhead内に記述します。