今回は前回説明したheadタグ内に記述するメタ情報について。
メタ情報を示す要素も数多くありますが、一般的に使われることの多い要素についていくつかピックアップします。
HTMLにおけるメタ情報とは および記述の方法
前回のおさらいですが、「この文書自身に関するメタ情報」とは書かれている言語・ページタイトル・筆者といったような文書そのものに関する属性情報です。具体的にはどのように書くのか、以下にサンプルコードを示します。
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="author" content="ゴロドク">
<meta name="copyright" content="Copyright ゴロドク">
<meta name="description" content="ゴロドクさんがあれやこれやについて思いのままに書きつづるブログ ">
<meta name="keywords" content="HTML,CSS,動画,ブログ">
<base href="https://blog.56doc.net/">
<link rel="stylesheet" href="https://blog.56doc.net/css/default.css">
<title>56DOCブログ</title>
</head>
DOCTYPE宣言やhtml、bodyタグなどは省略してheadタグ内のみのサンプルです。
<meta>タグ
<meta>タグにはその文書に関する基本情報を記述します。最初の数行にわたってありますが、<>内のmetaに引き続いて「属性="属性値"」の形で様々な情報を与えていきます。順次見て行きましょう。
<meta charset="UTF-8">
charset属性はそのhtmlファイルの文字コードに何が使用されているかを指定します。テキストデータの保存形式にはシフトJIS・ユニコード・EUCといったいくつかの形式があり、実際にそのファイルの保存形式に見合った値を=のあとに""でくくって記述します。
ここでは国際統一規格であるユニコードを示す="UTF-8"としています。
その他シフトJISを示す="Shift-JIS"、EUCを示す"EUC-JP"などを使うことが考えられますが、それぞれWindows系やUNIX系の独自の文字コードセットなので、新たに作成する文書はユニコードにしておくのが無難です。もちろんそのファイル自体もUTF-8形式で保存しなければならないのでお忘れなく。
<meta http-equiv="content-language" content="ja">
このように1つのmetaタグで複数の属性を組み合わせて使う場合もあります。
始めの属性をhttp-equiv="content-language"と書くと次のcontent属性で文章の言語（英語とかフランス語とか中国語とか）を指定します。私たちが通常取り扱うのは日本語の文章なので一般的にはcontent="ja"でいいでしょう。英語のページを書く場合はcontent="en"となります。
<meta name="author" content="ゴロドク">
これも属性2つ組み合わせのパターンです。始めの属性をname="author"とすると次のcontent属性で筆者名を記述します。
<meta name="copyright" content="Copyright ゴロドク">
同じく2つ組み合わせのパターンです。始めの属性をname="copyright"とすると次のcontent属性で文書の著作権者を記述します。一般的には筆者と同じになりそうですが、請負で他人のサイトを作った場合にはことなる場合もあるかもしれませんね。
<meta name="description" content="ゴロドクさんがあれやこれやについて思いのままに書きつづるブログ ">
同じく2つ組み合わせのパターンです。始めの属性をname="description"とした場合は次のcontent属性でこの文書本文の要約を記述します。
<meta name="keywords" content="HTML,CSS,動画,ブログ">
同じく2つ組み合わせのパターンです。始めの属性をname="keywords"とした場合は次のcontent属性でこの文書本文内で使用される、あるいは関連すると思われるキーワードを記述します。キーワードはコロン（,）で区切って複数指定できます。
長くなりそうなときはこれを複数行書いてもかまいません。
<meta>タグはいろんなこと書けるし、属性も1個だったり複数だったりするので正直よくわからんという人も多いかもしれません（私も最初は意味わからず混乱した）がこうして一つ一つについて紐解いていけばそれなりに意味はわかってくると思います。
<base>タグ
<base href="https://blog.56doc.net/">
<base>タグはHTML文書内にあるリンク先や画像イメージの場所の指定のうち、相対パスの基準となるURLをhref属性に記述します。
パスとは「ファイルの所在を表したもの」ですが、これの指定は相対パスではなく絶対パス(URL)を使って「https://blog.56doc.net/img001.jpg」みたいな感じで都度全部書くことも出来ます。
一方で<base>タグで「https://blog.56doc.net/」という基準となるURLを指定しておけば、以降のパス指定はこの部分を省略して「img001.jpg」のように不足する部分だけ指定する書き方も出来ます。
パスの指定は絶対・相対パスが混在しても構いません。が、混乱を避けるためにもサイト内リンクには相対パス、外部サイトへリンクする場合のみ絶対パス、という使い分けが一般的かと思います。
<link>タグ
<link rel="stylesheet" href="https://blog.56doc.net/css/default.css">
この文書に関連するファイルの定義およびその場所を指定します。rel=以降に関連文書の定義をrel属性に、関連文書へのパスをhref属性に記述します。ここではこのリンクする関連文書がこの文書に適用する外部スタイルシートなのでrel="stylesheet"を、その場所をhttps://blog.56doc.net/css/default.css"と指定しています。
<link>タグではこのほかにindexページとの関係、前後のページとの関係なども記述できますがここでは割愛します。
<title>タグ
<title>56DOCブログ</title>
<title>タグではその文書のページタイトルを記述します。作文書くときの題名のようなものだと思ってください。
このタイトルはサイト内で全て同一である必要はありません。むしろ各ページごとに適切なタイトルを与えるほうが情報としての価値は高まると思います。
まとめ
記述すべき内容が「メタ情報」という耳慣れない言葉なので難しく感じるかもしれませんね。
- 「メタ情報」とはその文書そのものに関する情報である
- タグの記述の基本は<タグ名 属性="属性値">の形をとる
- 1つのタグの中でも属性は必ずしも1つではなく、複数組み合わせて意味をなす場合もある
といったところがポイントでしょうか。先にも述べましたがhead内で使用できるタグはここに紹介した限りではありませんが、一般的に使われそうなところを並べてみました。
これらも実際の運用に当たっては決まりきった書き方になることが多いと思うので自分なりのひな形として保存しておくと良いかもしれません。
参考までにこのエントリで紹介した内容をひな形化したサンプルコードを以下に。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="author" content="筆者名">
<meta name="copyright" content="Copyright 著作権者名">
<meta name="description" content="このページの要約">
<meta name="keywords" content="このページに関するキーワード">
<base href="基準URL">
<link rel="stylesheet" href="外部スタイルシートへのパス">
<title>ページのタイトル</title>
</head>
<body>
この文書の本文
</body>
</html>
これをユニコード(UTF-8)形式のテキストとして、.html拡張子をつけて保存してみてください。これを元に適宜タグを追加削除して自分なりのひな形を作っていただければ、と思います。
コメント