【初心者用】よくわかるHTMLの<head>に書くこと!

2021年10月8日

記事の目次

htmlの脳ともいえるheadタグの役割と、それぞれのタグやコードの意味について解説していく。webサイト制作をするうえでSEO対策と密接な関係にあるテーマの1つなので、しっかりと理解しよう。記事の最後にはheadタグのテンプレートも用意しているので、ぜひ参考にしてみてほしい。

  1. headとは?
  2. ページの情報に関するmetaデータ
  3. 外部ファイルを読み込む
  4. googleのロボットに指示するためのタグ
  5. ほかのページとの関係性を示すタグ
  6. ユーザーのために設定したほうがいいタグ
  7. headタグ内のテンプレートコード
  8.  

headとは?

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

head

webブラウザには表示されない部分

webブラウザや検索エンジン(Google)などのコンピューターロボットが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タグだ。

htmlテンプレートコード

  <meta charset="utf-8">
 

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

ページタイトル

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

htmlテンプレートコード

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

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

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

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

スマホの検索結果ではタイトルの文字制限が約50文字と大幅に変わる。ユーザーの多くがスマホで閲覧するようなサイトの場合、これも考慮するといいだろう 。

説明文

そのwebページの概要をdescriptionに書く。

htmlテンプレートコード

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

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

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

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

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

lang

そのwebページで使用されている言語を伝えるために<html lang="ja"></html>とhtmlの開始タグに指定をしてきたが、Googleはwebページ内のテキストがどこの国の言語で書かれているかを判断できるので不要だ。


author

そのwebページの作者を書くタグ。<meta name="author" content="名前">に作者の名前を書く。現時点では書かれていてもGoogleの評価に影響はない。


keyword

ページ内のメインテーマを<meta name="keyword content="html,head,初心者>のように単語で書くことができるが、スパムが多いためGoogleはこのタグを無視している。


 Zer0techからひとこと

Googleが生まれてすぐのころはwebページを解析するロボットの性能があまり高くなかった。しかし今はwebページの内容から様々な情報を的確にくみ取ることができるようになったので、今まで必須だったタグが不要になってきている。


外部ファイルを読み込む

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

cssファイルを読み込む

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

htmlテンプレートコード

  <link rel="ファイルの種類" href="ファイルの場所">
 
  1. rel属性にはhref属性で読み込むファイルの種類が何かを記述する。
  2. hreh属性にはファイルのパス(ファイルのURL)を書く。

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

cssの読み込み方法はこちらの記事で詳しく解説しているので参考にしてほしい。

jsファイルを読み込む

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

htmlテンプレートコード

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

注意したいのは、先ほどのlinkタグと違い閉じタグ(</script>)があるという点だ。

src属性にはjsファイルのファイルパス(URL)を書こう。

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

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

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

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

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

htmlテンプレートコード

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

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

どんな時に使う?

noindexはユーザーにとって価値が低いページに対して使用する。いいかえれば「検索してまで見たいと思わないページ」を指す。例えば「お問い合わせページ」や「日付別の記事アーカイブ」などだ

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

htmlテンプレートコード

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

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

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

どんな時に使う?

検索順位を上げるためにはGoogleのロボットに効率よくサイトを巡回してもらう必要がある。そのためリンク先のコンテンツの内容が薄い(価値が低いものばかりの場合はGoogleに見てもらっても無駄になってしまうのでnofollowをつけてリンクを辿る必要がないということを教えてあげよう。

noindexとnofollowを一緒に書く

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

htmlテンプレートコード

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

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

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

検索結果に表示せず、リンクも辿らないようにgoogleに指示する場合は「,(カンマ)」で区切ってnoindexnofollowを両方書こう。

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

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

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

分割ページとはページ送りがついているページだ。左のイラストのようにページ送りがついている記事などを見かけたことがあるはずだ。

このようにページ送りで分割されたwebページのことを分割ページという。


通常Googleは1つのページごとに評価をするので、ページが異なる場合は評価も分散してしまう。

イメージ的には「本来15点の評価が付く記事が3ページに分かれているせいで、5点ずつの評価になってしまう」ようなものだ。

しかしlink relを使い分割されたページが繋がっていることをGoogleに教えることで、すべてのページをまとめて1つのページとして評価してもらうことができる。

htmlテンプレートコード

  <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に知らせる

webサイトをスマホ対応させるための方法の1つに「PC用のページ」と「スマホ用のページ」をそれぞれ用意するという方法がある。

その場合、当然URLは別々になるのでGoogleに「PCの時はこっちのページで、スマホの時にはこっちのページを表示して」と指示する必要がある。

そのために使うのが「alternate」と「canonical」だ。

htmlテンプレートコード

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

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

htmlテンプレートコード

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

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

ポイント

PC用ページではrel="alternate" で、スマホページではrel="canonical" ということに注意しよう。このようにPC・スマホページで相互の関係性をGoogleに伝えることで、端末ごとに適切なwebページを表示してくれるのだ。

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

 

ページの内容がよく似ているとGoogleは評価をしにくくなってしまい、最悪の場合Googleの規約違反である「重複コンテンツ」とみなされ、スパム扱いされてしまう。

しかしwebサイトを作っているとどうしても重複コンテンツが生まれてしまうという場合がある。

そんな時には「linkタグのcanonical」を使用する。

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

htmlテンプレートコード

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

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

ポイント

意図せず重複コンテンツになってしまっているページに<link rel="canonical" href="本来評価してほしいページのURL"> と書く。複数ある場合はすべてのページにこれを書きます。本来評価してほしいページには何も書かなくていい。

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

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

IEで互換表示させない

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

htmlテンプレートコード

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

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

ファビコンを設定する

 

ファビコンとはブラウザのタブに表示される「サイトのアイコン」です。ファビコンは自分の好きな画像を設定することができる。

htmlテンプレートコード

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

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

作成については、ファビコンにしたいpngファイル(背景が透明)を用意すれば、無料でファビコンを作成できるサイトが多数あるので、そちらを利用してico形式のファイルに変換することができる。

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

各種スマートフォンでwebサイトをホーム画面に追加したときに表示されるアイコンをwebクリップアイコンとよぶ。

なにも設定しない場合でもスマホが自動でwebページをトリミングしたものを設定してくれるが、わかりやすいアイコンを登録していたほうがユーザーもすぐに見つけることができるだろう。

htmlテンプレートコード

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

設定するときは以下のポイントに注意しよう。

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

viewportを設定する

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

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

htmlテンプレートコード

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

viewprotは結構ややこしい概念なので詳しい説明は省こう。

基本的な考え方は「viewport」で検索し、勉強してみよう。

OGPの設定をする

OGPとはfacebookやTwitterなどのSNSでwebページがシェアされたときの設定だ。

シェアされたときのタイトルや説明文、サムネイル画像などが細かく設定することができる。

htmlテンプレートコード

<!--facebookのOGPタグ-->
<meta property="og:site_name" content="サイト名" />
<meta property="og:url" content="ページURL" />
<meta property="og:type" content="ページタイプ" /> /*websiteやartticle*/
<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タグ内のコードテンプレート

htmlテンプレートコード

  <head>
    <meta charset="utf-8">
    <meta name="robots" content="index,follow" />
    <title>ページタイトル</title>
    <meta name="desctiption" 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="smart-phone-icon-precomposed" href="画像のパス/smart-phone-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>

 Zer0techからひとこと

head内に必要なmetaタグとlinkタグをまとめてテンプレート化したからwebサイトを作り始めるときにぜひ活用してみてほしい。ただコピペするだけでは無駄なコードが増えてしまうから、きちんとコードの意味を理解して必要なものだけを絞り込むように心がけよう。