htmlの脳とも言えるheadタグの役割とそれぞれのタグやコードの意味について解説していきます。webサイト制作をする上でSEO対策と密接な関係にあるテーマの1つなのでしっかりと理解しましょう。記事の最後にはheadタグのコードのテンプレートも用意しているので是非参考にしてみてください。
headとは？
htmlでwebサイトを作成する時のコードを大きくわけると次のように「headタグ」と「bodyタグ」に分かれています。そしてそれぞれの役割は以下のようになっています。
head
webブラウザには表示されない部分
webブラウザや検索エンジン（Goolge）などのコンピューターロボットがwebサイトの情報を知るための部分。
body
webブラウザで表示される部分
webサイトに表示したい文章や画像のhtmlタグを書く部分。
headタグはなぜ書くの？
検索順位を上位表示するための対策のことを「SEO対策」といいますが、headに書く情報はこのSEO対策に大きく関係してきます。
検索順位の決定はGoogleが行なっているため、metaタグとlinkタグを使って適切にwebページの情報を書くことはwebサイトを検索上位に表示することに繋がって行きます。
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サイトは多くあります。大切なのは「簡潔かつ正確にページの概要を書く」ということです。
よく解説されるけど「実は不要」なタグ
今でも多くの参考書や記事で紹介されるタグの中で「実は書く必要がないタグ」というものを紹介します。
lang
<html lang="ja"></html>とhtmlの開始タグに指定をしていましたが、Googleはwebページ内のテキストがどこの国の言語で書かれているかを判断できるため不要です。author
<meta name="author" content="名前">に作者の名前を書きます。現時点では書かれていてもGoogleの評価に影響はありません。keyword
<meta name="keyword" content="html,head,初心者">のように単語で書くことができますがスパムが多いためGoolgeはこのタグを無視しています。お兄さんからひとこと
外部ファイルを読み込む
cssとjavascriptのファイルを外部から読み込む場合はhead内に読み込むファイルの情報を記述します。
cssファイルを読み込む
cssファイルを外部から読み込む場合にはlinkタグを使います。
<link rel="ファイルの種類" href="ファイルの場所">- rel属性にはhref属性で読み込むファイルの種類が何かを記述します。
- 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ページとの関係性を説明することで、正しくページの評価をしてもらう必要があります。
分割ページであることを伝えるタグ
分割ページとはページ送りがついているページです。左のイラストのようにページ送りがついている記事などを見かけたことがありますよね。
このようにページ送りで分割されたwebページのことを分割ページといいます。
通常Googleは1つのページごとに評価をするのでページが異なる場合は評価も分散してしまいます。
イメージ的には「本来15点の評価がつく記事が3ページに分かれているせいで、5点ずつの評価になってしまう」ようなものです。
しかしlink relを使い分割されたページが繋がっていることをGoogleに教えることで全てのページをまとめて1つのページとして評価してもらうことができます。
<link rel="prev" href="前のページURL">
<link rel="next" href="次のページURL">
上記の形式で前後のページのURLを記述します。たとえば3ページに分割されたwebページがあるとします。その場合は
- 1ページ目に
<link rel="next" href="2ページ目URL"> - 2ページ目に
<link rel="prev" href="1ページ目URL">と<link rel="next" href="3ページ目URL"> - 3ページ目に
<link rel="prev" href="2のページURL">
とhead内に記述します。「そのページと直接繋がっているページのURLを書く」と覚えておけば迷いません。
スマホ用ページの存在をGoogleに知らせる
webサイトをスマホ対応させる方法の1つに「PC用のページ」と「スマホ用のページ」をそれぞれ用意するという方法があります。
その場合、当然URLは別々になるのでGoogleに「PCの時はこっちのページで、スマホの時にはこっちのページを表示してね」と教えてあげなければいけませんよね。
そのために使うのが「alternate」と「canonical」です。
<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を書きます。
ポイント
rel="alternate"で、スマホ用ページではrel="canonical"ということに注意してください。このようにPC・スマホページで相互の関係性をGoogleに伝えることで、端末ごとに適切なwebページを表示してくれます。複数ページの評価をまとめる
ページの内容がよく似ているとGoogleは評価をしにくくなってしまい、最悪の場合Goolgeの規約違反である「重複コンテンツ」とみなされスパム扱いされてしまいます。
しかしwebサイトを作っているとどうしても重複コンテンツが生まれてしまうという場合があります。
そんな時には「linkタグのcanonical」を使います。
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に伝えることができます。
ポイント
<link rel="canonical" href="本来評価してほしいページのURL">と書きます。複数ある場合はすべてのページにこれを書きます。本来評価して欲しいページには何も書かなくてOKです。ユーザーのために設定したほうがいいタグ
ここで紹介するタグは必須ではありませんが、設定をすることでより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クリップアイコンを設定する
iphoneやandroidでwebサイトをホーム画面に追加した時に表示されるアイコンをwebクリップアイコンと呼びます。
何も設定しない場合でもスマホが自動でwebページをトリミングしたものを設定してくれますが、わかりやすいアイコンを登録していた方がユーザーもすぐに見つけることができますよね。
<link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">設定する時は以下のポイントに注意してください。
- 57px〜152pxの正方形の画像を用意する
- 画像の背景は透明にしないこと
- 角丸のデザインはスマホが勝手に処理してくれるので不要
- 「apple-touch-icon-precomposed.png」という名前にする
viewportを設定する
viewportはスマホサイトでのサイトの見え方を決めるための重要な概念です。
たとえばレスポンシブサイト（ブラウザ幅によってコンテンツの幅が変わる）であれば必ず以下のように書かなければいけません。
<meta name="viewport" content="width=device-width,initial-scale=1">viewportは結構ややこしい概念なので詳しい説明は省きます。
基本的な考え方は「実践！スマホサイトのviewport設定｜CodeGrid」で理解できます。
OGPの設定をする
OGPとはfacebookやTwitterなどのSNSでwebページがシェアされた時の設定です。
シェアされた時のタイトルや説明文、サムネイル画像など細かく設定することができます。
<!-- 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>お兄さんからひとこと
この記事を書いた人
web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。
