meta  変更 : メタ情報

カテゴリ

例

<!-- 文書の文字コードはUTF-8 -->
<meta charset="UTF-8">
<!-- Frontweaver 8.2というソフトウェアを使ってHTMLファイルを作成 -->
<meta name="generator" content="Frontweaver 8.2">
<!-- 20秒後にpage4.htmlに移動 -->
<meta http-equiv="Refresh" content="20; URL=page4.html">
<!-- テーマカラーを設定 -->
<meta name="theme-color" content="#3c790a">
<!-- スマホでだいたいいい感じに表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

説明

メタ情報を色々書くやつ。

name/http-equiv/charsetいずれかの属性が必須。 name属性かhttp-equiv属性の場合は更にcontent属性が必須。

とりあえずhead開始タグのすぐ後に<meta charset="utf-8">しておく。 ASCIIでもUTF-8でもcharset指定は必須。 先頭1024バイト以内に書けとあるが、よほどの事が無い限りはそんな事にはならないだろう…と思ったら早速某所で見つけてしまったので、やっぱりすぐ書くように気をつけような！この制限は、HTML4.01時には無かった。

name=Content-Style-Type、name=Content-Script-Typeはそれぞれ、デフォルトでCSS、JavaScriptのMIMEタイプが想定されるようになったので、HTML5では記載しなくても良くなった。

viewportについても言及があり、ユーザビリティやアクセシビリティを損なうのでuser-scalable=noやmaximum-scale=1.0は指定すべきでない、とある。

HTML5でhead内のnoscript内にも書けるようになった。Living Standardでは更に、itemprop属性を伴う場合はフレーズが可能な場所にも置けるようになっている。主にMicrodata対応のため。

Twitterやfacebookでシェアされた時の見た目の調整にも、この要素が使われる。

属性 属性値の見方

charset  new[エンコード]
文書の文字コードを指定。
content  変更[文字列]
name属性かhttp-equiv属性に対応する値。HTML5ではcharset属性の追加に伴い要素としては必須ではなくなったが、name属性かhttp-equiv属性が指定されている場合は必須。
http-equiv[文字列]ie △
HTML4ではHTTPヘッダーのように振る舞う（HTTP Equivalent）。だったけど、HTML5では単に「プラグマディレクティブ！」とだけ書いている。プラグマディレクティブとは何かと言うと、プラグマなディレクティブである。よー分からん。一例を以下に挙げる。
  • default-style: 代替スタイルシートの中でデフォルトで適用するスタイルのtitleを指定
  • refresh: content属性に整数を指定した場合は、その秒数毎にページがリロードされる。1; URL=[URL]のようにURLを指定した場合は、そのURLにリダイレクトされる。よくサイトの引っ越しに利用されるが、その場合はlink rel="canonical" href="[URL]"で引越し先のURLを指定しておくと検索エンジンに優しい。
  • content-security-policy: Content Security Policyの値を指定。
  • x-ua-compatible 未来: 値はIE=edge固定。元来はInternet Explorerが過去バージョンとの互換表示を確保するために追加されたもの。
  • set-cookie: Set-Cookie HTTPヘッダーを使う
  • content-language: lang属性を使う
  • content-type: 機能的にはcharset属性と同様。なので両方同時に登場してはいけない。
name[文字列]chrome △ opera △ firefox △ edge △ ie △ safari △ ios △
大文字小文字を区別しない。幾つかの例が示されている。
  • application-name: Webアプリケーションの場合、アプリケーション名
  • author: 著者名
  • description: ドキュメントの説明。検索結果にまんま使われちゃう事があるので結構重要。
  • generator: HTMLドキュメントを生成したソフトウェア
  • keywords: ページに関係があるキーワードをカンマ区切りで列挙。検索エンジンでの検索結果に考慮されるが、レキシテキケーイのせいでほぼ無価値。
  • referrer: Referrer Policyを指定。ページ内のリソースは基本的にこのポリシーが適用され、リンク先への遷移時にも適用される。
  • robots/googlebot: 検索エンジンにそのページをどうして欲しいか伝える。仕様書に記載は無いが、あまりにも有名。
  • theme-color 未来: テーマカラーをCSSカラーで設定。例えば#123456みたいな値。タブバーの色とかに使われたりするらしい。今のところAndroidのChromeのオレ実装。
  • viewport: 主にスマホでのページの表示に必須で、初期ズームやズーム可能範囲などを設定。デファクトスタンダード。CSS Device Adaptation Moduleという名前で後追いで仕様化されようとしている。
  • その他: WHATWG Wiki MetaExtensions pageに大量のリストがある。
scheme
複数のスキームが必要な場合は、content属性の一部にする