ヘッド部には何が入る? HTML のメタデータ

HTML の文書のヘッド部は、ページが読み込まれてもウェブブラウザーには表示されない部分です。この部分には、例えば、 <title> といった情報や CSS へのリンク（HTML を CSS で修飾する場合）、独自のファビコンへのリンク、そしてほかのメタデータ（HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど）の情報を含んでいます。ウェブブラウザーはヘッド部の情報を、 HTML 文書を正しく描画するために使用します。この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。

前提知識: HTML を始めようで扱っているような、基本的な HTML の知識。
目的: HTML のヘッド部について学ぶこと。ヘッド部の目的は何か、そしてヘッド部が含む情報の中で最も重要なのは何か、加えてそれが HTML 文書の中でどれほどの影響を持つか。

HTML のヘッド部とは何か？

前の記事で扱った HTML 文書をもう一度見てみましょう。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML のヘッド部は <head> 要素の内容です。 <body> 要素の内容（これはブラウザーに読み込まれた時に表示されます）とは違い、ヘッド部の内容はページに表示されません。その代わり、ヘッド部の仕事は文書のメタデータを含んでいます。上記の例では、ヘッド部はとても小さいものです。

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

しかし、より大きなページでは、ヘッド部がかなり大きくなることがあります。好きなウェブサイトで、開発者ツールを使用して、ヘッド部の中身を確認してみてください。ここでの目的は、ヘッド部に記載できるすべてのものの使用方法を紹介することではなく、ヘッド部に記載したい主要な要素の使用方法を教え、ある程度慣れてもらうことです。では、始めましょう。

タイトルをつける

<title> 要素についてはすでに見てきました。これは文書にタイトルを追加するのに使います。しかしこれは <h1> 要素と良く混同されます。こちらは body の中で最上位レベルの見出しを追加するものであり、時々ページタイトルとしても参照されます。しかしこれらは別のものです。

  • <h1> 要素は、ブラウザーで読み込まれるとページに現れます。一般的に、これは 1 ページに 1 回使用し、ページ内容のタイトル（記事のタイトル、またはニュースの見出しなど、使用に適したもの）をマークアップするために使用すべきです。
  • <title> 要素は（文書のコンテンツではなく） HTML 文書全体のタイトルを表すメタデータです。

アクティブラーニング: 単純な例を検討する

  1. このアクティブラーニングを始めるのに、我々の GitHub リポジトリーに移動して title-example.html page のコピーをダウンロードしてください。これは次のいずれかでできます。
    1. ページのコードをコピー＆ペーストして、コードエディターの新規ファイルに入れて、ふさわしい場所に保存します
    2. ページの "Raw" を押すと、新しいタブに生のコードが出ます。次に、ブラウザーの [名前を付けて保存...] メニューを選択して、、ファイルの保存場所を選んでください。
  2. ファイルをブラウザーで開きます。このようなものが見えるでしょう。 シンプルなウェブページで、タイトルに <title> 要素を設定し、 <h1> 要素を <h1> に設定したものです。<h1> コンテンツが出ている場所と、<title> コンテンツが出ている場所がひと目で分かります!
  3. また、コードをコードエディターで開き、これらの要素の内容を編集し、ブラウザーでページを更新してみてください。楽しみながらやってみてください。

<title> 要素はいろいろな方法で使われます。例えば、ページのブックマーク（ブックマーク > このページをブックマーク または Firefox の URL バーのスターアイコンにて）してみると、提案されたブックマーク名として <title> コンテンツが記入されています。

FirefoxでブックマークされているWebページ。ブックマーク名には、 <title> 要素の内容が自動的に付与されています。

<title> の内容は後述するように、コンテンツは検索結果にも使われます。

メタデータ: <meta>要素

メタデータはデータを説明するデータで、 HTML には文書にメタデータを追加する「公式な」方法があります — <meta> 要素です。もちろん、この記事で話しているその他のものもメタデータと考えられます。ページの <head> に入る <meta> 要素にはさまざまな種類がありますが、この段階では、ややこしすぎるため、すべては説明しません。その代わり、よく見かけるいくつかのものを説明し、理解を与えます。

HTML 文書の文字コードを指定する

上で見てきた例では、この行が含まれていました。

<meta charset="utf-8">

この要素は文書の文字エンコーディング、つまり文書が使用することを許可されている文字セットを指定します。 utf-8 は普遍的な文字セットで、あらゆる人間の言語のほとんどすべての文字を含みます。これは、ウェブページがあらゆる言語の表示を扱うことができることを意味しています。したがって、作成するすべてのウェブページでこれを設定するのはよい考えです。例えば、このページは英語と日本語をうまく処理することができます。

日本語と英語を含むウェブページで、文字コードをユニバーサル (utf-8) に設定した場合。どちらの言語も問題なく表示されます。文字エンコーディングを、例えば ISO-8859-1 （ラテン文字のアルファベットの文字セット）に指定すると、ページの表示はメチャクチャな見た目になります。

英語と日本語を含むウェブページで、文字コードを latin に設定した場合。日本語の文字が正しく表示されません。

メモ: ブラウザーによっては（例えば Chrome では）自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに utf-8 エンコーディングを設定すべきです。

アクティブラーニング: 文字エンコーディングで実験する

これを試すには、<title> についての前の節で得たシンプルな HTML テンプレート (title-example.html page) をもう一度見てみて、 meta charset の値を ISO-8859-1 に変えて、日本語を追加してみます。私たちの使ったコードは次のものです。

<p>Japanese example: ご飯が熱い。</p>

作成者と説明を追加する

多くの <meta> 要素は name と content 属性が含まれます。

  • name は meta 要素の種類を指定します。含まれる情報の種類です。
  • content は実際のメタコンテンツを指定します。

ページに入れるのが便利な 2 つのメタ要素は、ページの著者 (author) を定義するものと、ページの説明 (description) を与えるものです。例を見てみます。

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

作者 (author) を指定することは多くの点で有益です。内容に関して質問がある場合、誰がそのページを書いたのかを把握することができ、連絡を取りたい場合に便利だからです。コンテンツ管理システムの中には、ページの作者情報を自動的に抽出して、そのために利用できるようにする機能があるものもあります。

ページの内容に関連したキーワードを含む説明 (description) を指定すると、検索エンジンで行われる関連検索で、ページをより上位にできる可能性があるため役立ちます（この行為に対する用語は Search Engine Optimization （検索エンジン最適化）または SEOといいます）。

アクティブラーニング:検索エンジンにおける description の扱い

description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。

  1. Mozilla Developer Network のフロントページに移動します。
  2. ページのソースを見ます（ページで右クリックし、コンテキストメニューから [ページソースを表示] を選択）。
  3. description の meta タグを見てみます。このようなものです（変わっているかもしれませんが）。 
    <meta name="description" content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both Web sites and
  progressive web apps.">
  4. ここでお好きな検索エンジンで "MDN Web Docs" を検索します（ここでは Google を使っています）。 description の <meta> と <title> 要素のコンテンツが検索結果で使われています。確かに値打ちがあります。 A Yahoo search result for "Mozilla Developer Network"

メモ: Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう。これはサイトリンクと呼ばれ、Google ウェブマスターツール で設定されます。これは Google 検索エンジンでサイトの検索結果を良くする方法です。

メモ: 多くの <meta> 機能はもう使われていません。例えば、 keyword の <meta> 要素 (<meta name="keywords" content="fill, in, your, keywords, here">) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。

メタデータの他の種類

ウェブを旅していると、他にもさまざまな型のメタデータを見つけることができます。ウェブサイト上で目にする機能の多くは、独占的に作成されたもので、特定のサイト（SNS サイトなど）が使用する特定の情報の断片を提供してもらうために設計されたものです。

例えば、 Open Graph Data は Facebook が開発した、ウェブサイトにより豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。

<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

この効果として、 Facebook で MDN Web Docs にリンクしたとき、リンクに画像と説明が表示されます。ユーザーにとってより便利になります。

MDN ホームページの Open Graph プロトコルデータを facebook で表示し、画像、タイトル、説明文を表示しています。

Twitter も同様に、 Twitter Cards という独自のメタデータを持っており、サイトの URL が twitter.com で表示されたときに同様の効果を実現しています。例えばこのようになります。

<meta name="twitter:title" content="Mozilla Developer Network">

サイトに自分の好きなアイコンをつける

もっとサイトデザインを豊かにするために、メタデータにカスタムアイコンを追加して、特定のコンテキストで表示されるようにすることができます。このうち最もよく使われるものが ファビコン （ブラウザーの「お気に入り」や「ブックマーク」の一覧を指すために使われる "favorites icon" の略）です。

地味なファビコンは、何年も前から存在しています。 16 ピクセルの正方形のアイコンを複数の場所で使用する、この種のアイコンの最初のものです。ブラウザーによっては、開いているページを含むブラウザーのタブや、ブックマークパネルのブックマークされたページの横にファビコンが表示されることがあります。

ページにファビコンを追加するには次のようにします。

  1. サイトのインデックスページと同じディレクトリーに、 .ico 形式で保存します（大半のブラウザーは .gif や .png のような、より一般的な形式のファビコンにも対応していますが、 ICO 形式を使えば Internet Explorer 6 以降の古いブラウザーでも動作することが保証されます）。
  2. HTML の <head> ブロックに下記の行を入れて参照します。 
    <link rel="icon" href="favicon.ico" type="image/x-icon">

ブックマークパネルでファビコンが表示される例です。

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

最近では考慮するべきアイコンの種類がほかにもたくさんあります。例えば、 MDN Web Docs ホームページのソースコードには以下の行があります。

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- basic favicon -->
<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png">

コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。

これらの種類のアイコンをすべて実装することを今すぐには心配しないでください。これはかなり高度な機能であり、コースを進めるためにこのような知識があることを期待することはありません。そのため、他のウェブサイトのソースコードを閲覧しているときに、このようなものがあることに気付いたときのために、その内容を知っておくことが主な目的です。

メモ: もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 Content-Security-Policy ヘッダーの img-src ディレクティブがアクセスを妨害していないかを確認してください。

HTML に CSS と JavaScript を追加する

最近のほとんどすべてのウェブサイトでは、格好よく見せるために CSS や動画や地図、ゲームなどといったインタラクティブな機能を追加するために JavaScript を用いています。これらは最も一般的に用いられ、それぞれ <link> 要素、 <script> 要素で表します。

  • <link> 要素は必ず HTML 文書のヘッド部の中に置きます。二つの属性をとり、 rel="stylesheet" はこれが文書のスタイルシートであることを示し、 href はスタイルシートファイルへのパスを表します。 
    <link rel="stylesheet" href="my-css-file.css">
  • <script> 要素もヘッド部に入れるべきであり、読み込みたいJavaScriptのパスを含む src 属性と、基本的にページが HTML の解析を完了した後にJavaScriptを読み込むようにブラウザーに指示する defer を記載する必要があります。これは、JavaScriptを実行する前に HTML がすべて読み込まれていることを確認し、 JavaScript がまだページ上に存在しない HTML 要素にアクセスしようとした結果、エラーが発生しないようにするために有用なものです。ページでの JavaScript の読み込みを処理する方法は実際にはいくつかありますが、現代のブラウザーではこれが最も信頼できる方法です（他にも、スクリプトの読み込み方針を参照してください）。 
    <script src="my-js-file.js" defer></script>
    メモ: <script> 要素は空要素のように見えるかもしれませんが、そうではありませんので、終了タグが必要です。また、外部のスクリプトファイルを読み込むのではなく、 <script> 要素の中にスクリプトを置くこともできます。

アクティブラーニング: ページに CSS と JavaScript を追加する

  1. アクティブラーニングを始めるにあたって、私たちの meta-example.html, script.js ,style.css をコピーしてローカルの同じフォルダに保存してください。ファイル名と拡張子が変わっていないことを確認してください。
  2. HTML ファイルをブラウザーとテキストエディターで開いてください。
  3. 先に述べた情報に従って、 <link> 要素と <script> 要素を HTML に書き加えてください。すると CSS と JavaScript が HTML に適用されます。

以上を正しく行い、 HTML を保存してブラウザーを更新したら、変化がみられるでしょう。

CSS と JavaScript が適用されたページの例です。 CSS はページを緑色にし、 JavaScript はページに動的なリストを追加しています。

  • JavaScript が空のリストをページに追加しました。リスト内のどこかをクリックすると、ダイアログボックスが現れてリストの新しい要素となるテキストを入力するように求められます。 OK ボタンを押すと。リストに新しい要素が加わります。リストに既にある要素をクリックすると、ダイアログボックスが現れ要素の名前を変えることができます。
  • CSS によって背景は緑になり文字が大きくなっています。 JavaScript によってページに加えられたいくつかのコンテンツもスタイルが適用されます（黒い境界線の付いた赤いバーは、 JS が生成したリストに CSS が追加したスタイルです）。

メモ: このアクティブラーニングで行きづまって CSS/JS が適用できなくなってしまった場合は、 css-and-js.html サンプルページをチェックしてみてください。

文書の主要な言語の設定

最後に、ページの言語を設定することができること（そしてそうすべきこと）に言及する価値があるでしょう。これは、 lang 属性を開始 HTML タグに追加することで実現することができます（meta-example.html に表示され、以下に表示されています）。

<html lang="en-US">

これは様々なところで役に立ちます。言語が設定されていれば、 検索エンジンによる HTML 文書のタグ付けがより効果的になりますし（たとえば、言語固有の結果を正しく表示できるようになるなど）、読み上げソフトを使用している視覚障碍者にとっても有用です （"six" はフランス語と英語の両方に存在しますが、発音が異なります）。

文書のサブセクションを異なる言語として認識されるように設定することもできます。たとえば、次のようにすると日本語の部分を日本語として認識されるように設定できます。

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

これらのコードは ISO 639-1 規格で定義されています。それらについての詳細は、 HTML と XML の言語タグにあります。

まとめ

これで HTML のヘッド部の弾丸ツアーは終了します。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょうから、もっとも一般的なことに関する考えだけを紹介したかったのです。たった今、そこに到達しました。次の記事では、 HTML テキストの基礎について説明します。