HTMLのheadタグの中に書くべきコードをまとめました。headタグの役割や中身のコードの意味についても解説しています。
SEO対策上、headタグは重要な役割を担っていますので、このページに記載されているものはWeb制作に関わる人にとって必須となる知識です。
ぜひこの最後まで読んで理解を深めてください。
目次
headタグとは
headタグは、ページ全体の情報を設定するためのタグです。
普段私たちが見ているWebページは、headタグとbodyタグから成り立っており、目に見える部分はbodyタグの中に記述されているものです。
反対に、headタグ内に記載されているものは、ユーザーの目には入りません。ブラウザや検索エンジンに情報を伝えるものがこのheadタグの中身に記述されています。
<!DOCTYPE html>
<html>
<head>
<!-- ページ全体の情報（ユーザーの目に見えない） -->
</head>
<body>
<!-- ページのコンテンツ（ユーザーの目に見える） -->
</body>
</html>headタグを記述する場所・ルール
headタグの記述ルールはこれのみです。
htmlタグの後ろ、bodyタグの前に記述する
例外はありません。また、headタグを複数個記述することもありません。
headタグ内に記述するコードテンプレート
では、headタグの中身に何を書くのか解説していきます。
まずは、headタグ内のコード全体をお見せします。（ぜひコピペしてお使いください）その後に、それぞれの記述の説明をしていきます。
※ 【】で囲んでいる箇所は、ご自身のページ・サイトに合わせて変更してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>【ページのタイトル】</title>
<meta name="description" content="【ページの説明文】" />
<!-- クローラーを制御する場合 -->
<meta name="robots" content="index,follow" />
<!-- URLを正規化する場合 -->
<link rel="canonical" href="【正規化するURL】" />
<!-- 分割ページの場合 -->
<link rel="prev" href="【1つ前のページのURL】" />
<link rel="next" href="【1つ後ろのページのURL】" />
<!-- 外部ファイルの読み込み -->
<script src="【ファイルのURL】"></script>
<link rel="stylesheet" href="【ファイルのURL】" />
<!-- アイコン -->
<link rel="shortcut icon" href="【ファイル名.ico】" />
<link rel="apple-touch-icon-precomposed" href="【画像のパス/apple-touch-icon-precomposed.png】" />
<!-- facebookのOGP -->
<meta property="og:url" content="【ページのURL】" />
<meta property="og:title" content="【ページのタイトル】" />
<meta property="og:type" content="website" />
<meta property="og:description" content="【ページの説明】" />
<meta property="og:image" content="【サムネイル画像のURL】" />
<meta property="og:site_name" content="【サイトのタイトル】" />
<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>
<body>ページの情報
headタグには、今いるページの情報を記述します。
文字コード
<meta charset="utf-8" />HTMLで使用されているコードの種類を指定します。指定しないと、誤って文字が認識されることがあり、その場合文字化けを起こしてしまいます。
文字コードは常に、UTF-8を使用するので、このまま記載すればOKです。
タイトル
<title>【ページのタイトル】</title>ページのタイトルを記述します。ここに記述した内容は、検索結果ページやブラウザのタブに記載されます。
PCでの検索結果ページでは、全角32文字まで表示されるので、32文字を目安に記述するのがおすすめです。スマホでは全角40文字ほどが表示されますが、より短いPCの32文字以内にするのが一般的です。
※検索結果画面では、検索エンジンがページの内容を判断しつつ、最適なタイトルを表示します。必ずしもこのtitleの中のテキストが表示されるわけではありませんが、多くの場合でこれが表示されます。
ディスクリプション
<meta name="description" content="【ページの説明文】" />ページの説明文を記述します。タイトルと同様に、ここで記述した内容も、多くの場合で検索結果画面に表示されます。
※タイトルとディスクリプションの注意
検索結果画面に表示されるタイトルとディスクリプションは、ユーザーがページを訪れるための大事な判断材料となります。あなたも、Googleで検索する際にはタイトルやディスクリプションを見て「このページは役に立ちそうか？」を考えて、クリックするかを判断しているはずです。
加えて、ユーザーに対してのみならず、検索エンジンに対して「このページはどんな内容なのか」を伝える役割も担っています。
したがって、簡潔に分かりやすくページの内容を伝えることが、ユーザーにとっても検索エンジンにとっても大切なのです。
ただし、タイトルやディスクリプションに、強引にキーワードを詰め込んだり、実際にページに書いていない内容を記述してはいけません。検索エンジンが正しくページの内容を把握できず、むしろ悪い評価を受ける可能性があるからです。
あくまでもユーザー目線で、分かりやすいタイトルとディスクリプションを書くことを意識しましょう。
クローラーの制御の設定
noindexの設定
<meta name="robots" content="noindex" />クローラーに対して、ページのインデックスを拒否するための記述です。
nofollowの設定
<meta name="robots" content="nofollow" />ページ内に設置されているリンクをクローラーが辿らないようにするための記述です。
※noindexとnofollowは一緒に記述することも可能
<meta name="robots" content="noindex, nofollow" />上述のnoindexとnofollowは1行で一緒に記述することもできます。
外部ファイルの読み込み
HTMLファイルのみで成り立っているWebページはほとんどありません。他のファイルを一緒に読み込むことによって、日頃私たちがよく目にするページになるわけです。
この「他のページを読み込む」ための記述は、headタグ内に記述することが多いです。
CSSファイルの読み込み
<link rel="stylesheet" href="【ファイルのURL】" />このlinkタグは2つの属性から成り立っています。
- rel属性：href属性で指定するファイルとの関係性
- href属性：読み込むファイル
CSSファイルの場合は、rel属性の中身がstylesheetになります。
JavaScriptファイルの読み込み
<script src="【ファイルのURL】"></script>scriptタグにsrc属性を用いて、そこにファイルURLを記述します。
scriptタグの開始タグと閉じタグの間には何も記述しません。CSSファイルとは違い、閉じタグが必要ですので、忘れずに記述しましょう。
アイコンの設定
Webページで表示するアイコンはheadタグ内に記述します。具体的には、下記の2つです。
ファビコンの設定
<link rel="shortcut icon" href="【ファイル名.ico】" />ファビコンとは、ブラウザのタブの左側に表示されるアイコンです。
png形式の画像を入れることができますが、ico形式の画像を入れることをおすすめします。
png形式の場合は、「16px × 16px」や「32px × 32px」の画像をそれぞれ用意する必要がありますが、ico形式であれば、記述が1行で済むためです。
スマホ用アイコン画像の設定
<link rel="apple-touch-icon-precomposed" href="【画像のパス/apple-touch-icon-precomposed.png】" />iPhoneやAndroid端末で、Webページを「ホーム画面に追加」した際に、ホーム画面に表示されるアイコンです。
アイコンを何も指定しなくても、Webページを切り抜いた画像が表示されます。しかし、あらかじめサイトを表すアイコンを設定した方がユーザーにとって便利なので、設定しておくと良いでしょう。
OGPの設定
OGPとは、「Open Graph Protocol」の略です。TwitterやFacebookなどのSNSでシェアした時や、LINEなどのチャットツールでサイトURLを送信した時に表示される、タイトルや説明文、画像を用いて、簡潔にWebページの内容を伝える仕組みのことです。
FacebookのOGP設定
<meta property="og:url" content="【ページのURL】" />
<meta property="og:title" content="【ページのタイトル】" />
<meta property="og:type" content="website" />
<meta property="og:description" content="【ページの説明】" />
<meta property="og:image" content="【サムネイル画像のURL】" />
<meta property="og:site_name" content="【サイトのタイトル】" />
<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】" />その他の設定
Internet Explorer対策
<meta http-equiv="X-UA-Compatible" content="IE=edge" />Internet Explorerに備わっている「互換表示」をOFFにし「標準モード」でWebページを表示させるためのコードです。
互換表示では、表示が崩れる可能性があり、それを防ぐための記述です。必ず記述しましょう。
viewportの設定
<meta name="viewport" content="width=device-width,initial-scale=1" />レスポンシブ対応したサイトには必須となる設定です。理解は難しいので、これは「必ず書くもの」と覚えるのが良いです。
ページネーションタグ
1つのページを複数ページに分けている、分割ページの場合に、分けられているページと今いるページの関係性を表すためのタグです。
例えば、ブログの記事一覧ページで2ページ目以降がある時などに使用されます。
<link rel="next" href="【2ページ目のURL】" /><link rel="prev" href="【1つ前のページのURL】" /><link rel="prev" href="【1つ前のページのURL】" />
<link rel="next" href="【1つ後ろのページのURL】" />URLの正規化
<link rel="canonical" href="【正規化するURL】" />重複ページが複数存在する際に、検索エンジンに優先すべきページを伝えることによって、それ以外のページは別ページではないと判断させることができます。
URLの正規化をおこなわない場合、重複するページは別ページとして判断されます。内容が全く同じページがそれぞれ別ページだと判断されてインデックスされると、独自性のないコンテンツと評価されてしまう可能性があります。
URLの正規化を行うことはSEO対策をする上で重要です。
実はheadタグに記述する必要がないもの
メタキーワード
<meta name="keywords" content="【ページのキーワード】" />メタキーワードとは、そのページがどのようなキーワードと関連したページなのかを示すものです。
以前は、検索上位に表示したいキーワードをこのメタキーワードに記述することがSEO上重要であるとされていましたが、今は効果がなくなったとGoogleが明言しています。
今はたとえ、SEOで検索上位を狙っているとしても、記述する必要はありません。
lang属性
<html lang="ja">headタグ内ではありませんが、htmlタグに対してlang属性は必要ありません。
このlang属性は、そのページが何語で書かれているのかを示すためのものです。lang属性の値が”ja”であれば日本語のページということです。
今でも、html開始タグに記述するWebページを見ることが多いですが、Googleはこのlang属性は無視していると明言しており、現在は記述の必要がなくなっています。
headタグ内に記載する順番でSEO上注意すべきことは？
headタグ内の要素を記載するのに注意すべきことは「SEOにおいて重要なものほど、冒頭に近い場所に置く」ということです。
重要なものとは、例えば、
- 文字コード指定
titleタグmeta robotsタグmeta descriptionタグrel="canonical"タグviewport- CSP（コンテンツセキュリティポリシー）関連要素
などがあります。
これは、GoogleのJohn Muller氏がマストドン上で述べているものです。（引用：https://mastodon.social/@johnmu/109682258246363541）
GoogleのウェブクローラーであるGoogleBotは、上から順番にコードを読み込んでいくため、SEO上重要度が高い要素を上においておくことが安全だということです。
このページの冒頭で記載したテンプレートは、要素の順番も考慮して作成しているため、コピーアンドペーストでそのままお使いいただければと思います。
