LINEで現役エンジニアに直接質問してみよう!登録無料

HTML headタグとは?書き方と書くべき内容を一覧で解説!

HTMLのheadとは、ブラウザには表示されずWebブラウザ自身や検索エンジンなどプログラムがWebサイトの情報を知るための部分です。

headでは、Webページのタイトル、文字コード、Google検索時に表示される説明文、Twitterに貼り付けた時に表示される画像などを設定できます。

  • 使い方がよくわからない
  • どのような内容を書けばいいの?
  • 種類がいっぱいあるけど全部書かなきゃダメ?
  • headの重要度が分からない

こんな疑問に答える初心者向けの内容となっています。

HTMLのheadタグとは?

HTMLには大きく分けて<body>部と<head>部があります。

<body>とは、私達が普段見ている部分の事です。画像、動画、テキストなど、Webページに表示される部分が<body>部に含まれます。

一方で、WebページのHTMLには目に見えない情報も含まれています。CSSファイルやJavascriptの場所、Googleエンジンに伝えるサイトの概要テキストやタイトル、Twitterのリンクの画像などです。

これが<head>部にまとめて書かれます。

MEMO

<head>部は誰でも簡単に見ることができます。今あなたの使っているブラウザでも可能です。

例えば、Chromeには「Chromeデベロッパーツール」というデバッグツールが標準で付いています。Macだと「option + command + i」で起動できるので、試して見てください!閉じるには同じショートカットを使えば消せます。

headの役割とは?

まず、HTMLのheadにどんな役割があるのか解説します。

私達は普段何気なくブラウザを使い、情報を見ています。

文字、動画、音楽、画像などです。

でも、その後ろで直接目に見えない情報もあります。

  • サイトタイトル
  • サイト文字コード
  • タブの横に表示されるアイコン
  • FacebookやTwitterのバナー画像や説明文
  • google検索時に表示される説明文
  • etc…

このような情報を書く部分がheadなのです。

headの情報が私達に届くまで

headの内容を人間が直接目にすることはありません。

ロボットがその情報を何らかの形で利用、加工され私達が見るという流れになります。

headはロボットが利用する情報を記述する部分で、headは私達が直接目にする部分ということです。

headは検索エンジン対策(SEO)に必須

公開されているWebページはGoogleが検索順位を判定してくれます。この判定基準にheadは大きな影響を与えています。

headの内容が充実していれば、Googleは検索順位の評価を行いやすいので、上位にランクインしたり早く評価をしてもらえたりします。

ブログなどでみんなから見てもらうサイトでは<head>部をちゃんと整えるのは必須項目です。

headタグに書くタグは主にmetaとlinkの2種類

<head>の中には主に<meta><link>の2種類のタグがあります。

<meta>とは、その文書に関する情報(メタ情報)を指定するタグです。Webサイトの要約文やSNSでWebページがシェアされた時の画像など、Webページ自体の情報について記述します。

一方、<link>とは、Webページと関連する外部ファイルの情報が記述されます。例えば、CSSファイルの場所やWebページアイコン(ファビコン)などです。

しかし、これらは分けて覚える必要はありません。実際にどちらのタグが使われるのかはあまり厳密には決まっていないからです。「これは外部ファイルへのURLだから<link>だ!」と思っても、使うのは<meta>だったりします。

実際にWebページにどんな設定を行いたいのか、書き方はどうなのかをしっかり調べてから書くようにしましょう!

HTMLのheadタグの種類紹介

HTMLのheadに書くべきタグを8グループに分けて紹介します。

  1. 全Webページ設置推奨タグ
  2. CSSやJavascriptなどの外部ファイル読み込みタグ
  3. Googleボットに指示するタグ
  4. 複数のページの関係性を表すタグ
  5. SNSでWebページがシェアされた時の画像などを設定
  6. HTMLの表示を高速化するためのタグ
  7. RSSリーダー向け
  8. 現在は設定しない方がいいタグ

全Webページ設置推奨タグ

このブループでは、HTMLに設置するべきタグを6つ紹介します。

  1. 文字のエンコード
  2. Internet Explorer用の設定
  3. タイトルタグ
  4. ファビコン(サイトアイコン)の指定
  5. メタディスクリプション

文字のエンコード

<meta charset="utf-8" />

HTML自体の文字コード文字コードを指定します。

ブラウザができるだけ早く理解できるように先頭から1024バイト以内(128文字以内)に配置しましょう。

れ以上だと理解できないままHTMLファイルが解釈されてしまう可能性があります。

viewport設定

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

今のモバイル端末には様々な画面サイズがあります。

どんな画面サイズであっても、見やすい配置や文字サイズにするデザインを「レスポンスデザイン」といいます。

レスポンシブデザインにするには、viewportの設定を書いておく必要があります。

Internet Explorer用の設定

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

Internet Explorer」には「互換モード」というモードがあります。これは、Webページの新旧の互換性を保つために存在します。

例えば、新しい機能を使用したWebページを古い「 Internet Explorer」で見た時、対応していない機能をどう扱うべきかを設定できます。

このコードは、可能な限り新しいバージョンに合わせるように設定します。

Webページタイトルの設定

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

Webサイトのタイトルを指定します。

ブラウザに表示されるだけではなく、Googleなどのボットにも検索結果として使われます。

ファビコン(サイトアイコン)の指定

<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" href="32✖32px画像のURL" sizes="32x32" />
<link rel="icon" href="192✖192px画像のURL" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="180✖180px画像のURL" />
<meta name="msapplication-TileImage" content="270✖270px画像のURL" />

Webページのアイコンを設定します。

ブラウザのタブで使われたり、モバイル版のGoogle検索結果で使われたりします。

MEMO

ファビコン画像を用意するのがとても手間がかかります。

なぜなら、icoという特殊な画像形式や複数のサイズで画像ファイルを用意しなくてはいけないからです。

700px以下の画像ファイルを用意するだけで、icoや複数のサイズを同時に生成してくれるサイトがあるので紹介します。

参考 様々なファビコンを一括生成。favicon generatorao-system.net

メタディスクリプション

<meta name="description" content="ページの内容を表す100文字以下の概要文章" />

Webページの要約文を設定します。

この文章はGoogleの検索結果で、記事の概要として使われることもあります。

あまり長すぎる文章は概要として使われない事もあるので、概ね100文字以下になるように調節しましょう。

CSSやJavascriptなどの外部ファイル読み込みタグ

CSSやJavaScriptなどの関連する外部ファイルを読み込む設定を紹介します。

  1. CSSファイルの読み込み
  2. JavaScriptファイルの読み込み

CSSファイルの読み込み

<link rel="stylesheet" href="CSSファイルのURL" />

CSSファイルの読み込み行うためのタグです。

CSSについてわからない人は、基礎について下記の記事でまとめているので、クリックして見てみてください!

【初心者向け】CSSとは?10分でわかる基礎と書き方をイラストを使って解説

JavaScriptファイルの読み込み

<script src="JavaScriptファイルのURL"></script>

JavaScriptの読み込みを行うためのタグです。

このタグは、スクリプトが読み込んで実行が終わるまでブラウザの処理をブロックします。

あまり大きなスクリプトを読み込ませて実行させると、表示時間が長くなってしまうので気をつけましょう!

Googleボットに指示するタグ

Googleボットに情報をクロールしてほしくない時や、検索結果に乗せないでほしい時に使うタグを紹介します。

  1. 検索結果に表示しないようにする
  2. リンクをクロールしないようにする
  3. 検索非表示+クロールしない

検索結果に表示しないようにする

<meta name="robots" content="noindex">
  • 記事の内容があまりにも薄い
  • 日付別のアーカイブページ
  • お問い合わせページ

など、あまりあまり検索結果で見たいと思わないページを、Googleから検索できないようにしたい場合に使います。

Google検索には表示されなくなりますが、アクセスできなくなるわけではありません。

URLを知っていればアクセスできるので、完全に見られたくない場合などは「basic認証」などを導入しましょう。

リンクをクロールしないようにする

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

Googleはページにリンクを辿ることで、新しいページを見つけることだけでなく、ページ間の関連性や順位づけを行っています。

nofollowを設定すると、見ているページからのリンクをGoogleが辿らないように出来ます。

そのページから設定しているリンクが低評価なものばかりだった場合、自分のサイト自体の評価が下がる要因ともなりえます。そのような事にならないように、低評価のリンクばかりのページにnofollowをつけ、Googleに辿る必要の無いリンクであることを教えます。

検索非表示+クロールしない

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

先程解説したnoindexnofollowは同時に書けます。検索結果にも表示させず、そのページからのリンクも辿らないようになります。

書き方はnoindex,nofollowのように,noindexnofollowをつなげます。

複数のページの関係性を表すタグ

Webページには、1つのコンテンツを複数に分割したページやスマホ用に特化したデザインのページなど、様々な形があります。

Googleに誤解を与えないように、Webページの関係性を<head>に記述すると、本来の正しい評価を貰えるようになります。

  1. 分割ページであることを伝える
  2. スマホ用のページあるのを伝える
  3. 1つに似たコンテンツであることを伝える(canonical)

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

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

分割ページとは、1つのコンテンツを複数のページに分割しているページの事です。

例えば、このような画像のように「1,2,3,4…次のページヘ」みたいな送りリンクを見たことがあるのでは無いでしょうか?

このようなページを分割ページといいます。

分割ページでは、同じテーマで記事を書いているので、Googleに分割ページであることを伝えないと評価が分散してしまいます。

分散してしまうと、本来1ページにまとめておけば検索結果上位に食い込める内容だったとしても、食い込めなくなってしまうのです。

それを防ぐために、すべてのページを1つの内容として評価してもらう必要があります。

より具体的どうすればいいのでしょうか?

それは、3ページとも全てにページの前後関係をわかるように書くことです。

  1. 1ページ目には、次が2ページ目なので、<link rel="next" href="2ページ目URL">を書きます。
  2. 2ページ目には、前のページが1ページ目で、次のページが2ページ目なので、<link rel="prev" href="1ページ目URL"><link rel="next" href="1ページ目URL">を書きます。
  3. 3ページ目には、前のページが2ページ目なので、<link rel="prev" href="2のページURL">を書きます。

このように、1つの共通したタグを書くのではなく、前後関係ごとに使うタグの内容が異なるので注意しましょう!

他のサイトのheadには何が書かれているか見てみよう!

他のサイトにはどんな内容が書かれているのか気になりますよね?

ここでは2サイトを紹介します。

  1. googleブログ: blog.google
  2. yahoo japan: www.yahoo.co.jp
注意

下記でheadのソースコードを紹介していますが、説明の都合上一部を削除したり順番を入れ替えたりしてあります。正確なソースコードを知りたい人は、本家ホームページより確認してください。

googleブログ: blog.google

上記で紹介した殆どのタグが使われていることが確認出来ます。

  1. 文字のエンコード: <meta charset="utf-8">
  2. viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0">
  3. Internet Explorer用の設定: <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. 記事の概要・説明文: description

また、ここでは紹介していませんが下記の設定もされているようです。

  1. SNSでシェアされた時、どのように表示するのかを決める設定: Open Graph Metadata
  2. ampに関する設定: amphtml
  3. google search console等で使用される解析用タグ: gtm-tag

yahoo japan: www.yahoo.co.jp

「googleブログ」でつかわれているものに加えて、下記のようなタグも使われているようです。

  1. DNSに関する高速化: dns-prefetch:
  2. ページ表示に関する高速化: preconnect:
  3. スマホページの存在を伝える: alternate
  4. アイコンの設定: shortcut icon
  5. google search console等で使用される解析用タグ: google-site-verification
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。