20人がいいねしました
更新日
【テンプレ付き】headには何を書くの？メタデータ全て解説！
web兄さん
htmlの脳とも言える<head>の役割とそれぞれのタグやコードの意味について解説していきます。Webサイト制作をする上でSEO対策と密接な関係にあるテーマの1つなのでしっかりと理解しましょう。
<head>のコード早見表
以下の重要度が「◎」のものに関しては必須と思って良いです。それ以外のものはご自身のサイトの要件に合わせて適切に設定しましょう。
| タグ | 属性+値 | 役割 | 重要度 |
|---|---|---|---|
<meta> | charset="~~" | 文字コードの指定 | ◎ |
<title> | <title> | ページのタイトル | ◎ |
<meta> | name="description" | ページの概要説明文 | ◎ |
<meta> | name="author" | ページの作成者 | ○ |
<meta> | name="keyword" | ページの主要キーワード | △ |
<link> | rel="stylesheet" | CSSファイルの読み込み | ◎ |
<script> | src="~~" | JSファイルの読み込み | ◎ |
<meta> | name="robots" | 検索結果の反映・クロールの制御 | ◎ |
<link> | rel="prev"、rel="next" | 分割ページの統合 | △ |
<link> | rel="alternate" | スマホ専用ページの存在を知らせる | ○ |
<link> | rel="canonical" | 重複ページの存在を知らせる | ○ |
<meta> | http-equiv="X-UA-Compatible" | 互換モードの指定 | △ |
<meta> | name="format-detection" | スマホの自動リンクテキスト化の制御 | ◎ |
<link> | rel="icon" | ファビコンの設定 | ◎ |
<link> | rel="apple-touch-icon-precomposed" | ホーム画面のアイコンの設定 | ◎ |
<meta> | name="viewport" | viewportの制御 | ◎ |
<meta> | property="og:~~ | OGPの設定 | ◎ |
<meta> | name="twitter:~~ | Twitterカードの設定 | ○ |
【コピペOK】headの記述テンプレート
コピペ用テンプレート
<head>
<!-- META-->
<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 name="format-detection" content="telephone=no, email=no, address=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- ICON -->
<link rel="shortcut icon" href="ファイル名.ico">
<link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">
<!-- CSS -->
<link rel="ファイルの種類" href="ファイルの場所">
<!-- JS -->
<script src="ファイルの場所"></script>
<!-- Canonicalize -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="スマホ専用ページのURL" />
<link rel="canonical" href="PC専用ページのURL" />
<link rel="canonical" href="重複ページの元となるページのURL" />
<!-- 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 Card -->
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページ説明文" />
<meta name="twitter:image:src" content="サムネイル画像URL" />
</head>そもそもheadとは？
htmlでのコーディングをする時は以下のように<html>の中に<head>と<body>がそれぞれある構造になっていますよね。
<html>
<head>
<!-- ここに書いたコードはブラウザに表示されない -->
</head>
<body>
<!-- ここに書いたコードはブラウザに表示される -->
</body>
</html>役割をそれぞれ整理すると以下の通りです。
<head>
webブラウザには表示されない部分
webブラウザや検索エンジン（Goolge）などのコンピューターロボットがwebサイトの情報を知るための部分。
<body>
webブラウザで表示される部分
Webサイトに表示したい文章や画像のhtmlタグを書く部分。
headタグなぜ書く必要があるの？
検索順位を上位表示するための対策のことを「SEO対策」といいますが、<head>に書く情報はこのSEO対策に大きく関係してきます。
検索順位の決定はGoogleが行なっているため、metaタグとlinkタグを使って適切にWebページの情報を書くことはWebサイトを検索上位に表示することに繋がって行きます。
headで登場する2つのタグ
<head>に書くタグとして主に登場するものが<meta>と<link>の２つです。
<meta>：ページの概念的な情報（概要情報的なイメージでOK）<link>：ページの特定の情報に関するファイルパスやURL
<meta>の書き方
概念的な情報を記述するこのタグはname属性とその値であるcontent属性で記述し、
「このページのnameはcontentです」というような書き方をします。
<meta name="description" content="Webサイト制作の学習サイトです">例えば上記のコードであれば、「このページのdescirption（説明文）は"Webサイト制作の学習サイトです"です」というような意味となります。
linkの書き方
CSSの外部ファイル読み込みをする時に使用するタグでしたね。まだ未学習の方はこちらで詳しく解説しているので見ておきましょう。
以下のように「rel（ファイルの種類）はhref（ファイルの場所）にあります」という書き方になります。
<link rel="ファイルの種類" href="ファイルの場所">
<meta>と<link>でよく使用する書き方を役割別に解説していきます！ページの情報に関するメタデータ
主にWebページの情報に関するメタデータを書くためのタグです。この部分はheadに書く情報の中でも基本的な部分です。
文字コード
必須です。
Webページの文字コードを指定します。いきなりイレギュラーな書き方ですが、文字コードのみcharset属性で記述します。
<meta charset="utf-8">文字化けを防ぐために必ず書きましょう。charset="〇〇"には他にもShift_JIS、EUC-JPを指定することができますが、html5での推奨のUTF-8を書いておけばOKです。
ページタイトル
必須です。
そのページの内容を一言で表したものをtitleに記述します。よくページ内の大見出しである<h1>と同じテキストが設定されることが多いです。
<title>ページのタイトル</title>
titleに書いたテキストは検索結果のタイトルやブラウザのタブ名に使用されます。
Goolgeの検索結果に表示されるタイトルの文字数には制限があるため、日本語で30〜33文字以内で作成することが理想的です。
titleがシンプルすぎるからといって検索順位が下がるということはありません。大切なのはいかに的確にページの内容を伝えるかです。
- ⚠️スマホでの検索結果は文字数が変わる？
- スマホの検索結果ではタイトルの文字数制限が約50文字と大幅に変わります。ユーザーの多くがスマホで閲覧するようなサイトの場合、これも考慮するといいでしょう。
- ⚠️titleタグに書いたテキストは必ず採用される？
- 必ず採用されるとは限りません。ほぼ同じものが表示されることが多いですが、省略されたり、表現が少し変わって表示されることもあります。また、タイトルに絵文字を含んだ場合も無視されます。
説明文
必須です。
そのWebページの概要文章をdescriptionとして書きます。
<meta name="description" content="webページの概要">
ここに書かれたテキストは検索結果の説明文に使用されます。
こちらもタイトル同様に、表示される文字数が約120字と制限があるので説明文を全て表示したい場合は意識してみましょう。
120文字を超えたからといって検索順位が下がるということはなく200文字〜300文字のdescriptionでも上位表示しているWebサイトは多くあります。
大切なのは「簡潔かつ正確にページの概要を書く」ということです。
よく解説されるけど実は不要なmeta情報
今でも多くの参考書や記事で紹介されるタグの中で「実は書く必要がないタグ」というものを紹介します。
lang
そのWebページで使用されている言語を伝えるために<html lang="ja"></html>とhtmlの開始タグに指定をしていましたが、Googleはwebページ内のテキストがどこの国の言語で書かれているかを判断できるため不要です。
author
そのWebページの作者を書くタグです。<meta name="author" content="名前">に作者の名前を書きます。現時点では書かれていてもGoogleの評価に影響はありません。（将来的には評価される可能性があります）
ブログ系のコンテンツの場合は将来的なことも考慮し書いておくのは良いかもしれません👍
keyword
ページ内のメインのテーマを<meta name="keyword" content="html,head,初心者">のように単語で書くことができます。
以前はGoogleのページを読み取る精度が高くなかったため、この情報を参考に判断していました。
しかし、上位表示を狙うために闇雲に単語が設定されることが多いため、Goolgeは現在このタグを無視しています。
外部ファイルを読み込む
CSSとJavaScriptのファイルを外部から読み込む場合はhead内に読み込むファイルの情報を記述します。
CSSファイルを読み込む
CSSファイルを外部から読み込む場合にはlinkタグを使います。
<link rel="ファイルの種類" href="ファイルの場所">- rel属性にはhref属性で読み込むファイルの種類が何かを記述します。
- href属性にはファイルのパス（ファイルのURL）を書きます。
たとえば「style.css」というcssファイルを外部から読み込む場合は<link rel="stylesheet" href="style.css">と書きます。
JavaScriptファイルを読み込む
JavaScriptのファイルを読み込む場合は<script>を使用します。
<script src="ファイルの場所"></script>注意したいのは先ほどのlinkタグと違い閉じタグ（</script>）があるという点です。
src属性にはjsファイルのファイルパス（URL）を書きましょう。
たとえば、script.jsというファイルなら<script src="script.js"></script>と記述します。
Googleのロボットに指示するためのタグ
<meta name="robots" content="~~">で、そのWebページを検索結果にどのように表示するかをGoogleのロボットに指示することができます。
noindex｜Googleの検索結果に非表示
<meta name="robots" content="noindex">noindexを書くことでGoogleの検索結果に表示されなくなりますが、あくまで検索結果に表示されないだけなのでURLを知っていればWebで閲覧は可能です。
どんな時に使う？
noindexはユーザーにとって価値が低いページに対して使います。言い換えれば「検索してまで見たいと思わないページ」を指します。例えば「お問い合わせページ」や「日付別の記事アーカイブ」などです。
また、テスト用のサイトは表示されるとまずいのでnoindexを記述しインデックスを防ぎます。
nofollow｜リンクを辿らないようにする
<meta name="robots" content="nofollow">
Webサイトはページとリンクの集合体です。Googleではページに書かれたリンクを辿ることで、新しいページを見つけそのページを認識し順位付けの評価をしています。
つまり、トップページにnoindexが書かれていても、別ページへのリンクが書かれている場合、リンクを辿って別のページは検索結果に表示されてしまう可能性があります。
head内にnofollowがあることで、そのページにある全てのリンク先のページを辿らないように指示することができます。
どんな時に使う？
検索順位をあげるためにはGoogleのロボットに効率よくサイトを巡回してもらう必要があります。そのためリンク先のコンテンツの内容が薄い（価値が低い）ものばかりの場合はGoolgeに見てもらっても無駄になってしまうのでnofollowを付けてリンクを辿る必要がないということを教えてあげましょう。
noindexとnofollowを一緒に書く
noindexとnofollowは併用することが多いです。noindexのみだと辿ったリンクはインデックスされてしまいますからね。
<meta name="robots" content="noindex,nofollow">noindexしか書いていない場合は検索結果に表示されないだけでそのページにあるリンクをGoogleは辿ります。
逆にnofollowしか書いていない場合はリンクは辿りませんが検索結果には表示されるようになってしまいます。
検索結果に表示せず、リンクも辿らないようにGoogleに指示する場合は「,（カンマ）」で区切ってnoindexとnofollowを両方書きます。
他のページとの関係性を示す
Goolgeに誤解のないように他のWebページとの関係性を説明することで、正しくページの評価をしてもらう必要があります。
【廃止】分割ページであることを伝えるタグ
説明は残しておきますがこの書き方をGoogleは無視するようになりました。
複数ページにまたがる記事やコンテンツをお持ちの方へ｜Google Developers
【廃止】next / prevの解説を読む
分割ページとはページ送りがついているページです。左のイラストのようにページ送りがついている記事などを見かけたことがありますよね。
このようにページ送りで分割された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を書く」と覚えておけば迷いません。
alternate｜スマホ用ページの存在を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を書きます。
注意点
PC用ページではrel="alternate"で、スマホ用ページではrel="canonical"ということに注意してください。このようにPC・スマホページで相互の関係性をGoogleに伝えることで、端末ごとに適切なwebページを表示してくれます。
canonical｜複数ページの評価をまとめる
先ほど出てきたcanonicalにはもう一つ使い方があります。
ページの内容がよく似ていると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非対応なら不要】IEで互換表示させない
InternetExplorerには「互換表示」と「標準モード」の2つの表示方法があります。ユーザーの環境によってどちらで表示されるかことなり、「互換表示」のレンダリングの場合レイアウトが崩れてしまうことがあります。
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>上記のコードで強制的に「標準モード（最新のレイアウトに対応できる）」でwebサイトを表示させることができます。
format-detection｜リンクの自動適用を防ぐ
iOSやAndroidでは、電話番号やメールアドレス、住所を自動的にリンクテキストに変換することがあります。
一見便利なようですが、意図しない箇所にリンクがついてしまう可能性があるため、開発する際に都度設定する方が間違いがないでしょう。
以下のように書くことでブラウザに自動変換しないように指示することができます。
<meta name="format-detection" content="telephone=no, email=no, address=no">shortcut icon｜ファビコンを設定する
必須です。
ファビコンとはブラウザのタブに表示される「サイトのアイコン」です。ファビコンは自分の好きな画像を設定することができます。
<link rel="icon" href="ファイル名.ico">ファイル名の拡張子が少し特殊で.icoとなっているところに注意しましょう。
作成については、ファビコンにしたいpngファイル（背景が透明）を用意すれば「ファビコン favicon.icoを作ろう!」のようなサイトでico形式のファイルに変換することができます。
apple-touch-icon-precomposed｜Webクリップアイコンを設定する
必須です。
iphoneやandroidでwebサイトをホーム画面に追加した時に表示されるアイコンをwebクリップアイコンと呼びます。
<link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">設定する時は以下のポイントに注意してください。
- 57px〜152pxの正方形の画像を用意する
- 画像の背景は透明にしないこと
- 角丸のデザインはスマホが勝手に処理してくれるので不要
apple-touch-icon-precomposed.pngという名前にする
なお、何も設定しない場合でもスマホが自動でWebページをトリミングしたものを設定してくれますが、きちんと設定しておいた方が良いでしょう。
viewportを設定する
必須です。
viewportはWebサイトの表示領域を示す単語です。
例えばレスポンシブ対応がマストな現代では以下のように書かれることがほとんどです。
<meta name="viewport" content="width=device-width,initial-scale=1">「表示領域って画面の幅じゃないの？」と思ってしまいますが、厳密に言うと違います。
viewportをコントロールすればPC版しか用意していないサイトもスマホ画面に収めて表示することができます。詳しくは以下の記事で解説されているので一読ください。
SNS関連
OGP｜シェアされた時の設定
必須です。
OGPとはfacebookやTwitter、LINEといったSNSでWebページがシェアされた時の設定です。
シェアされた時の
- タイトル
- 説明文
- サムネイル画像
など細かく設定することができます。
画像はOGP用のサムネイルを別途作成し、タイトルと説明文はそれぞれ<title>やdescriptionと同じものを設定することが一般的です。
<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 Card｜Twitterでのシェアの詳細設定
これが設定されていないとTwitterでシェアのイメージを設定できないというわけではありません。
前述のOGPの「タイトル」「説明文」「画像」が設定されていればそちらが代用されます。
しかし、Twitterの場合、表示させる画像のタイプを選択することができるので、その設定を指定したい場合や、自身のTwitterアカウントが存在している場合は最低限以下の２つは設定しておくと良いでしょう。
<meta name="twitter:card" content="カードの種類" /><meta name="twitter:site" content="@ユーザー名" />
完璧に設定したいという方は以下の記述でOKです👍
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページ説明文" />
<meta name="twitter:image:src" content="サムネイル画像URL" />OGPやTwitterカードの確認方法
テストサイトにアップしてシェアすることが確実ですが、チェックツールを使用して表示できていれば概ね問題ないと言えます。
