【HTML】Webページには表示されないheadとは?

コーディング
まるこ
まるこ

Webサイトをオンライン上で閲覧できるようにするために欠かせないHTML文書は、<html> <head> <body> で構成されています。その内の<head>タグ内に記述した内容は、Webサイト(ブラウザ)上には表示されません。では一体、<head>の中にはどのような内容が記述されているのでしょうか。

そこで本記事では、headの役割や記述されている中身(タグなど)について、簡単に解説していきます。

HTML文書の構成

まずはHTML文書の構成について、確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <!-- headの中の情報はブラウザに表示されない -->
  </head>
  <body>
    <!-- bodyの中の情報はブラウザに表示される -->
  </body>
</html>
<!DOCTYPE html>「DOCTYPE宣言」と呼び、WebページがどのHTMLの仕様(バージョン)であるかを記している。※HTMLタグではない。
<html>「DOCTYPE宣言」の直後に記述。HTML文書であることを表している。
<head>Webページの基本情報を記述。文字コード、ページのタイトルや説明文、CSSファイルなどの外部ファイルへのリンクが、主に設定されている。
head内の情報は、ブラウザには表示されない。※title部分はタブに表示される。
<body>実際にブラウザに表示される情報を記述。テキストや画像、動画など、HTML文書の本体となる内容が記されている。

headとは

head内に記述された内容は、ブラウザに表示されないため人の目には見えません。そのため、極端に言えばhead内に何も設定していなくても、body内の情報は表示されます。

しかし、ブラウザや検索エンジンは、head内に記述されている内容からWebページの情報を得ています。つまりhead内の記述は、人ではなくコンピューターに情報を提供するための設定なのです。

また、Googleなどの検索エンジンは、head内の情報をもとに検索結果を表示しています。検索順位を上位表示するためには、head内に適切なWebページの情報を設定する必要があります。

headの書き方

headの書き方に固定のルールはなく、Webサイトのターゲットや運営方針によって必要なタグは変わります。

head内で使用する主要タグ

  • titleタグ:サイト名や個々のページ内容を表す短いテキスト
  • metaタグ:記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報
  • linkタグ:HTML文書と外部リソースを関連付ける

head内に設定するタグ一覧

それでは、記述例とともにhead内に設定しているタグの役割を見ていきましょう。

文字コード

<meta charset="UTF-8" />

HTMLで使用している文字コードの設定です。設定する文字コードは「UTF-8」が推奨されています。
文字コードの未設定や、HTMLとブラウザで異なる文字コードを使用していると、文字化けを起こしてしまうなど、正しくページを表示できない原因になります。

ページタイトル

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

ページタイトルの設定です。設定したタイトルは、タブや検索結果などに表示されます。タイトルは、ページにどのような内容が記載されているのか、端的に伝える重要な役割があります。

また、検索結果で表示される文字数には制限があり、日本語全角だとパソコンで約30文字、モバイル端末で約40文字です。(閲覧する環境によって文字数は異なります。)

ページ概要

<meta name="description" content="【ページの概要】" />

ページの概要について設定します。概要文は、ページタイトルと同様に、ページの記載内容を伝える役割があります。記述した内容は、ページタイトルとともに検索結果などに表示されます。検索結果に表示できる文字数は約120文字です。

多くのユーザーは、検索結果のタイトルと概要文を見て、ページを閲覧するか否かを決めています。ページのタイトルと概要文は、情報を探しているユーザーの視点に立って、設定するように心がけましょう。

レスポンシブ対応(ビューポート)

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

レスポンシブとは、パソコン、タブレット、スマートフォンなどの異なる画面サイズに対して、ページの表示を柔軟に調整し、最適な状態で表示することです。また、レスポンシブ対応のタグを設定しないと、タブレットやスマートフォンなどのモバイル端末の横幅変動に対応できません。

ビューポートとはWebページを表示する領域で、「width=device-width」は、デバイスの横幅に柔軟に対応しなさい!という指示をしています。ビューポートの概念は少し難しいため詳細は割愛しますが、モバイル端末でページを最適に表示させるために必要な設定です。

レスポンシブ対応設定したページ

外部ファイルの読み込み

外部にあるCSSやJavaScriptのファイルを、HTMLと紐付けるための設定です。

CSSファイル

<link rel="stylesheet" href="【ファイルのパス(URL)】" />

CSSファイルを外部から読み込む場合は、linkタグを使用します。

  • rel属性:href属性で読み込むファイルの種類を指定
  • href属性:ファイルのパス(URL)を指定

JavaScriptファイル

<script src="【ファイルのパス(URI)】"></script>

JavaScriptファイルを外部から読み込む場合は、scriptタグを使用します。※閉じタグ忘れに注意※

  • src属性:ファイルのパス(URI)を指定

その他、WebフォントやjQueryなどのCDN(Content Delivery Network)を利用する場合も、head内に記述します。

ファビコン

<link rel="icon" href="【画像のパス(URL)】" />

タブやブックマークに表示されるアイコン画像の設定です。「favicon.ico」という画像を作成・保存し、href属性に画像ファイルのパスを指定します。
Webサイトのシンボルマークとなるアイコンで、png形式の画像も使用できますが、ico形式の画像の使用が一般的です。

Webクリップアイコン

<link rel="apple-touch-icon" href="【画像のパス(URL)】" sizes="180x180" />

スマートフォンで、Webページのショートカットをホーム画面上に置いたときに表示されるアイコン画像の設定です。 「apple-touch-icon.png」というpng形式の画像を作成・保存し、href属性に画像ファイルのパスとサイズを指定します。(※サイズは作成画像に合わせて変更してください。)

画像が未設定でもホーム画面にショートカットを作成できます。しかし、何のサイトのショートカットであるかがひと目でわかるため、設定しておくと便利です。

OGP設定

OGP使用の宣言

<!-- トップページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

<!-- 記事ページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

基本設定(Facebookシェア用)

<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:site_name" content="【サイト名】" />
<meta property="og:image" content="【サムネイル画像のURL】" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="【FacebookのアプリID】" />

Twitterシェア用(基本設定に追加)

<meta name="twitter:card" content="【Twitterカードの種類(summaryなど)】" />
<meta name="twitter:site" content="@【Twitterのユーザー名】" />

FacebookやTwitterなどのSNS上で、ページをシェアした際の表示設定です。OGP(Open Graph Protcol)を設定すると、タイトル・画像・概要文などを用いて、ページの内容をわかりやすく伝えられます。

Twitterの表示例

ウェブクローラの動作制御

ページのインデックス作成を拒否する

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

ページのリンクを辿らないようにする

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

noindexとnofollowの一括記述

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

ウェブクローラがリンクを辿ったり、ページをインデックスする動作を制御する設定です。ページを検索結果や評価対象から外したい場合に指定します。
ウェブクローラの動作を制御するだけであり、対象ページのURLがわかっていれば問題なく閲覧できます。

URLの正規化

<link rel="canonical" href="【正規化するURL】" />

Webサイト内で内容が重複するページが複数ある場合に、正規のURLを設定します。検索エンジンに重複するページが別ページとして判断されると、正しい評価が行われません。URLの正規化の設定をしておくことで、検索エンジンが正規ページを認識する手助けとなり、ページの評価をまとめられます。

分割ページ設定(ページネーション)

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

1つのページを複数に分ける際に、現在のページと別ページとの関連を設定します。ブログなどで、1つのテーマについて項目ごとにページを分割する場合などに使用すると、検索エンジンは複数ページを1つのページとして評価します。

電話番号の自動リンクを無効化

<meta name="format-detection" content="telephone=no" />

iPhoneのSafariで、電話番号自動リンク化を無効にする設定です。iPhoneのSafariには、電話番号を検出すると自動でリンクに変換する機能が備わっています。しかし、電話番号以外の番号もリンク変換されてしまう場合があり、精度が不安定です。電話番号をリンクする場合は、個別設定する方が望ましいかもしれません。

サンプルコード

<!-- OGP使用宣言あり(トップページ) -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>【ページのタイトル】</title>
  <meta name="description" content="【ページの概要】" />

  <!-- ファビコン/Webクリップアイコン設定 -->
  <link rel="icon" href="【画像のパス(URL)】" />
  <link rel="apple-touch-icon" href="【画像のパス(URL)】" sizes="180x180" />

  <!-- 外部ファイルの読み込み -->
  <link rel="stylesheet" href="【ファイルのパス(URL)】" />
  <script src="【ファイルのパス(URL)】"></script>

  <!-- OGP基本設定(Facebookシェア用) -->
  <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:site_name" content="【サイト名】" />
  <meta property="og:image" content="【サムネイル画像のURL】" />
  <meta property="og:locale" content="ja_JP" />
  <meta property="fb:app_id" content="【FacebookのアプリID】" />

  <!-- Twitterシェア用OGP設定(基本設定に追加) -->
  <meta name="twitter:card" content="【Twitterカードの種類(summaryなど)】" />
  <meta name="twitter:site" content="@【Twitterのユーザー名】" />

  <!-- ウェブクローラ動作制御 -->
  <meta name="robots" content="noindex,nofollow" />

  <!-- URLの正規化 -->
  <link rel="canonical" href="【正規化するURL】" />

  <!-- 分割ページ設定 -->
  <link rel="prev" href="【前のページのURL】" />
  <link rel="next" href="【次のページのURL】" />

  <!-- 電話番号の自動リンクの無効化 -->
  <meta name="format-detection" content="telephone=no" />
</head>

サンプルコードはコピーしてご使用いただけます。head内に記述する内容は、Webサイト毎に異なりますので、不要なタグは削除してください。
また、ファイルのパス(URL)や名前は、環境に合わせて適宜変更してください。

まとめ

今回は、HTML文書の中のheadについて簡単に解説してきました。headの中身はコンピューターにWebページの情報を提供する場所です。記述するタグの役割を理解して、正しく設定しましょう。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。