このページについて
MDN(Mozilla Developer Network)の技術情報ページを和訳し、要点をまとめたものです。
- 英文のページを読んで理解すること
- 基礎をおさらいすること
を目的にした自己学習のページです。
厳密な和訳ではなく、全文を網羅したものでもありませんが、
掲載内容について間違いがありましたら、ご指摘いただけると幸いです。
気づいたことや感想は、「memo:」としてコメントしています。
対象ページ
MDN > Learn web development > HTML > Introduction to HTML > What’s in the head? Metadata in HTML
以下、概要。
HTMLのheadとMetaデータとは何か？
HTMLヘッダとは
- head要素（の中身）
- body要素と違い、（ブラウザ上に）表示されない
- Metaデータを含む
title要素の追加
h1要素との違い
同じ「タイトル」を表すものとしてh1要素があるが、両者は異なるものである
| h1要素 | title要素 | |
|---|---|---|
| 主な役割 | コンテンツ全体の見出し | ドキュメント全体のタイトル |
| 画面表示 | 表示される | 表示されない |
| １ページ内の出現頻度 | 通常1回 | 必ず1回 |
title要素の表示箇所
- ブラウザのタブ
memo: 本文では明言されていないが、キャプチャから推測させている
- ブラウザのブックマークに追加する際の名前欄のデフォルト値
- 検索結果
Metaデータ（meta要素）の追加
- Metaデータとはページを説明するもの
- meta要素は、HTMLドキュメントへMetaデータを追加する正式な方法である
- meta要素には様々な種類がある
文字コードの指定
charset
<meta charset="utf-8">
文字コード(charset)
- utf-8は、多くの言語（人語）の文字に対応する普遍的な文字コード
- そのため、文書内に様々な言語を表示させることができる
- ISO-8859-1では、ラテンアルファベットは文字化けする
- 全ページに指定するとよい
著者(author)と説明(description)の指定
多くのmeta要素は、name属性とcontent属性を含む
- name属性は、何についての情報かの種類を指定する
- content属性には、（name属性に対する）実際の内容を指定する
著者(author)と説明(description)は、その中でもよく使用されるmeta要素である
author_and_description
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN 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)
- そのページの書き手（内容についての質問を受け付ける人）を指定することが多い
- 著者の情報を自動的に別ページとして表示する機能を持つCMSもある
説明(description)
- そのページに関連する語句（キーワード）を含める
- 検索エンジンで、その語句において、高順位で表示される可能性が上がる
meta要素についての補足
- Googeでは、検索結果に下層ページのリンクが表示される。これはsitelinkと呼ばれる。詳細は、Google's webmaster toolsを参照。
- meta要素の中には、すでに使われなくなったものも多くある。keywordは、検索エンジンに複数の関連語句を伝える方法として使用されてきたが、スパム業者が何百もの偏った（不適切な）語句でkeywordを埋め尽くしたために、検索エンジンに無視されるようになった。
その他のmeta要素
SNSサイトに見られるように、そのサイト独自のプロパティも存在する
- Open Graph Dataは、より高度な情報をサイトに提供するために、Facebookが考案したMetaデータの規約である
MDNのOpenGraphData
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.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 HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
- twitterにも同様の機能がある。twitter.com上でURLが掲載されたときに表示する文言を指定できる。
MDNのtwitter
<meta name="twitter:title" content="Mozilla Developer Network">
カスタムアイコンの追加
Metaデータでカスタムアイコンを参照すると、サイトのデザインがよりリッチになる
favicon
favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- faviconは長らく使われてきた手法である
- 16px四方の画像を使用する
- 拡張子は.gifや.pngなどの汎用的なフォーマットでもよいが、IE6を考慮すると.icoが望ましい
memo: 2017年現在、IE6はMicrosoftのサポート対象外になっている
- faviconは、ブラウザのタブやブックマークのアイコンとして使用される
ホームスクリーン用アイコン
icon_for_home_screen
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- 近年では、様々な場面にも対応できるよう多くの種類のアイコンが指定されるようになった
- 上記コードのコメントは、「iPad第3世代用の高解像度Retinaディスプレイ」など、画像の用途が記されている
CSSファイルとJavaScriptファイルの追加
CSS
for_CSS
<link rel="stylesheet" href="my-css-file.css">
link要素を使用する
- link要素はhead要素内でのみ使用可能
- rel属性に"stylesheet"と指定することで、CSSであることを示す
- href属性には、CSSへのパスを指定する
JavaScript
for_JavaScript
<script src="my-js-file.js"></script>
script要素を使用する
- script要素は、必ずしもhead要素内にある必要はない
- ページ下部（body要素の閉じタグの直前）に置かれることも多い
- JavaScriptが実行される前に、HTMLの読み込みを完了させるため
- JavaScriptが存在しない要素にアクセスしようとすると、ブラウザはエラーを返す
- script要素は空要素に見えるが、閉じタグを必要とする
- 外部ファイルを読み込む代わりに、script要素の中にスクリプトを記述することができる
文書の言語指定
lang属性
<html lang="en-US">
html要素にlang属性を指定することで以下のような効果がある
- 検索エンジンに対して効果的
- スクリーンリーダーが正しい発音で読み上げる（同じ'six'という単語でも、英語とフランス語では読み方が違う）
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- 文書内の要素にlang属性を指定することで、別の言語として認識させることもできる