【テンプレコード付き】HTMLのheadとは？どんなことを書くのがベスト？

headとは？

htmlでwebサイトを作成する時のコードを大きくわけると次のように「headタグ」と「bodyタグ」に分かれています。そしてそれぞれの役割は以下のようになっています。

headタグはなぜ書くの？

headに書くタグは2種類

headに書くタグは大きくわけて「metaタグ」と「linkタグ」の2種類です。

metaタグにはそのwebサイトの「文字コード」「説明文」「作成者」などを書き、linkタグには外部のwebページとの関係性やcss・javascriptファイルの読み込み先などを書きます。

今回はその中でも用途に応じた「metaタグ」と「linkタグ」の使い方を解説していきます。

ページの情報に関するmetaデータ

主にwebページの情報に関するmetaデータを書くためのタグです。この部分はheadに書く情報の中でも基本的な部分です。

文字コード

webページの文字コードを指定するためのmetaタグです。

<meta charset="utf-8">

文字化けを防ぐために必ず書きましょう。charset="〇〇"には他にも「Shift_JIS」「EUC-JP」を指定することができますが、html5での推奨の「UTF-8」を書いておけばOKです。

ページタイトル

そのページの内容を一言で表したものをtitleに記述します。

<title>ページのタイトル</title>

titleに書いたテキストは検索結果やブラウザのタブ名に使用されます。

Goolgeの検索結果に表示されるタイトルの文字数には制限があるため、日本語で30〜33文字以内で作成することが理想的です。

titleがシンプルすぎるからといって検索順位が下がるということはありません。大切なのはいかに的確にページの内容を伝えるかです。

説明文

そのwebページの概要をdescriptionに書きます。

<meta name="description" content="webページの概要">

<meta name="description" content="〇〇">に書いたテキストは検索結果の説明文に使用されます。こちらもタイトル同様表示される文字数が約120字と制限があるので説明文を全て表示したい場合は意識してみましょう。

120文字を超えたからといって検索順位が下がるということはなく200文字〜300文字のdescriptionでも上位表示しているwebサイトは多くあります。大切なのは「簡潔かつ正確にページの概要を書く」ということです。

よく解説されるけど「実は不要」なタグ

今でも多くの参考書や記事で紹介されるタグの中で「実は書く必要がないタグ」というものを紹介します。

外部ファイルを読み込む

cssとjavascriptのファイルを外部から読み込む場合はhead内に読み込むファイルの情報を記述します。

cssファイルを読み込む

cssファイルを外部から読み込む場合にはlinkタグを使います。

<link rel="ファイルの種類" href="ファイルの場所">

1. rel属性にはhref属性で読み込むファイルの種類が何かを記述します。
2. href属性にはファイルのパス（ファイルのURL）を書きます。

たとえば「style.css」というcssファイルを外部から読み込む場合は
<link rel="stylesheet" href="style.css">と書きます。

cssの読み込み方法はこちらの記事で詳しく解説しています。

jsファイルを読み込む

javascriptのファイルを読み込む場合はscriptタグを使用します。

<script src="ファイルの場所"></script>

注意したいのは先ほどのlinkタグと違い閉じタグ（</script>）があるという点です。

src属性にはjsファイルのファイルパス（URL）を書きましょう。

たとえば、script.jsというファイルなら<script src="script.js"></script>と記述します。

Googleのロボットに指示するためのタグ

metaタグを使うことによって、webページをどのように検索結果に表示するかなどをGoogleのロボットに指示することができます。

Googleの検索結果に出ないようにする

metaタグを使うことでwebページをGoogleの検索結果に表示しないようにできます。

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

noindexを書くことでGoogleの検索結果に表示されなくなりますが、あくまで検索結果に表示されないだけなのでURLを知っていればwebで閲覧は可能です。

リンクを辿らないようにする

<meta name="robots" content="nofollow">

Googleはページについているリンクを辿ることで、そのページを認識し順位付けの評価をしています。

headタグ内にnofollowがあることでそのページにある全てのリンク先のページを辿らないように指示することができます。

noindexとnofollowを一緒に書く

noindexとnofollowは一緒に書くことができます。

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

noindexしか書いていない場合は検索結果に表示されないだけでそのページにあるリンクをGoogleは辿ります。

逆にnofollowしか書いていない場合はリンクは辿りませんが検索結果には表示されるようになってしまいます。

検索結果に表示せず、リンクも辿らないようにGoogleに指示する場合は「,（カンマ）」で区切ってnoindexとnofollowを両方書きます。

他のページとの関係性を示すタグ

Goolgeに誤解のないように他のwebページとの関係性を説明することで、正しくページの評価をしてもらう必要があります。

分割ページであることを伝えるタグ

<link rel="prev" href="前のページURL">
<link rel="next" href="次のページURL">

上記の形式で前後のページのURLを記述します。たとえば3ページに分割されたwebページがあるとします。その場合は

1. 1ページ目に<link rel="next" href="2ページ目URL">
2. 2ページ目に<link rel="prev" href="1ページ目URL">と<link rel="next" href="3ページ目URL">
3. 3ページ目に<link rel="prev" href="2のページURL">

とhead内に記述します。「そのページと直接繋がっているページのURLを書く」と覚えておけば迷いません。

スマホ用ページの存在をGoogleに知らせる

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/sp/" />

PC用のページのhead内に上のような形式でスマホ用ページのURLを書きます。media〜の部分は「ブラウザサイズが640px以下（スマホはだいたい640px以下なので）の時はこっちのURLのページを表示してね」という意味です。

<link rel="canonical" href="http://example.com/" />

続いてスマホ用のページのheadにも上の形式でPC用ページのURLを書きます。

複数ページの評価をまとめる

http://example.com/second.htmlというページの内容がhttp://example.com/first.htmlというページと内容がほぼ同じだとします。first.htmlのページを正しいページとして評価してほしい場合、second.htmlのheadに以下のように書きます。

<link rel="canonical" href="http://example.com/first.html" />

これにより「second.htmlは重複コンテンツではなく、正しいページはfirst.htmlです」とGoogleに伝えることができます。

ユーザーのために設定したほうがいいタグ

ここで紹介するタグは必須ではありませんが、設定をすることでよりwebサイトを使いやすくすることができるのでぜひ設定しておきましょう。

IEで互換表示させない

InternetExplorerには「互換表示」と「標準モード」の2つの表示方法があります。ユーザーの環境によってどちらで表示されるかことなり、「互換表示」のレンダリングの場合レイアウトが崩れてしまうことがあります。

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

上記のコードで強制的に「標準モード（最新のレイアウトに対応できる）」でwebサイトを表示させることができます。

ファビコンを設定する

<link rel="shortcut icon" href="ファイル名.ico">

ファイル名の拡張子が少し特殊で「.ico」となっているところに注意しましょう。

作成については、ファビコンにしたいpngファイル（背景が透明）を用意すれば「ファビコン favicon.icoを作ろう!」のようなサイトでico形式のファイルに変換することができます。

webクリップアイコンを設定する

<link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">

設定する時は以下のポイントに注意してください。

1. 57px〜152pxの正方形の画像を用意する
2. 画像の背景は透明にしないこと
3. 角丸のデザインはスマホが勝手に処理してくれるので不要
4. 「apple-touch-icon-precomposed.png」という名前にする

viewportを設定する

viewportはスマホサイトでのサイトの見え方を決めるための重要な概念です。

たとえばレスポンシブサイト（ブラウザ幅によってコンテンツの幅が変わる）であれば必ず以下のように書かなければいけません。

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

viewportは結構ややこしい概念なので詳しい説明は省きます。

基本的な考え方は「実践！スマホサイトのviewport設定｜CodeGrid」で理解できます。

OGPの設定をする

<!-- facebookのOGPタグ -->
<meta property="og:site_name" content="サイト名" />
<meta property="og:url" content="ページURL" />
<meta property="og:type" content="ページタイプ" /> /*websiteやarticle*/
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページ説明文"/>
<meta property="og:image" content="サムネイル画像URL" />
<meta property="fb:app_id" content="appIdを入力" />
<meta property="og:locale" content="ja_JP" />
 
<!-- twitterのOGPタグ -->
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページ説明文" />
<meta name="twitter:image:src" content="サムネイル画像URL" />

詳しくは「OGP 設定方法」などで検索するとたくさんの解説記事がでてくるので、実際に設定する際はそちらを参考にしてください。

headタグ内のコードテンプレート

<head>
  <meta charset="utf-8">
  <meta name="robots" content="index,follow" />
  <title>ページタイトル</title>
  <meta name="description" content="説明文" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="shortcut icon" href="ファイル名.ico">
  <link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">

  <!-- 外部ファイルの読み込み -->
  <link rel="ファイルの種類" href="ファイルの場所">
  <script src="ファイルの場所"></script>

  <!-- スマホページのURLが異なる場合（PC側） -->
  <link rel="alternate" media="only screen and (max-width: 640px)" href="スマホページのURL" />

  <!-- スマホページのURLが異なる場合（スマホ側） -->
  <link rel="canonical" href="PCページのURL" />

  <!-- 必要あれば -->
  <link rel="canonical" href="評価を統一したいページのURL" />

  <!-- 分割ページの場合 -->
  <link rel="prev" href="前のページのURL">
  <link rel="next" href="次のページのURL">

  <!-- facebookのOGPタグ -->
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:url" content="ページURL" />
  <meta property="og:type" content="ページタイプ" /> 
  <meta property="og:title" content="ページタイトル" />
  <meta property="og:description" content="ページ説明文"/>
  <meta property="og:image" content="サムネイル画像URL" />
  <meta property="fb:app_id" content="appIdを入力" />
  <meta property="og:locale" content="ja_JP" />
   
  <!-- twitterのOGPタグ -->
  <meta name="twitter:card" content="カードの種類" />
  <meta name="twitter:site" content="@ユーザー名" />
  <meta name="twitter:description" content="ページ説明文" />
  <meta name="twitter:image:src" content="サムネイル画像URL" />

</head>