ほんっとにはじめてのHTML5とCSS3：[45-1] meta要素で基本情報（メタデータ）を指定しよう

[45-1] meta要素で基本情報（メタデータ）を指定しよう

最終更新日：2017年12月08日　（初回投稿日：2012年08月09日）

今回から <meta>要素 です。

これまで見てきた メタデータ・コンテンツの要素、<title> <base> <link> <style> <script> は、すべて HTMLに関する「メタデータ」を指定するためのもの。
今回の <meta>要素 は、この<title> <base> <link> <style> <script>で指定できない「メタデータ」を扱う要素だそうです。

使用する要素	`<meta>（終了タグはありません）`

使用する属性	`charset属性、name属性、http-equiv属性、content属性`

[45-1] meta要素で基本情報を指定しよう　←今日はココ: <meta>要素のルールと、属性のルール
[45-2] meta要素の charset属性で文字コードを指定しよう: charset属性で文字エンコードを指定します。
[45-3] meta要素の name属性でサイトの情報を指定しよう: name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。
[45-4] meta要素の http-equiv属性で動作を指示しよう: http-equiv属性でページのリダイレクトを指定できます。
[45-5] meta要素で OGPを設定しよう: Facebook などの SNSでシェアされたときの「サムネイル画像や説明文などのセット」を表示させます。

本日のINDEX

メタデータとは？
<meta>要素のルール
属性のルール

参考：
The meta element - HTML 5.1 2nd Edition | W3C Recommendation
The meta element - HTML Living Standard | WHATWG
meta 要素 - HTML | MDN

メタデータとは？

メタ（meta-）とは、ギリシャ語由来で「超−」「高次−」「−の後ろ（次の）」「−を含む」などの意味を持つ英語の接頭辞だそうです。
「何らかの事柄を対象とする、同種の事柄」の頭に「メタ」を付けるんだって。

ITでのメタデータは「データについてのデータ（著作者などの色々な情報）を示した」ものだから「メタデータ」と言うそうです。

HTMLだけでなく、コンピュータ関連では、どんなデータファイルにも「作成日時、作成者、データ形式、タイトル、注釈」などの「メタデータ」が付いてるんだそうです。
データの編集管理・検索に役に立つから。
例えば、テキスト、写真、動画ファイルなどを保存するとき、まずファイルの先頭に「メタデータ」を格納し、そのあと「データ本体」を格納するようになってるんだって。

ちなみに、メタ（meta-）の接頭辞がつくコトバを調べたら他にもいろいろありました。
例えば、
●「メタ言語」= ある言語を表現するための言語。
●「メタフィクション」= フィクションの中で、これはフィクションだと読者（観客）に意識させる技巧だそうです。

<meta>要素のルール

<meta charset="UTF-8">

そして <meta>要素は 属性なしで使う事はありません。
「charset属性」「name属性」「http-equiv属性」のどれか 1つを <meta>要素に入れます。これらの属性を複数使いたいなら、<meta>要素を複数書きます。
ということで、<meta>要素は複数OKです。

<meta>要素の属性のルール

1つの<meta>要素に「charset属性」「name属性」「http-equiv属性」のうちどれか1つだけしか使えない。
属性を3つとも使うんだったら <meta>要素も3本書きます。

「charset属性」は 1つの HTML上に1コだけしか使えません。ページの文字エンコーディングを指定するので。

「name属性」「http-equiv属性」を使ったら「content属性」も必ず使います。

「content属性」は単独では使えません。
必ず「name属性」か「http-equiv属性」と一緒に使い、それらの値に対しての具体的な指定をするための属性です。

下の例では OGPのための指定があるので、<head>内にたくさんの <meta>要素が入っています。

<head>
  <meta charset="UTF-8"> <!--文字エンコード--> 
  <title>ページタイトル</title>
  <link rel="stylesheet" href="css/default.css">
  <link rel="stylesheet" href="css/add.css">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!--ビューポート--> 
  <meta name="robots" content="index,follow"> <!--クローラーへの指定--> 
  <meta name="author" content="著作者">
  <meta name="description" content="紹介文">
  <meta property="og:type" content="blog（ページのタイプ）"> <!--コレ以降OGPの指定-->
  <meta property="og:description" content="ページの紹介文">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:url" content="ページのURL">
  <meta property="og:image" content="アイキャッチ画像のURL">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP（ローカル言語）" />
  <meta property="fb:app_id" content="FacebookのApp-ID">
  <meta name="twitter:card" content="summary（カードの種類）">
  <meta name="twitter:site" content="ツイッターID">
</head>

次回から、<meta>要素の「属性」を順に解説していきます。

次回予告

次回は<meta>要素の「charset属性」を使ってみましょう。
これは「文字コード」を指定する属性です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。