[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属性

<meta>要素は、属性値でいろいろな指定ができるので、ちょっとややこしい。
いちばん大事な役割は、ページの「文字エンコード」の指定(これは、[3] !DOCTYPE宣言をしよう でやっています)
他に、サイトの説明文の指定、クローラーへの指示、ビューポートの指定、ページのリダイレクト、OGPの指定など、あらゆることができる要素です。

<meta>要素は内容が多いため 記事を数回に分けます。

[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
  1. メタデータとは?
  2. <meta>要素のルール
  3. 属性のルール

参考:
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>要素は<head>要素内に書きます。
また、<meta>要素は <head>内にある <noscript>要素の中にも書けます。

<meta>要素は、<base><link> と同様に終了タグは無し

<meta charset="UTF-8">

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

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

<meta>要素の属性は W3C や WHATWG の仕様書では
「charset属性」「name属性」「http-equiv属性」「content属性」の4つ。

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属性」を使ってみましょう。
これは「文字コード」を指定する属性です。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.